refactor: more tailwind

src/routes/chat/ChannelChat/index.tsx

@@ -21,7 +21,6 @@ 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 } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
@@ -151,11 +150,11 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           </header>
         }
         users={
-          <StyledUsers className={membersVisible ? "flex" : "hidden"}>
+          <div className={`flex-col gap-1 w-[226px] h-[calc(100vh_-_56px_-_22px)] overflow-y-scroll p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${membersVisible ? "flex" : "hidden"}`}>
             {addVisible && (
-              <div className="add" onClick={toggleAddVisible}>
-                <img className="icon" src={addIcon} />
-                <div className="txt dark:!text-gray-50">{t("add_channel_members")}</div>
+              <div className="cursor-pointer flex items-center justify-start gap-1 select-none rounded-lg p-2.5 hover:bg-gray-500/10" onClick={toggleAddVisible}>
+                <img className="w-6 h-6" src={addIcon} />
+                <div className="font-semibold text-sm text-gray-600 dark:text-gray-50">{t("add_channel_members")}</div>
               </div>
             )}
             {memberIds.map((uid: number) => {
@@ -171,19 +170,19 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
                 />
               );
             })}
-          </StyledUsers>
+          </div>
         }
       >
-        <StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>
+        <article className="py-4.5 px-4 w-full h-full overflow-x-hidden overflow-y-auto" id={`VOCECHAT_FEED_channel_${cid}`}>
           {hasMore ? (
             <LoadMore pullUp={pullUp} pulling={pulling} />
           ) : (
-            <div className="info">
-              <h2 className="title dark:text-white">{t("welcome_channel", { name })}</h2>
-              <p className="desc dark:!text-gray-300">{t("welcome_desc", { name })} </p>
+            <div className="pt-14 flex flex-col items-start gap-2">
+              <h2 className="font-bold text-4xl dark:text-white">{t("welcome_channel", { name })}</h2>
+              <p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name })} </p>
               {loginUser?.is_admin && (
-                <NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="edit">
-                  <EditIcon className="icon" />
+                <NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="flex items-center gap-1 bg-clip-text text-fill-transparent bg-gradient-to-r from-[#3c8ce7] to-primary-400 ">
+                  <EditIcon className="w-4 h-4 fill-[#3c8ce7]" />
                   {t("edit_channel")}
                 </NavLink>
               )}
@@ -205,7 +204,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
               context: "channel"
             });
           })}
-        </StyledChannelChat>
+        </article>
       </Layout>
     </>
   );

src/routes/chat/ChannelChat/styled.tsx

@@ -1,85 +0,0 @@
-import styled from "styled-components";
-
-export const StyledUsers = styled.div`
-  /* display: flex; */
-  flex-direction: column;
-  gap: 5px;
-  /* todo */
-  width: 226px;
-  height: calc(100vh - 56px - 22px);
-  overflow-y: scroll;
-  padding: 8px;
-  box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
-  > .add {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 4px;
-    padding: 10px;
-    border-radius: 8px;
-    user-select: none;
-    &:hover {
-      background: rgba(116, 127, 141, 0.1);
-    }
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-    .txt {
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-      color: #52525b;
-    }
-  }
-`;
-export const StyledChannelChat = styled.article`
-  padding: 18px 16px;
-  width: 100%;
-  height: 100%;
-  height: -webkit-fill-available;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-anchor: auto;
-  > .info {
-    padding-top: 62px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    .title {
-      font-weight: bold;
-      font-size: 36px;
-      line-height: 44px;
-    }
-    .desc {
-      color: #78787c;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-    }
-    .edit {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      .icon {
-        width: 16px;
-        height: 16px;
-        path {
-          fill: #3c8ce7;
-        }
-      }
-      padding: 0;
-      font-style: normal;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      text-fill-color: transparent;
-    }
-  }
-`;

src/routes/chat/Layout/index.tsx

@@ -13,6 +13,7 @@ import useLicense from "../../../common/hook/useLicense";
 import LicenseUpgradeTip from "./LicenseOutdatedTip";
 // import { useTranslation } from "react-i18next";
 import DnDTip from "./DnDTip";
+import clsx from "clsx";
 
 interface Props {
   readonly?: boolean;
@@ -112,13 +113,15 @@ const Layout: FC<Props> = ({
         <main className="main" ref={messagesContainer}>
           <div className="chat">
             {children}
-            <div className={`send ${selects ? "selecting" : ""}`}>
+            <div className={`p-4 pt-0 ${selects ? "selecting" : ""}`}>
               {readonly ? (
                 <LoginTip />
               ) : reachLimit ? (
                 <LicenseUpgradeTip />
               ) : (
-                <Send key={to} id={to} context={context} />
+                <div className={clsx(`flex justify-center`, selects && "hidden")}>
+                  <Send key={to} id={to} context={context} />
+                </div>
               )}
               {selects && <Operations context={context} id={to} />}
             </div>

src/routes/chat/Layout/styled.tsx

@@ -24,15 +24,6 @@ const Styled = styled.article`
       flex-direction: column;
       padding: 0;
       height: calc(100vh - 56px - 18px);
-      > .send {
-        padding: 0 16px 16px 16px;
-        &.selecting {
-          padding: 0;
-          > .send {
-            display: none;
-          }
-        }
-      }
     }
     .members {
       box-shadow: inset 0px 10px 2px -10px rgba(0, 0, 0, 0.1);
@@ -52,8 +43,7 @@ const Styled = styled.article`
         height: 1px;
         margin: 18px auto;
       }
-      .tools,
-      .apps {
+      .tools {
         display: flex;
         flex-direction: column;
       }
@@ -93,9 +83,6 @@ const Styled = styled.article`
           }
         }
       }
-      .apps {
-        gap: 15px;
-      }
     }
   }