refactor: finished tailwind

src/routes/chat/Layout/index.tsx

@@ -1,9 +1,9 @@
 import { useState, useRef, useEffect, FC, ReactElement } from "react";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
+import clsx from "clsx";
 import ImagePreviewModal from "../../../common/component/ImagePreviewModal";
 import Send from "../../../common/component/Send";
-import Styled from "./styled";
 import Operations from "./Operations";
 import useUploadFile from "../../../common/hook/useUploadFile";
 
@@ -13,7 +13,6 @@ 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;
@@ -104,14 +103,13 @@ const Layout: FC<Props> = ({
     );
   }, []);
   const name = context == "channel" ? channelsData[to]?.name : usersData[to]?.name;
-
   return (
     <>
       {previewImage && <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />}
-      <Styled ref={drop} className={`${readonly ? "readonly" : ""}`}>
+      <article ref={drop} className={`relative w-full rounded-r-2xl`}>
         {header}
-        <main className="main" ref={messagesContainer}>
-          <div className="chat">
+        <main className="h-full w-full flex items-start justify-between relative" ref={messagesContainer}>
+          <div className="rounded-br-2xl w-full flex flex-col h-[calc(100vh_-_56px_-_18px)]">
             {children}
             <div className={`p-4 pt-0 ${selects ? "selecting" : ""}`}>
               {readonly ? (
@@ -126,13 +124,13 @@ const Layout: FC<Props> = ({
               {selects && <Operations context={context} id={to} />}
             </div>
           </div>
-          {users && <div className="members hidden md:block">{users}</div>}
-          {aside && <div className="aside !hidden md:!block">{aside}</div>}
+          {users && <div className="shadow-[inset_0px_10px_2px_-10px_rgba(0,_0,_0,_0.1)] hidden md:block">{users}</div>}
+          {aside && <div className={clsx("p-3 absolute right-0 -top-14 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
         </main>
         {!readonly && isActive && (
           <DnDTip context={context} name={name} />
         )}
-      </Styled>
+      </article>
     </>
   );
 };

src/routes/chat/Layout/styled.tsx

@@ -1,90 +0,0 @@
-import styled from "styled-components";
-const Styled = styled.article`
-  position: relative;
-  width: 100%;
-  border-top-right-radius: 16px;
-  border-bottom-right-radius: 16px;
-  > .head {
-    box-sizing: border-box;
-    height: 56px;
-    padding: 0 20px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  > .main {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    position: relative;
-    > .chat {
-      border-bottom-right-radius: 16px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      padding: 0;
-      height: calc(100vh - 56px - 18px);
-    }
-    .members {
-      box-shadow: inset 0px 10px 2px -10px rgba(0, 0, 0, 0.1);
-    }
-    > .aside {
-      padding: 12px;
-      position: absolute;
-      right: 0;
-      top: -56px;
-      transform: translateX(100%);
-      display: flex;
-      flex-direction: column;
-      .divider {
-        border: none;
-        background-color: #d4d4d4;
-        width: 16px;
-        height: 1px;
-        margin: 18px auto;
-      }
-      .tools {
-        display: flex;
-        flex-direction: column;
-      }
-      .tools {
-        gap: 24px;
-        .tool {
-          position: relative;
-          cursor: pointer;
-          &.fav svg path {
-            fill: #70707b;
-          }
-          &.active svg path {
-            fill: #3f3f46;
-          }
-          &:not(.active):hover svg path {
-            fill: #51525c;
-          }
-          &.badge:after {
-            position: absolute;
-            top: -8px;
-            right: -8px;
-            content: attr(data-count);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 16px;
-            height: 16px;
-
-            border-radius: 50%;
-            background-color: #22ccee;
-            color: #fff;
-            font-weight: 900;
-            font-size: 10px;
-            line-height: 10px;
-            text-align: center;
-            color: #ffffff;
-          }
-        }
-      }
-    }
-  }
- 
-`;
-export default Styled;