refactor: more tailwind components

src/routes/chat/FavList.tsx

@@ -43,7 +43,7 @@ const FavList: FC<Props> = ({ cid = null, uid = null }) => {
               <li key={id} className="relative border border-solid border-slate-200 rounded-md group">
                 <FavoredMessage id={id} />
                 <div className="flex items-center absolute top-2 right-2 border border-solid border-gray-300 rounded-md overflow-hidden invisible group-hover:visible">
-                  <button className="flex justify-center items-center w-6 h-6 p-1" data-id={id} onClick={handleRemove}>
+                  <button className="flex-center w-6 h-6 p-1" data-id={id} onClick={handleRemove}>
                     <IconRemove className="fill-slate-900" />
                   </button>
                 </div>

src/routes/chat/Layout/DnDTip.tsx

@@ -10,7 +10,7 @@ const DnDTip = ({ context, name }: Props) => {
 
   return (
     <div
-      className={`flex justify-center items-center absolute left-0 top-0 w-full h-full bg-black/50`}
+      className={`flex-center absolute left-0 top-0 w-full h-full bg-black/50`}
     >
       <div className={`p-4 drop-shadow-md rounded-lg bg-primary-300`}>
         <div className="p-4 pt-16 border-2 border-dashed border-[#a5f3fc] rounded-md flex flex-col items-center text-white">

src/routes/chat/Layout/Operations.tsx

@@ -58,7 +58,7 @@ const Operations: FC<Props> = ({ context, id }) => {
   // const 
   return (
     <>
-      <div className="relative p-4 flex items-center justify-center gap-8 shadow-md">
+      <div className="relative p-4 flex-center gap-8 shadow-md">
         <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={toggleForwardModal}>
           <IconForward />
         </button>

src/routes/chat/LoadMore.tsx

@@ -14,7 +14,7 @@ const LoadMore: FC<Props> = ({ pullUp = null, pulling }) => {
     }
   }, [inView, pullUp, pulling]);
   return (
-    <div data-load-more className="mt-2 flex justify-center items-center w-full py-2" ref={myRef}>
+    <div data-load-more className="mt-2 flex-center w-full py-2" ref={myRef}>
       <Waveform size={18} lineWeight={4} speed={1} color="#ccc" />
     </div>
   );

src/routes/chat/index.tsx

@@ -46,7 +46,7 @@ function ChatPage() {
       )}
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
       <StyledWrapper className={isGuest ? "guest" : ""}>
-        <div className="left">
+        <div className="left hidden md:flex">
           <Server readonly={isGuest} />
           {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
         </div>

src/routes/chat/styled.tsx

@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
   > .left {
     background-color: #fff;
     position: relative;
-    display: flex;
+    /* display: flex; */
     flex-direction: column;
     min-width: 268px;
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
@@ -65,10 +65,6 @@ const StyledWrapper = styled.div`
           &.active {
             background: rgba(116, 127, 141, 0.1);
           }
-
-          .avatar {
-            /* todo */
-          }
           .details {
             display: flex;
             flex-direction: column;
@@ -149,6 +145,7 @@ const StyledWrapper = styled.div`
       }
     }
   }
+
   > .right {
     border-radius: 0 16px 16px 0;
     width: 100%;
@@ -160,6 +157,7 @@ const StyledWrapper = styled.div`
       justify-content: center;
     }
   }
+  
 `;
 
 export default StyledWrapper;