refactor: more tailwind

src/routes/onboarding/steps/admin-account.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState, FC, useRef } from "react";
-import styled from "styled-components";
 import toast from "react-hot-toast";
 import { useDispatch } from "react-redux";
 import StyledInput from "../../../common/component/styled/Input";
@@ -15,53 +14,6 @@ import { useAppSelector } from "../../../app/store";
 import { useTranslation } from "react-i18next";
 import { useWizard } from "react-use-wizard";
 
-const StyledWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  > .primaryText {
-    text-align: center;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 30px;
-    margin-bottom: 8px;
-  }
-
-  > .secondaryText {
-    text-align: center;
-    font-size: 14px;
-    line-height: 20px;
-    margin-bottom: 24px;
-  }
-
-  form {
-    > .input {
-    margin-bottom: 20px;
-    width: 360px;
-    height: 44px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    padding: 10px 14px;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-    > .inner {
-      padding: 0;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-    }
-  }}
-
-  > .button {
-    width: 360px;
-    margin-top: 24px;
-  }
-`;
 type Props = {
   serverName: string;
 };
@@ -122,12 +74,12 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
   }, [isUpdatedServer]);
 
   return (
-    <StyledWrapper>
-      <span className="primaryText">{t("admin_title")}</span>
-      <span className="secondaryText">{t("admin_desc")}</span>
-      <form ref={formRef} action="/">
+    <div className="h-full flex-center flex-col text-center w-[360px] m-auto">
+      <span className="text-2xl mb-2 font-bold">{t("admin_title")}</span>
+      <span className="text-sm mb-6">{t("admin_desc")}</span>
+      <form ref={formRef} action="/" className="flex flex-col gap-2 w-full">
         <StyledInput
-          className="input"
+          className="large"
           placeholder="Enter your email"
           type={"email"}
           required
@@ -135,7 +87,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
           onChange={(e) => setEmail(e.target.value)}
         />
         <StyledInput
-          className="input"
+          className="large"
           type="password"
           required
           minLength={6}
@@ -144,7 +96,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
           onChange={(e) => setPassword(e.target.value)}
         />
         <StyledInput
-          className="input"
+          className="large"
           type="password"
           required
           minLength={6}
@@ -154,7 +106,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
         />
       </form>
       <StyledButton
-        className="button"
+        className="mt-6 w-full"
         onClick={async () => {
           const formEle = formRef?.current;
           if (formEle) {
@@ -174,7 +126,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
       >
         {!(isSigningUp || isLoggingIn || isUpdatingServer) ? t("sign") : "..."}
       </StyledButton>
-    </StyledWrapper>
+    </div>
   );
 };
 export default AdminAccount;

src/routes/onboarding/steps/done-page.tsx

@@ -1,80 +1,26 @@
-import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
 import StyledButton from "../../../common/component/styled/Button";
 import PlayIcon from "../../../assets/icons/play.svg?url";
 import { Trans, useTranslation } from "react-i18next";
 
-const StyledWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  > .primaryText {
-    text-align: center;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 30px;
-    margin-bottom: 8px;
-  }
-
-  > .secondaryText {
-    text-align: center;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    margin-bottom: 48px;
-  }
-
-  > .tip {
-    width: 588px;
-    font-size: 20px;
-    line-height: 24px;
-    text-align: center;
-    margin-bottom: 48px;
-
-    > .strong {
-      font-weight: 700;
-    }
-  }
-
-  > .startButton {
-    width: 128px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 15px 0 12px;
-
-    > img {
-      margin-bottom: 7px;
-    }
-
-    > span {
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-`;
 
 export default function DonePage({ serverName }: { serverName: string }) {
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const navigate = useNavigate();
 
   return (
-    <StyledWrapper>
-      <span className="primaryText">{t("done_welcome", { serverName })}</span>
-      <span className="secondaryText">{t("done_title")}</span>
-      <span className="tip">
+    <div className="h-full flex-center flex-col text-center w-[588px] m-auto">
+      <span className="text-2xl font-bold mb-2">{t("done_welcome", { serverName })}</span>
+      <span className="text-sm mb-12">{t("done_title")}</span>
+      <span className="text-xl mb-12">
         <Trans i18nKey={"onboarding.done_desc"} ns={"welcome"}>
-          <span className="strong" />
+          <span className="font-bold" />
         </Trans>
       </span>
-      <StyledButton className="startButton" onClick={() => navigate("/")}>
-        <img src={PlayIcon} alt="play icon" />
-        <span>{t("enter")}</span>
+      <StyledButton className="!w-32 flex flex-col items-center py-3" onClick={() => navigate("/")}>
+        <img className="mb-2" src={PlayIcon} alt="play icon" />
+        <span className="text-sm">{t("enter")}</span>
       </StyledButton>
-    </StyledWrapper>
+    </div>
   );
 }

src/routes/onboarding/steps/server-name.tsx

@@ -1,52 +1,10 @@
 import { FC } from "react";
-import styled from "styled-components";
 import toast from "react-hot-toast";
 import StyledInput from "../../../common/component/styled/Input";
 import StyledButton from "../../../common/component/styled/Button";
 import { useTranslation } from "react-i18next";
 import { useWizard } from "react-use-wizard";
 
