refactor: more tailwind components

src/routes/chat/Layout/DnDTip.tsx

@@ -0,0 +1,25 @@
+// import { useEffect } from "react";
+import { ChatPrefixes } from "../../../app/config";
+import { useTranslation } from "react-i18next";
+type Props = {
+  context: "user" | "channel",
+  name: string
+};
+const DnDTip = ({ context, name }: Props) => {
+  const { t } = useTranslation("chat");
+
+  return (
+    <div
+      className={`flex justify-center items-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">
+          <h4 className="text-xl font-semibold">{`${t("send_to")} ${ChatPrefixes[context]}${name}`}</h4>
+          <span className="text-sm">Photos accept jpg, png, max size limit to 10M.</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DnDTip;

src/routes/chat/Layout/LicenseOutdatedTip.tsx

@@ -1,28 +1,7 @@
 // import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import styled from "styled-components";
 import Button from "../../../common/component/styled/Button";
-const Styled = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #ef4444;
-  border-radius: var(--br);
-  width: 100%;
-  width: -webkit-fill-available;
-  padding: 12px 16px;
-  .txt {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 16px;
-    color: #fff;
-    .hand {
-      font-size: 20px;
-      margin-right: 10px;
-    }
-  }
-`;
 // type Props = {};
 
 const LicenseUpgradeTip = () => {
@@ -33,13 +12,13 @@ const LicenseUpgradeTip = () => {
   };
 
   return (
-    <Styled>
+    <div className="flex items-center justify-between bg-red-600 rounded-md w-full py-3 px-4">
-      <span className="txt">
+      <span className="text-white">
-        <i className="hand">🚨</i>
+        <i className="text-xl mr-2">🚨</i>
         {t("license_tip")}
       </span>
       <Button onClick={handleRedirect} className="small">{`Upgrade License`}</Button>
-    </Styled>
+    </div>
   );
 };
 

src/routes/chat/Layout/Operations.tsx

@@ -1,5 +1,4 @@
 import { FC, useState } from "react";
-import styled from "styled-components";
 import { useKey } from "rooks";
 import toast from "react-hot-toast";
 import useDeleteMessage from "../../../common/hook/useDeleteMessage";
@@ -13,33 +12,6 @@ import ForwardModal from "../../../common/component/ForwardModal";
 import DeleteMessageConfirmModal from "../../../common/component/DeleteMessageConfirm";
 import { useAppDispatch, useAppSelector } from "../../../app/store";
 
-const Styled = styled.div`
-  position: relative;
-  padding: 16px;
-  display: flex;
-  gap: 32px;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.05);
-  .opt {
-    padding: 8px;
-    background: #f2f4f7;
-    border-radius: var(--br);
-    &:disabled svg path {
-      fill: #ccc;
-    }
-    &:hover {
-      background: #eaecf0;
-    }
-  }
-  .close {
-    cursor: pointer;
-    position: absolute;
-    right: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-`;
 type Props = {
   context: "user" | "channel";
   id: number;
@@ -83,20 +55,21 @@ const Operations: FC<Props> = ({ context, id }) => {
   });
   const canDel = canDelete(mids);
 
+  // const 
   return (
     <>
-      <Styled>
+      <div className="relative p-4 flex items-center justify-center gap-8 shadow-md">
-        <button className="opt" onClick={toggleForwardModal}>
+        <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={toggleForwardModal}>
           <IconForward />
         </button>
-        <button className="opt" onClick={handleFav}>
+        <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={handleFav}>
           <IconBookmark />
         </button>
-        <button className="opt" disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
+        <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
           <IconDelete />
         </button>
-        <IconClose className="close" onClick={handleClose} />
+        <IconClose className="cursor-pointer absolute right-5 top-1/2 -translate-y-1/2" onClick={handleClose} />
-      </Styled>
+      </div>
       {forwardModalVisible && <ForwardModal mids={mids} closeModal={toggleForwardModal} />}
       {deleteModalVisible && (
         <DeleteMessageConfirmModal mids={mids} closeModal={toggleDeleteModal} />

src/routes/chat/Layout/index.tsx

@@ -6,12 +6,13 @@ import Send from "../../../common/component/Send";
 import Styled from "./styled";
 import Operations from "./Operations";
 import useUploadFile from "../../../common/hook/useUploadFile";
-import { ChatPrefixes } from "../../../app/config";
+
 import { useAppSelector } from "../../../app/store";
 import LoginTip from "./LoginTip";
 import useLicense from "../../../common/hook/useLicense";
 import LicenseUpgradeTip from "./LicenseOutdatedTip";
-import { useTranslation } from "react-i18next";
+// import { useTranslation } from "react-i18next";
+import DnDTip from "./DnDTip";
 
 interface Props {
   readonly?: boolean;
@@ -34,7 +35,7 @@ const Layout: FC<Props> = ({
   context = "channel",
   to
 }) => {
-  const { t } = useTranslation('chat');
+  // const { t } = useTranslation('chat');
   const { reachLimit } = useLicense();
   const { addStageFile } = useUploadFile({ context, id: to });
   const messagesContainer = useRef<HTMLDivElement>(null);
@@ -125,17 +126,8 @@ const Layout: FC<Props> = ({
           {users && <div className="members">{users}</div>}
           {aside && <div className="aside">{aside}</div>}
         </main>
-        {!readonly && (
+        {!readonly && isActive && (
-          <div
+          <DnDTip context={context} name={name} />
-            className={`drag_tip ${isActive ? "visible animate__animated animate__fadeIn" : ""}`}
-          >
-            <div className={`box ${isActive ? "animate__animated animate__bounceIn" : ""}`}>
-              <div className="inner">
-                <h4 className="head">{`${t("send_to")} ${ChatPrefixes[context]}${name}`}</h4>
-                <span className="intro">Photos accept jpg, png, max size limit to 10M.</span>
-              </div>
-            </div>
-          </div>
         )}
       </Styled>
     </>

src/routes/chat/Layout/styled.tsx

@@ -100,46 +100,6 @@ const Styled = styled.article`
       }
     }
   }
-  .drag_tip {
+ 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    visibility: hidden;
-    &.visible {
-      visibility: visible;
-    }
-    .box {
-      padding: 16px;
-      filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
-      border-radius: 8px;
-      background: #52edff;
-      .inner {
-        padding: 16px;
-        padding-top: 64px;
-        border: 2px dashed #a5f3fc;
-        border-radius: 6px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        color: #fff;
-        .head {
-          font-weight: 600;
-          font-size: 20px;
-          line-height: 30px;
-        }
-        .intro {
-          font-weight: normal;
-          font-size: 14px;
-          line-height: 20px;
-        }
-      }
-    }
-  }
 `;
 export default Styled;