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>
                   )}