refactor: more tailwind components

src/routes/callback/GithubCallback.tsx

@@ -53,7 +53,7 @@ const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
         }
     }, [error]);
     if (error) return <span>Something Error</span>;
-    return <section className='flex flex-col gap-3 justify-center items-center'>
+    return <section className='flex-center flex-col gap-3'>
         {isSuccess && from == 'widget' && <h1>Please close this window and return widget window</h1>}
         <span className='text-3xl text-green-600 font-bold'>{isLoading ? "GitHub Logging in..." : "GitHub Login Success!"}</span>
     </section>;

src/routes/callback/styled.tsx

@@ -2,7 +2,7 @@ import { DOMAttributes, ReactNode } from "react";
 
 const StyledWrapper = ({ children }: DOMAttributes<HTMLDivElement> & { children?: ReactNode }) => {
 
-  return <div className="flex w-screen h-screen items-center justify-center break-words leading-normal">
+  return <div className="flex-center w-screen h-screen break-words leading-normal">
     {children}
   </div>;
 };

src/routes/chat/FavList.tsx

@@ -43,7 +43,7 @@ const FavList: FC<Props> = ({ cid = null, uid = null }) => {
               <li key={id} className="relative border border-solid border-slate-200 rounded-md group">
                 <FavoredMessage id={id} />
                 <div className="flex items-center absolute top-2 right-2 border border-solid border-gray-300 rounded-md overflow-hidden invisible group-hover:visible">
-                  <button className="flex justify-center items-center w-6 h-6 p-1" data-id={id} onClick={handleRemove}>
+                  <button className="flex-center w-6 h-6 p-1" data-id={id} onClick={handleRemove}>
                     <IconRemove className="fill-slate-900" />
                   </button>
                 </div>

src/routes/chat/Layout/DnDTip.tsx

@@ -10,7 +10,7 @@ const DnDTip = ({ context, name }: Props) => {
 
   return (
     <div
-      className={`flex justify-center items-center absolute left-0 top-0 w-full h-full bg-black/50`}
+      className={`flex-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">

src/routes/chat/Layout/Operations.tsx

@@ -58,7 +58,7 @@ const Operations: FC<Props> = ({ context, id }) => {
   // const 
   return (
     <>
-      <div className="relative p-4 flex items-center justify-center gap-8 shadow-md">
+      <div className="relative p-4 flex-center gap-8 shadow-md">
         <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={toggleForwardModal}>
           <IconForward />
         </button>

src/routes/chat/LoadMore.tsx

@@ -14,7 +14,7 @@ const LoadMore: FC<Props> = ({ pullUp = null, pulling }) => {
     }
   }, [inView, pullUp, pulling]);
   return (
-    <div data-load-more className="mt-2 flex justify-center items-center w-full py-2" ref={myRef}>
+    <div data-load-more className="mt-2 flex-center w-full py-2" ref={myRef}>
       <Waveform size={18} lineWeight={4} speed={1} color="#ccc" />
     </div>
   );

src/routes/chat/index.tsx

@@ -46,7 +46,7 @@ function ChatPage() {
       )}
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
       <StyledWrapper className={isGuest ? "guest" : ""}>
-        <div className="left">
+        <div className="left hidden md:flex">
           <Server readonly={isGuest} />
           {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
         </div>

src/routes/chat/styled.tsx

@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
   > .left {
     background-color: #fff;
     position: relative;
-    display: flex;
+    /* display: flex; */
     flex-direction: column;
     min-width: 268px;
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
@@ -65,10 +65,6 @@ const StyledWrapper = styled.div`
           &.active {
             background: rgba(116, 127, 141, 0.1);
           }
-
-          .avatar {
-            /* todo */
-          }
           .details {
             display: flex;
             flex-direction: column;
@@ -149,6 +145,7 @@ const StyledWrapper = styled.div`
       }
     }
   }
+
   > .right {
     border-radius: 0 16px 16px 0;
     width: 100%;
@@ -160,6 +157,7 @@ const StyledWrapper = styled.div`
       justify-content: center;
     }
   }
+  
 `;
 
 export default StyledWrapper;

src/routes/favs/index.tsx

@@ -156,7 +156,7 @@ function FavsPage() {
               </h4>
               <div className="relative group">
                 <FavoredMessage key={id} id={id} />
-                <button className="absolute top-2 right-2 flex justify-center items-center w-6 h-6 p-1 border border-solid border-slate-200 rounded invisible group-hover:visible" data-id={id} onClick={handleRemove} >
+                <button className="absolute top-2 right-2 flex-center w-6 h-6 p-1 border border-solid border-slate-200 rounded invisible group-hover:visible" data-id={id} onClick={handleRemove} >
                   <IconRemove className="fill-slate-900" />
                 </button>
               </div>

src/routes/oauth/index.tsx

@@ -1,7 +1,5 @@
 import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
-
-import StyledWrapper from "./styled";
 import { useNavigate, useParams } from "react-router-dom";
 import { useLoginMutation } from "../../app/services/auth";
 import toast from "react-hot-toast";
@@ -45,9 +43,9 @@ export default function OAuthPage() {
   }, [isSuccess, data]);
 
   return (
-    <StyledWrapper>
+    <div className="flex-center h-screen">
       {loading ? "loading" : ""}
       {error}
-    </StyledWrapper>
+    </div>
   );
 }

src/routes/oauth/styled.tsx

@@ -1,76 +0,0 @@
-import styled from "styled-components";
-
-const StyledWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  .form {
-    padding: 36px 40px 32px 40px;
-    /* border: 1px solid #eee; */
-    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-    border-radius: 12px;
-    .tips {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-bottom: 24px;
-      .logo {
-        width: 56px;
-        height: 56px;
-        margin-bottom: 28px;
-      }
-      .title {
-        font-weight: 600;
-        font-size: 24px;
-        line-height: 32px;
-        color: #101828;
-        margin-bottom: 8px;
-      }
-    }
-    .desc {
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      color: #667085;
-    }
-    form {
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      input {
-        width: 360px;
-        background: #ffffff;
-        border: 1px solid #d0d5dd;
-        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-        border-radius: 8px;
-        padding: 10px 14px;
-        font-weight: normal;
-        font-size: 16px;
-        line-height: 24px;
-        color: #667085;
-      }
-    }
-    .btn {
-      display: inline-block;
-      text-align: center;
-      width: 100%;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      color: #ffffff;
-      padding: 10px;
-      background: #1fe1f9;
-      border: 1px solid #1fe1f9;
-      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-      border-radius: 8px;
-      &.google {
-        color: #344054;
-        border-color: #d0d5dd;
-        background: none;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;

src/routes/onboarding/index.tsx

@@ -9,8 +9,8 @@ import WhoCanSignUp from "./steps/who-can-sign-up";
 import InviteLink from "./steps/invite-link";
 import DonePage from "./steps/done-page";
 import steps from "./steps";
-import StyledOnboardingPage from "./styled";
 import { useTranslation } from "react-i18next";
+import clsx from "clsx";
 
 
 const Navigator = () => {
@@ -19,12 +19,11 @@ const Navigator = () => {
   console.log("active step", activeStep);
 
   return (
-    <div className="navigator">
+    <div className="absolute top-5 w-full flex justify-center gap-2 z-10">
       {steps.map((stepToRender, indexToRender) => {
         const clickable = canJumpTo.includes(stepToRender.name);
-        const nodeCls = `node ${indexToRender === activeStep ? "emphasized" : ""} ${indexToRender > activeStep ? "disabled" : ""
-          } ${clickable ? "clickable" : ""}`;
-        const arrowCls = `arrow ${indexToRender >= activeStep ? "disabled" : ""}`;
+        const itemClass = clsx(`text-sm text-gray-600`, clickable && "cursor-pointer hover:text-gray-500", indexToRender === activeStep && "font-bold text-black", indexToRender >= activeStep && "text-gray-400");
+        const nodeCls = `${itemClass}`;
         return (
           <React.Fragment key={indexToRender}>
             <span
@@ -37,7 +36,7 @@ const Navigator = () => {
             >
               {stepToRender.label}
             </span>
-            {indexToRender !== steps.length - 1 && <span className={arrowCls}>→</span>}
+            {indexToRender !== steps.length - 1 && <span className={nodeCls}>→</span>}
           </React.Fragment>
         );
       })}
@@ -53,7 +52,7 @@ export default function OnboardingPage() {
       <Helmet>
         <title>{t("onboarding.title")}</title>
       </Helmet>
-      <StyledOnboardingPage>
+      <div className="h-screen overflow-y-auto">
         <Wizard header={<Navigator />}>
           <WelcomePage />
           <ServerName serverName={serverName} setServerName={setServerName} />
@@ -63,7 +62,7 @@ export default function OnboardingPage() {
           <InviteLink />
           <DonePage serverName={serverName} />
         </Wizard>
-      </StyledOnboardingPage>
+      </div>
     </>
   );
 }

src/routes/onboarding/steps/invite-link.tsx

@@ -14,7 +14,7 @@ export default function InviteLink() {
   const { link, linkCopied, copyLink, generateNewLink } = useInviteLink();
 
   return (
-    <div className="h-full flex flex-col items-center justify-center relative">
+    <div className="h-full flex-center flex-col relative">
       <span className="text-2xl mb-2 font-bold">{t("invite_title")}</span>
       <span className="text-sm mb-10 text-gray-400">{t("last_tip")}</span>
       <span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>

src/routes/onboarding/styled.tsx

@@ -1,43 +0,0 @@
-import styled from "styled-components";
-
-const StyledOnboardingPage = styled.div`
-  height: 100vh;
-  overflow-y: auto;
-  > .navigator {
-    position: absolute;
-    top: 20px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    z-index: 10;
-
-    > .node,
-    > .arrow {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 28px;
-      color: #101828;
-      cursor: default;
-      transition: all 150ms ease-in-out;
-
-      &.disabled {
-        color: #d0d5dd;
-      }
-
-      &.emphasized {
-        font-weight: 600;
-      }
-
-      &.clickable {
-        cursor: pointer;
-
-        &:hover {
-          color: #717180;
-        }
-      }
-    }
-  }
-`;
-
-export default StyledOnboardingPage;

src/routes/setting/Overview/FrontendURL.tsx

@@ -32,14 +32,12 @@ const Index = () => {
     }, [getUrlSuccess, data]);
     // if(!fetch)
     return (
-        <div className="setting">
-            <p className="label">{t("overview.url.title")}</p>
-            <p className="tip">
-                <span className="txt">
-                    {t("overview.url.desc")}
-                </span>
+        <div className="text-sm">
+            <p className="font-semibold">{t("overview.url.title")}</p>
+            <p className="flex justify-between w-full text-gray-400">
+                {t("overview.url.desc")}
             </p>
-            <div className="flex items-center gap-4 mt-4">
+            <div className="flex items-center gap-4 mt-2">
 
                 <StyledInput placeholder='frontend url' value={url} onChange={handleChange} />
                 <StyledButton disabled={!url || isLoading} className='' onClick={handleUpdate}> {ct("action.update")}</StyledButton>

src/routes/setting/Overview/index.tsx

@@ -1,5 +1,4 @@
 // import { useState, useEffect, ChangeEvent } from "react";
-import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import StyledRadio from "../../../common/component/styled/Radio";
 import { useAppSelector } from "../../../app/store";
@@ -10,77 +9,12 @@ import Language from './Language';
 import FrontendURL from "./FrontendURL";
 import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
 
-const StyledWrapper = styled.div`
-  position: relative;
-  width: 512px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  .logo {
-    display: flex;
-    gap: 16px;
-    .preview {
-      width: 96px;
-      height: 96px;
-    }
-    .upload {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: flex-start;
-      .tip {
-        font-weight: normal;
-        font-size: 14px;
-        line-height: 20px;
-        color: #374151;
-      }
-    }
-  }
-  .inputs {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    margin-bottom: 64px;
-    .input {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 8px;
-    }
-  }
-  > .setting {
-    font-size: 14px;
-    line-height: 20px;
-    > .label {
-      font-weight: 500;
-    }
-    > .tip {
-      font-weight: 400;
-      color: #667085;
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-    }
-    > form {
-      margin-top: 16px;
-      width: 512px;
-    }
-  }
-`;
-
 export default function Overview() {
   const { t } = useTranslation("setting");
   const { loginUser } = useAppSelector((store) => {
     return { loginUser: store.authData.user };
   });
-
-
   const { values: loginConfig, updateConfig: updateLoginConfig } = useConfig("login");
-
-
   const handleUpdateWhoCanSignUp = (value: WhoCanSignUp) => {
     updateLoginConfig({ ...loginConfig, who_can_sign_up: value });
   };
@@ -92,14 +26,15 @@ export default function Overview() {
   if (!loginConfig) return null;
   const { who_can_sign_up: whoCanSignUp, guest = false } = loginConfig as LoginConfig;
   const isAdmin = loginUser?.is_admin;
+
   return (
-    <StyledWrapper>
+    <div className="relative w-[512px] h-full flex flex-col gap-6">
       <Server />
       {isAdmin && (
         <>
-          <div className="setting">
-            <p className="label">{t("overview.sign_up.title")}</p>
-            <p className="tip">{t("overview.sign_up.desc")}</p>
+          <div className="text-sm">
+            <p className="font-semibold">{t("overview.sign_up.title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">{t("overview.sign_up.desc")}</p>
             <StyledRadio
               options={[t("overview.sign_up.everyone"), t("overview.sign_up.invite")]}
               values={["EveryOne", "InvitationOnly"]}
@@ -109,9 +44,9 @@ export default function Overview() {
               }}
             />
           </div>
-          <div className="setting">
-            <p className="label">{t("overview.guest_mode.title")}</p>
-            <p className="tip">
+          <div className="text-sm">
+            <p className="font-semibold">{t("overview.guest_mode.title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">
               <span className="txt">
                 {t("overview.guest_mode.desc")}
               </span>
@@ -131,6 +66,6 @@ export default function Overview() {
         </>
       )}
       <Language />
-    </StyledWrapper>
+    </div>
   );
 }

src/routes/setting/Overview/language.tsx

@@ -10,12 +10,10 @@ const Index = () => {
         i18n.changeLanguage(v);
     };
     return (
-        <div className="setting">
-            <p className="label">{t("overview.lang.title")}</p>
-            <p className="tip">
-                <span className="txt">
-                    {t("overview.lang.desc")}
-                </span>
+        <div className="text-sm">
+            <p className="font-semibold">{t("overview.lang.title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">
+                {t("overview.lang.desc")}
             </p>
             <StyledRadio
                 options={[t("overview.lang.en"), t("overview.lang.zh"), t("overview.lang.jp")]}

src/routes/setting/Overview/server.tsx

@@ -9,7 +9,6 @@ import Textarea from "../../../common/component/styled/Textarea";
 import SaveTip from '../../../common/component/SaveTip';
 import { useAppSelector } from '../../../app/store';
 
-
 const Index = () => {
     const { t } = useTranslation("setting");
     const { t: ct } = useTranslation();
@@ -62,8 +61,8 @@ const Index = () => {
     if (!loginUser || !serverValues) return null;
     return (
         <>
-            <div className="logo">
-                <div className="preview">
+            <div className="flex gap-4">
+                <div className="w-24 h-24">
                     <LogoUploader
                         disabled={!isAdmin}
                         url={uploadSuccess ? `${logo}?t=${+new Date()}` : logo}
@@ -72,15 +71,15 @@ const Index = () => {
                     />
                 </div>
                 {isAdmin && (
-                    <div className="upload">
-                        <div className="tip">
+                    <div className="flex flex-col justify-between items-start">
+                        <div className="text-sm text-gray-600">
                             {t("overview.upload_desc")}
                         </div>
                     </div>
                 )}
             </div>
-            <div className="inputs">
-                <div className="input">
+            <div className="flex flex-col items-start gap-6 mb-16">
+                <div className="w-full flex flex-col items-start gap-2">
                     <Label htmlFor="name">{t("overview.name")}</Label>
                     <Input
                         disabled={!isAdmin}
@@ -92,7 +91,7 @@ const Index = () => {
                         placeholder="Server Name"
                     />
                 </div>
-                <div className="input">
+                <div className="w-full flex flex-col items-start gap-2">
                     <Label htmlFor="desc">{t("overview.desc")}</Label>
                     <Textarea
                         disabled={!isAdmin}
@@ -107,7 +106,6 @@ const Index = () => {
                 </div>
             </div>
             {changed && <SaveTip saveHandler={handleUpdateServer} resetHandler={handleReset} />}
-
         </>
     );
 };

src/routes/setting/config/SMTP.tsx

@@ -1,11 +1,5 @@
 import { useState, useEffect, ChangeEvent } from "react";
-import styled from "styled-components";
-const StyledTest = styled.div`
-  display: flex;
-  gap: 16px;
-  white-space: nowrap;
-  margin-top: 24px;
-`;
+
 import { useSendTestEmailMutation } from "../../../app/services/server";
 import iconQuestion from "../../../assets/icons/question.svg?url";
 import useConfig from "../../../common/hook/useConfig";
@@ -135,7 +129,7 @@ export default function ConfigSMTP() {
           {t("how_to")}
         </a>
       </div>
-      <StyledTest>
+      <div className="flex gap-4 whitespace-nowrap mt-6">
         <Input
           type={"email"}
           disabled={!enabled}
@@ -147,9 +141,9 @@ export default function ConfigSMTP() {
         <Button disabled={!enabled || !testEmail} onClick={handleTestClick}>
           {t("send_test_email")}
         </Button>
-      </StyledTest>
+      </div>
       {changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
       {/* <button onClick={handleUpdate} className="btn">update</button> */}
     </StyledContainer>
   );
-}
+}