refactor: more tailwind

src/routes/sendMagicLink/SentTip.tsx

@@ -10,9 +10,9 @@ interface Props {
 const SentTip: FC<Props> = ({ email, reset }) => {
   const { t } = useTranslation("auth");
   return (
-    <div className="tips">
-      <h2 className="title">{t("check_email")}</h2>
-      <span className="desc">
+    <div className="flex flex-col items-center">
+      <h2 className="font-semibold text-2xl text-gray-800 mb-2">{t("check_email")}</h2>
+      <span className="text-center text-gray-500 mb-6">
         {t("check_email_desc", { email })}
       </span>
       <Button onClick={reset} className="main flex">

src/routes/sendMagicLink/index.tsx

@@ -2,13 +2,13 @@ import { useState, useEffect, ChangeEvent, FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import BASE_URL from "../../app/config";
-import StyledWrapper from "./styled";
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 import { useSendLoginMagicLinkMutation } from "../../app/services/auth";
 import SentTip from "./SentTip";
 import { useTranslation } from "react-i18next";
 import SocialLoginButtons from "../login/SocialLoginButtons";
+import Divider from "../../common/component/Divider";
 
 export default function SendMagicLinkPage() {
   const { t } = useTranslation("auth");
@@ -62,20 +62,19 @@ export default function SendMagicLinkPage() {
     setEmail("");
     setSent(false);
   };
-
   return (
-    <StyledWrapper>
-      <div className="form">
+    <div className="flex-center h-screen">
+      <div className="py-8 px-10 shadow rounded-xl">
         {sent ? (
           <SentTip email={email} reset={handleReset} />
         ) : (
           <>
-            <div className="tips">
-              <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
-              <h2 className="title">{t("login.title")}</h2>
-              <span className="desc">{t("placeholder_email")}</span>
+            <div className="flex flex-col items-center">
+              <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
+              <h2 className="font-semibold text-2xl text-gray-800 mb-2">{t("login.title")}</h2>
+              <span className="text-center text-gray-500 mb-6">{t("placeholder_email")}</span>
             </div>
-            <form onSubmit={handleLogin}>
+            <form onSubmit={handleLogin} className="flex flex-col gap-5 w-[360px]">
               <Input
                 type="email"
                 className="large"
@@ -91,14 +90,14 @@ export default function SendMagicLinkPage() {
                 {isLoading ? "Sending" : t("continue")}
               </Button>
             </form>
-            <hr className="or" />
+            <Divider content="or" />
             <div className="flex flex-col gap-3 py-3">
               <SocialLoginButtons />
             </div>
-            <Button onClick={handlePwdPath}>{t("login.password")}</Button>
+            <Button onClick={handlePwdPath} className="flex">{t("login.password")}</Button>
           </>
         )}
       </div>
-    </StyledWrapper>
+    </div>
   );
 }

src/routes/sendMagicLink/styled.tsx

@@ -1,71 +0,0 @@
-import styled from "styled-components";
-
-const StyledWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  .form {
-    max-width: 440px;
-    padding: 32px 40px 32px 40px;
-    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;
-      .logo {
-        width: 56px;
-        height: 56px;
-        margin-bottom: 28px;
-        border-radius: 50%;
-      }
-      .title {
-        font-weight: 600;
-        font-size: 24px;
-        line-height: 32px;
-        color: #101828;
-        margin-bottom: 8px;
-      }
-      .desc {
-        text-align: center;
-        font-weight: normal;
-        font-size: 16px;
-        line-height: 24px;
-        color: #667085;
-        margin-bottom: 24px;
-      }
-    }
-    form {
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      width: 360px;
-    }
-    .or {
-      border: none;
-      position: relative;
-      height: 1px;
-      background-color: #e4e7ec;
-      margin: 26px 0;
-      overflow: visible;
-      &:after {
-        padding: 4px;
-        background-color: #fff;
-        content: "OR";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate3d(-50%, -50%, 0);
-        font-size: 14px;
-        line-height: 20px;
-        color: #667085;
-      }
-    }
-    button {
-      width: 100%;
-    }
-  }
-`;
-
-export default StyledWrapper;