refactor: more tailwind

src/routes/setting/License/LicensePriceListModal.tsx

@@ -44,7 +44,7 @@ const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
   const { t } = useTranslation("setting");
   const { t: ct } = useTranslation();
   const [getUrl, { isLoading, isSuccess }] = useGetLicensePaymentUrlMutation();
-  const [host, setHost] = useState(location.host);
+  const [host, setHost] = useState(location.hostname);
   const [popUpVisible, setPopUpVisible] = useState(false);
   const [selectPrice, setSelectPrice] = useState(
     `${LicensePriceList[0].pid}|${LicensePriceList[0].limit}|${LicensePriceList[0].type}|${LicensePriceList[0].sub_dur || ""}`

src/routes/setting/LogoutConfirmModal.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, FC, useEffect, useState } from "react";
-import styled from "styled-components";
 import toast from "react-hot-toast";
 import Modal from "../../common/component/Modal";
 import StyledModal from "../../common/component/styled/Modal";
@@ -8,25 +7,6 @@ import Checkbox from "../../common/component/styled/Checkbox";
 import useLogout from "../../common/hook/useLogout";
 import { useTranslation } from "react-i18next";
 
-const StyledConfirm = styled(StyledModal)`
-  .clear {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 20px;
-    color: #6b7280;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .txt {
-      cursor: pointer;
-      color: orange;
-      margin-right: 12px;
-    }
-    input {
-      cursor: pointer;
-    }
-  }
-`;
 
 interface Props {
   closeModal: () => void;
@@ -56,7 +36,7 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
 
   return (
     <Modal id="modal-modal">
-      <StyledConfirm
+      <StyledModal
         title={t("logout.title")}
         description={t("logout.desc")}
         buttons={
@@ -68,13 +48,13 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
           </>
         }
       >
-        <div className="clear">
-          <label htmlFor="clear_cb" className="txt">
+        <div className="text-sm text-gray-400 flex justify-end items-center">
+          <label htmlFor="clear_cb" className="cursor-pointer text-orange-500 mr-3">
             {t("logout.clear_local")}
           </label>
-          <Checkbox name="clear_cb" checked={clearLocal} onChange={handleCheck} />
+          <Checkbox className=" cursor-pointer" name="clear_cb" checked={clearLocal} onChange={handleCheck} />
         </div>
-      </StyledConfirm>
+      </StyledModal>
     </Modal>
   );
 };

src/routes/setting/MyAccount.tsx

@@ -1,105 +1,14 @@
 import { useEffect, useState, MouseEvent } from "react";
-import styled from "styled-components";
 import toast from "react-hot-toast";
 import { useUpdateAvatarMutation } from "../../app/services/user";
 import AvatarUploader from "../../common/component/AvatarUploader";
