From c6edf3e8b1c7290e7090a999e609d08c57ef7391 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 15 May 2023 13:18:42 +0800
Subject: [PATCH] refactor: tweak UIs

---
 src/common/component/InviteModal/index.tsx | 10 ++++++----
 src/routes/chat/SessionList/Session.tsx    |  2 +-
 src/routes/chat/SessionList/index.tsx      |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/common/component/InviteModal/index.tsx b/src/common/component/InviteModal/index.tsx
index 28303321..7da626aa 100644
--- a/src/common/component/InviteModal/index.tsx
+++ b/src/common/component/InviteModal/index.tsx
@@ -25,13 +25,15 @@ 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>
-        {!channel?.is_public && <AddMembers cid={cid} closeModal={closeModal} />}
-        <InviteByEmail cid={channel?.is_public ? undefined : cid} />
+        <div className="px-4 pb-4">
+          {!channel?.is_public && <AddMembers cid={cid} closeModal={closeModal} />}
+          <InviteByEmail cid={channel?.is_public ? undefined : cid} />
+        </div>
       </div>
     </Modal>
   );
diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx
index 810dd5c6..0e09f8dc 100644
--- a/src/routes/chat/SessionList/Session.tsx
+++ b/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}
         >
diff --git a/src/routes/chat/SessionList/index.tsx b/src/routes/chat/SessionList/index.tsx
index 098f7f9a..c0db927e 100644
--- a/src/routes/chat/SessionList/index.tsx
+++ b/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}`;