-const StyledWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  > .primaryText {
-    text-align: center;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 30px;
-    margin-bottom: 8px;
-  }
-
-  > .secondaryText {
-    width: 360px;
-    text-align: center;
-    font-size: 14px;
-    line-height: 20px;
-    margin-bottom: 24px;
-    color: #667085;
-  }
-
-  > .input {
-    width: 360px;
-    height: 44px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    padding: 10px 14px;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-  }
-
-  > .button {
-    width: 360px;
-    margin-top: 24px;
-  }
-`;
 type Props = {
   serverName: string;
   setServerName: (name: string) => void;
@@ -54,20 +12,21 @@ type Props = {
 const ServerName: FC<Props> = ({ serverName, setServerName }) => {
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const { nextStep } = useWizard();
+
   return (
-    <StyledWrapper>
-      <span className="primaryText">{t("new_server")}</span>
-      <span className="secondaryText">
+    <div className="h-full flex-center flex-col text-center w-[360px] m-auto">
+      <span className="text-2xl mb-2 font-bold">{t("new_server")}</span>
+      <span className="text-sm mb-6 text-gray-400 ">
         {t("server_desc")}
       </span>
       <StyledInput
-        className="input"
+        className="h-11 px-3.5 py-2.5 border-gray-300 rounded-lg shadow"
         placeholder={t("placeholder_server")}
         value={serverName}
         onChange={(e) => setServerName(e.target.value)}
       />
       <StyledButton
-        className="button"
+        className="w-full mt-6"
         onClick={() => {
           // Verification for space name
           if (serverName === "") {
@@ -79,7 +38,7 @@ const ServerName: FC<Props> = ({ serverName, setServerName }) => {
       >
         {t("create_server")}
       </StyledButton>
-    </StyledWrapper>
+    </div>
   );
 };
 export default ServerName;

src/routes/onboarding/steps/welcome-page.tsx

@@ -1,64 +1,22 @@
-import styled from "styled-components";
-
 import StyledButton from "../../../common/component/styled/Button";
 import PlayIcon from "../../../assets/icons/play.svg?url";
 import { useTranslation } from "react-i18next";
 import { useWizard } from "react-use-wizard";
 
-const StyledWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  > .primaryText {
-    text-align: center;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 30px;
-    margin-bottom: 8px;
-  }
-
-  > .secondaryText {
-    text-align: center;
-    font-size: 14px;
-    line-height: 20px;
-    margin-bottom: 24px;
-  }
-
-  > .startButton {
-    width: 128px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 15px 0 12px;
-
-    > img {
-      margin-bottom: 7px;
-    }
-
-    > span {
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-`;
 
 export default function WelcomePage() {
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const { nextStep } = useWizard();
   return (
-    <StyledWrapper>
-      <span className="primaryText">{t("welcome")}</span>
-      <span className="secondaryText">
+    <div className="flex-center flex-col h-full text-center">
+      <span className="text-2xl mb-2 font-bold">{t("welcome")}</span>
+      <span className="text-sm mb-6">
         {t("welcome_desc")}
       </span>
-      <StyledButton className="startButton" onClick={nextStep}>
+      <StyledButton className="!w-32 flex flex-col gap-2 items-center py-3 text-sm" onClick={nextStep}>
         <img src={PlayIcon} alt="play icon" />
         <span>{t("start")}</span>
       </StyledButton>
-    </StyledWrapper>
+    </div>
   );
 }

src/routes/onboarding/steps/who-can-sign-up.tsx

@@ -8,39 +8,6 @@ import { WhoCanSignUp } from "../../../types/server";
 import { useTranslation } from "react-i18next";
 import { useWizard } from "react-use-wizard";
 
-const StyledWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  > .primaryText {
-    text-align: center;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 30px;
-    margin-bottom: 8px;
-  }
-
-  > .secondaryText {
-    text-align: center;
-    font-size: 14px;
-    line-height: 20px;
-    margin-bottom: 24px;
-  }
-
-  > form {
-    width: 512px;
-  }
-
-  > .button {
-    width: 124px;
-    height: 44px;
-    margin-top: 24px;
-  }
-`;
-
 export default function SignUpSetting() {
   const { t } = useTranslation("welcome");
   const { t: st } = useTranslation("setting");
@@ -73,10 +40,22 @@ export default function SignUpSetting() {
     if (isSuccess) nextStep();
   }, [isSuccess]);
 
+  const StyledWrapper = styled.div`
+  /* > form {
+    width: 512px;
+  }
+
+  > .button {
+    width: 124px;
+    height: 44px;
+    margin-top: 24px;
+  } */
+`;
+
   return (
-    <StyledWrapper>
-      <span className="primaryText">{t("onboarding.invite_title")}</span>
-      <span className="secondaryText">{t("onboarding.invite_desc")}</span>
+    <StyledWrapper className="h-full flex-center flex-col text-center w-[512px] m-auto">
+      <span className="font-bold text-2xl mb-2">{t("onboarding.invite_title")}</span>
+      <span className="text-sm mb-6">{t("onboarding.invite_desc")}</span>
       {value && <StyledRadio
         options={[st("overview.sign_up.everyone"), st("overview.sign_up.invite")]}
         values={["EveryOne", "InvitationOnly"]}
@@ -84,7 +63,7 @@ export default function SignUpSetting() {
         onChange={setValue}
       />}
       <StyledButton
-        className="button"
+        className="w-32 mt-6"
         disabled={!value}
         onClick={() => {
           // nextStep();