refactor: more tailwind

src/routes/chat/ChannelChat/PinList.tsx

@@ -6,74 +6,13 @@ import IconClose from "../../../assets/icons/close.svg";
 import { useTranslation } from "react-i18next";
 import PinnedMessage from "../../../common/component/PinnedMessage";
 const Styled = styled.div`
-  padding: 16px;
-  background: #f9fafb;
-  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
-  border-radius: 12px;
-  min-width: 486px;
-  max-height: 90vh;
-  overflow-y: scroll;
-  /* width: fit-content; */
-  > .head {
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 24px;
-    color: #344054;
-    margin-bottom: 16px;
-  }
-  > .none {
-    padding: 16px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: center;
-    .tip {
-      width: 240px;
-      font-weight: 600;
-      font-size: 16px;
-      line-height: 24px;
-      text-align: center;
-      color: #475467;
-    }
-  }
-  > .list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    .pin {
-      position: relative;
-      border: 1px solid #f2f4f7;
-      border-radius: var(--br);
-      > .preview {
+      .preview {
         background: none;
         .down img {
           width: 100% !important;
           height: auto !important;
         }
       }
-      > .opts {
-        visibility: hidden;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        padding: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        border-radius: 6px;
-        .btn {
-          display: flex;
-          background: none;
-          border: none;
-        }
-      }
-      &:hover .opts {
-        visibility: visible;
-      }
-    }
-  }
 `;
 type Props = {
   id: number;
@@ -88,22 +27,22 @@ const PinList: FC<Props> = ({ id }: Props) => {
   };
   const noPins = pins.length == 0;
   return (
-    <Styled>
-      <h4 className="head">{t("pinned_msg")}({pins.length})</h4>
+    <Styled className="p-4 drop-shadow-md overflow-y-scroll max-h-[90vh] min-w-[486px] rounded-xl bg-gray-50">
+      <h4 className=" text-gray-600 mb-4 font-semibold">{t("pinned_msg")}({pins.length})</h4>
       {noPins ? (
-        <div className="none">
+        <div className="flex flex-col items-center gap-2 w-full p-4">
           <IconSurprise />
-          <div className="tip">{t("pin_empty_tip")}</div>
+          <div className="w-60 font-semibold text-gray-500 text-center">{t("pin_empty_tip")}</div>
         </div>
       ) : (
-        <ul className="list">
+        <ul className="flex flex-col gap-2">
           {pins.map((data) => {
             return (
-              <li key={data.mid} className="pin">
+              <li key={data.mid} className="group relative border border-solid border-slate-100 rounded-md ">
                 <PinnedMessage data={data} />
-                <div className="opts">
+                <div className="invisible group-hover:visible flex items-center gap-1 absolute top-1 right-1 p-1 border border-solid border-black/10 rounded-md">
                   {canPin && (
-                    <button className="btn" data-mid={data.mid} onClick={handleUnpin}>
+                    <button className="flex bg-none border-none" data-mid={data.mid} onClick={handleUnpin}>
                       <IconClose className="fill-slate-900" />
                     </button>
                   )}

src/routes/chat/ChannelChat/index.tsx

@@ -21,7 +21,7 @@ import IconPin from "../../../assets/icons/pin.svg";
 import IconHeadphone from "../../../assets/icons/headphone.svg";
 
 import addIcon from "../../../assets/icons/add.svg?url";
-import { StyledUsers, StyledChannelChat, StyledHeader } from "./styled";
+import { StyledUsers, StyledChannelChat } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
@@ -142,13 +142,13 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           </ul>
         }
         header={
-          <StyledHeader className="head">
-            <div className="txt">
+          <header className="head flex items-center h-full justify-center md:justify-between">
+            <div className="flex items-center gap-1 text-base">
               <ChannelIcon personal={!is_public} />
-              <span className="title">{name}</span>
-              <span className="desc">{description}</span>
+              <span className="text-gray-800">{name}</span>
+              <span className="ml-2 text-gray-500">{description}</span>
             </div>
-          </StyledHeader>
+          </header>
         }
         users={
           <StyledUsers className={membersVisible ? "flex" : "hidden"}>

src/routes/chat/ChannelChat/styled.tsx

@@ -1,27 +1,5 @@
 import styled from "styled-components";
-export const StyledHeader = styled.header`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .txt {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .title {
-      font-size: 16px;
-      line-height: 24px;
-      color: #1c1c1e;
-    }
-    .desc {
-      margin-left: 8px;
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      color: #616161;
-    }
-  }
-`;
+
 export const StyledNotification = styled.div`
   padding: 3px 8px;
   font-style: normal;

src/routes/chat/DMChat/index.tsx

@@ -7,7 +7,6 @@ import FavIcon from "../../../assets/icons/bookmark.svg";
 import { useReadMessageMutation } from "../../../app/services/message";
 import User from "../../../common/component/User";
 import Layout from "../Layout";
-import { StyledHeader, StyledDMChat } from "./styled";
 import LoadMore from "../LoadMore";
 import { renderMessageFragment } from "../utils";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
@@ -65,12 +64,12 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
         </ul>
       }
       header={
-        <StyledHeader className="head">
+        <header className="head h-full flex items-center justify-between">
           <User interactive={false} uid={currUser.uid} />
-        </StyledHeader>
+        </header>
       }
     >
-      <StyledDMChat id={`VOCECHAT_FEED_user_${uid}`}>
+      <article id={`VOCECHAT_FEED_user_${uid}`} className="w-full h-full px-4 py-4.5 overflow-auto">
         {hasMore ? <LoadMore pullUp={pullUp} pulling={pulling} /> : null}
         {[...feeds].map((mid, idx) => {
           const curr = messageData[mid];
@@ -86,7 +85,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
             context: "user"
           });
         })}
-      </StyledDMChat>
+      </article>
     </Layout>
   );
 };

src/routes/chat/DMChat/styled.tsx

@@ -1,36 +0,0 @@
-import styled from "styled-components";
-export const StyledHeader = styled.header`
-  height: 100%;
-  /* padding: 0 20px 0 10px; */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  /* tricky */
-  > div {
-    padding-left: 4px;
-  }
-  .txt {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .title {
-      font-size: 16px;
-      line-height: 24px;
-      color: #1c1c1e;
-    }
-    .desc {
-      margin-left: 8px;
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      color: #616161;
-    }
-  }
-`;
-export const StyledDMChat = styled.article`
-  width: 100%;
-  padding: 18px 16px;
-  height: 100%;
-  height: -webkit-fill-available;
-  overflow: auto;
-`;

src/routes/chat/GuestChannelChat/index.tsx

@@ -4,7 +4,7 @@ import useMessageFeed from "../../../common/hook/useMessageFeed";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import Layout from "../Layout";
 import { renderMessageFragment } from "../utils";
-import { StyledChannelChat, StyledHeader } from "./styled";
+import { StyledChannelChat } from "./styled";
 import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
 import { useTranslation } from "react-i18next";
@@ -40,13 +40,13 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
         to={cid}
         context="channel"
         header={
-          <StyledHeader className="head">
-            <div className="txt">
+          <header className="head flex items-center h-full justify-center md:justify-between">
+            <div className="flex items-center gap-1 text-base">
               <ChannelIcon personal={!is_public} />
-              <span className="title">{name}</span>
-              <span className="desc">{description}</span>
+              <span className="text-gray-800">{name}</span>
+              <span className="ml-2 text-gray-500">{description}</span>
             </div>
-          </StyledHeader>
+          </header>
         }
       >
         <StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>

src/routes/chat/GuestChannelChat/styled.tsx

@@ -1,27 +1,4 @@
 import styled from "styled-components";
-export const StyledHeader = styled.header`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .txt {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .title {
-      font-size: 16px;
-      line-height: 24px;
-      color: #1c1c1e;
-    }
-    .desc {
-      margin-left: 8px;
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      color: #616161;
-    }
-  }
-`;
 export const StyledChannelChat = styled.article`
   padding: 18px 16px;
   width: 100%;

src/routes/chat/index.tsx

@@ -14,6 +14,7 @@ import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
 import GuestChannelChat from "./GuestChannelChat";
 import GuestSessionList from "./GuestSessionList";
 import IconList from '../../assets/icons/list.svg';
+import IconClose from '../../assets/icons/close.svg';
 function ChatPage() {
   const [sessionListVisible, setSessionListVisible] = useState(false);
   const [channelModalVisible, setChannelModalVisible] = useState(false);
@@ -51,13 +52,14 @@ function ChatPage() {
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
-      <StyledWrapper className={`${isGuest ? "!pr-1" : ""} md:!pr-12`}>
+      <StyledWrapper className={`${isGuest ? "!pr-1 !pt-0" : ""} md:!pr-12`}>
+        {sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
         <div className={clsx("left !fixed top-0 left-0 z-40 transition-all md:!relative md:translate-x-0 md:overflow-auto", sessionListVisible ? "translate-x-0" : "-translate-x-full")}>
           <Server readonly={isGuest} />
           {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
-          <button className="absolute top-1/2 -right-[24px] z-50 p-2 rounded-full bg-slate-300/80 md:hidden" onClick={toggleSessionList}>
+          {sessionListVisible ? null : <button className="absolute top-2 -right-[52px] z-50 p-2 bg-none  md:hidden" onClick={toggleSessionList}>
             <IconList />
-          </button>
+          </button>}
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}