+import Button from "../../common/component/styled/Button";
 import ProfileBasicEditModal from "./ProfileBasicEditModal";
 import RemoveAccountConfirmModal from "./RemoveAccountConfirmModal";
 import UpdatePasswordModal from "./UpdatePasswordModal";
 import { useAppSelector } from "../../app/store";
 import { useTranslation } from "react-i18next";
 
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  .card {
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 512px;
-    background: #f3f4f6;
-    border-radius: 20px;
-    .name {
-      margin-top: 8px;
-      margin-bottom: 64px;
-      font-weight: bold;
-      font-size: 18px;
-      line-height: 28px;
-      color: #27272a;
-      .uid {
-        font-weight: normal;
-        color: #52525b;
-      }
-    }
-    .row {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 24px;
-      .info {
-        display: flex;
-        flex-direction: column;
-        .label {
-          font-weight: 600;
-          font-size: 12px;
-          line-height: 20px;
-          text-transform: uppercase;
-          color: #52525b;
-        }
-        .txt {
-          font-weight: 500;
-          font-size: 14px;
-          line-height: 20px;
-          color: #52525b;
-          .gray {
-            color: #78787c;
-          }
-        }
-      }
-      .btn {
-        background: #1fe1f9;
-        border: 1px solid #1fe1f9;
-      }
-    }
-  }
-  .danger {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    .head {
-      font-weight: bold;
-      font-size: 16px;
-      line-height: 24px;
-      color: #374151;
-    }
-    .desc {
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 18px;
-      color: #616161;
-      margin-bottom: 16px;
-    }
-    .btn {
-      background: #ef4444;
-      border: 1px solid #ef4444;
-    }
-  }
-  .btn {
-    color: #fff;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    padding: 8px 14px;
-    background: #1fe1f9;
-    border: 1px solid #1fe1f9;
-    box-sizing: border-box;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-    border-radius: 8px;
-  }
-`;
 type EditField = "name" | "email" | "";
 export default function MyAccount() {
   const { t } = useTranslation("member");
@@ -151,51 +60,49 @@ export default function MyAccount() {
   const { uid, avatar, name, email } = loginUser;
   return (
     <>
-      <StyledWrapper>
-        <div className="card">
+      <div className="flex flex-col items-start gap-8">
+        <div className="p-6 flex flex-col items-center w-[512px] bg-slate-100 rounded-2xl">
           <AvatarUploader url={avatar} name={name} uploadImage={uploadAvatar} />
-          <div className="name">
-            {name} <span className="uid">#{uid}</span>
+          <div className="mt-2 mb-16 font-bold text-lg text-gray-800">
+            {name} <span className="font-normal text-gray-500">#{uid}</span>
           </div>
-          <div className="row">
-            <div className="info">
-              <span className="label">{t("username")}</span>
-              <span className="txt">
-                {name} <span className="gray"> #{uid}</span>
+          <div className="w-full flex justify-between mb-6">
+            <div className="flex flex-col text-gray-500">
+              <span className="text-xs uppercase  font-semibold">{t("username")}</span>
+              <span className="text-sm ">
+                {name} <span className="text-gray-600"> #{uid}</span>
               </span>
             </div>
-            <button data-edit="name" onClick={handleBasicEdit} className="btn">
+            <Button data-edit="name" onClick={handleBasicEdit} className="">
               {ct("action.edit")}
-            </button>
+            </Button>
           </div>
-          <div className="row">
-            <div className="info">
-              <span className="label">{t("email")}</span>
-              <span className="txt">{email}</span>
+          <div className="w-full flex justify-between mb-6">
+            <div className="flex flex-col text-gray-500">
+              <span className="text-xs uppercase  font-semibold">{t("email")}</span>
+              <span className="text-sm">{email}</span>
             </div>
-            <button data-edit="email" onClick={handleBasicEdit} className="btn">
+            <Button data-edit="email" onClick={handleBasicEdit}>
               {ct("action.edit")}
-            </button>
+            </Button>
           </div>
-          <div className="row">
-            <div className="info">
-              <span className="label">{t("password")}</span>
-              <span className="txt">*********</span>
+          <div className="w-full flex justify-between mb-6">
+            <div className="flex flex-col text-gray-500">
+              <span className="text-xs uppercase  font-semibold">{t("password")}</span>
+              <span className="text-sm">*********</span>
             </div>
-            <button onClick={togglePasswordModal} className="btn">
+            <Button onClick={togglePasswordModal}>
               {ct("action.edit")}
-            </button>
+            </Button>
           </div>
         </div>
         {/* uid 1 是初始账户，不能删 */}
         {uid != 1 && (
-          <div className="danger">
-            <button className="btn" onClick={toggleRemoveAccountModalVisible}>
-              {t("delete_account")}
-            </button>
-          </div>
+          <Button className="danger" onClick={toggleRemoveAccountModalVisible}>
+            {t("delete_account")}
+          </Button>
         )}
-      </StyledWrapper>
+      </div>
       {editModal && (
         <ProfileBasicEditModal
           type={editModal == "email" ? "email" : "text"}

src/routes/setting/UpdatePasswordModal.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, useEffect, useState, FC } from "react";
-import styled from "styled-components";
 import toast from "react-hot-toast";
 import Input from "../../common/component/styled/Input";
 import { useUpdatePasswordMutation, useGetCredentialsQuery } from "../../app/services/auth";
@@ -8,21 +7,6 @@ import Button from "../../common/component/styled/Button";
 import Modal from "../../common/component/Modal";
 import { useTranslation } from "react-i18next";
 
-const StyledEdit = styled(StyledModal)`
-  .input {
-    margin: 16px 0;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    label {
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-      color: #6b7280;
-    }
-  }
-`;
 
 interface Props {
   closeModal: () => void;
@@ -75,9 +59,12 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
     !confirmPassword ||
     newPassword !== confirmPassword ||
     isLoading;
+
+  const inputClass = `my-4 w-full flex flex-col gap-2`;
+  const labelClass = `text-gray-400 font-semibold`;
   return (
     <Modal id="modal-modal">
-      <StyledEdit
+      <StyledModal
         title={t("change_pwd")}
         description={t("change_pwd_desc")}
         buttons={
@@ -92,8 +79,8 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
         }
       >
         {data?.password && (
-          <div className="input">
-            <label htmlFor={"current"}>{t("current_pwd")}</label>
+          <div className={inputClass}>
+            <label className={labelClass} htmlFor={"current"}>{t("current_pwd")}</label>
             <Input
               type="password"
               id="current"
@@ -104,8 +91,8 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
             ></Input>
           </div>
         )}
-        <div className="input">
-          <label htmlFor={"newPassword"}>{t("new_pwd")}</label>
+        <div className={inputClass}>
+          <label className={labelClass} htmlFor={"newPassword"}>{t("new_pwd")}</label>
           <Input
             type="password"
             name={"newPassword"}
@@ -114,8 +101,8 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
             onChange={handleChange}
           ></Input>
         </div>
-        <div className="input">
-          <label htmlFor={"confirmPassword"}>{t("confirm_new_pwd")}</label>
+        <div className={inputClass}>
+          <label className={labelClass} htmlFor={"confirmPassword"}>{t("confirm_new_pwd")}</label>
           <Input
             onBlur={handleCompare}
             type="password"
@@ -125,7 +112,7 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
             onChange={handleChange}
           ></Input>
         </div>
-      </StyledEdit>
+      </StyledModal>
     </Modal>
   );
 };