refactor: tweak UIs

src/common/component/InviteModal/index.tsx

@@ -25,14 +25,16 @@ const InviteModal: FC<Props> = ({ type = "server", cid, title = "", closeModal }
   const finalTitle = type == "server" ? server.name : `#${title || channel?.name}`;
   return (
     <Modal>
-      <div className="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 max-h-[85vh] overflow-y-scroll  md:min-w-[408px] relative">
-        <h2 className="flex items-center justify-between text-lg text-gray-700 dark:text-gray-50">
+      <div className="flex flex-col bg-white dark:bg-gray-900 rounded-lg max-h-[85vh] overflow-y-scroll  md:min-w-[408px] relative">
+        <h2 className="z-50 p-4 bg-white dark:bg-gray-900 flex items-center justify-between text-lg text-gray-700 dark:text-gray-50 sticky top-0">
           {t("invite_title", { name: finalTitle })}
           <CloseIcon className="cursor-pointer dark:fill-white" onClick={closeModal} />
         </h2>
+        <div className="px-4 pb-4">
           {!channel?.is_public && <AddMembers cid={cid} closeModal={closeModal} />}
           <InviteByEmail cid={channel?.is_public ? undefined : cid} />
         </div>
+      </div>
     </Modal>
   );
 };

src/routes/chat/SessionList/Session.tsx

@@ -125,7 +125,7 @@ const Session: FC<IProps> = ({
       >
         <NavLink
           ref={drop}
-          className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full md:hover:bg-gray-500/20`, isActive && "shadow-[inset_0_0_0_2px_#52edff]", linkActive && "bg-gray-500/20")}
+          className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full`, isActive && "shadow-[inset_0_0_0_2px_#52edff]", linkActive && "bg-gray-500/20", pinned ? "md:hover:bg-gray-300/20" : "md:hover:bg-gray-500/20")}
           to={navPath}
           onContextMenu={handleContextMenuEvent}
         >

src/routes/chat/SessionList/index.tsx

@@ -105,7 +105,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
 
   return (
     <>
-      {pinSessions.length ? <ul className="flex flex-col gap-0.5 p-2 bg-primary-500/10">
+      {pinSessions.length ? <ul className="flex flex-col gap-0.5 py-1 px-2 bg-primary-500/10">
         {pinSessions.map((p) => {
           const { type, id, mid = 0 } = p;
           const key = `${type}_${id}`;