refactor: restyle some components with tailwind

src/routes/callback/GithubCallback.tsx

@@ -1,22 +1,9 @@
 import { useEffect, FC } from 'react';
-import styled from 'styled-components';
 import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
 import { useLoginMutation } from "../../app/services/auth";
 import toast from "react-hot-toast";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 
-const Styled = styled.section`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    .success{
-        font-size: 30px;
-        font-weight: bold;
-        color: green;
-    }
-`;
 export type GithubLoginSource = "widget" | "webapp"
 type Props = {
     code: string, from?: GithubLoginSource
@@ -41,6 +28,10 @@ const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
             if (from == 'widget') {
                 localStorage.setItem("widget", `${new Date().getTime()}`);
             }
+            // webapp 跳回首页
+            if (from == 'webapp') {
+                location.href = "/";
+            }
         }
     }, [isSuccess, from]);
     useEffect(() => {
@@ -60,10 +51,10 @@ const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
         }
     }, [error]);
     if (error) return <span>Something Error</span>;
-    return <Styled>
+    return <section className='flex flex-col gap-3 justify-center items-center'>
         {isSuccess && from == 'widget' && <h1>Please close this window and return widget window</h1>}
-        <span className='success'>{isLoading ? "Github Logging in..." : "Github Login Success!"}</span>
-    </Styled>;
+        <span className='text-3xl text-green-600 font-bold'>{isLoading ? "Github Logging in..." : "Github Login Success!"}</span>
+    </section>;
 };
 
 export default GithubCallback;

src/routes/login/SignUpLink.tsx

@@ -1,26 +1,5 @@
-import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
 
-const StyledSignUpLink = styled.p`
-  text-align: center;
-  margin: 24px 0 8px;
-
-  > span {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    color: #667085;
-    margin-right: 4px;
-  }
-
-  > a {
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    color: #22d3ee;
-    cursor: pointer;
-  }
-`;
 
 export default function MagicLinkLogin() {
   const navigate = useNavigate();
@@ -29,9 +8,9 @@ export default function MagicLinkLogin() {
   };
 
   return (
-    <StyledSignUpLink>
+    <div className="flex gap-1 mt-7 text-sm text-[#667085] justify-center">
       <span>Don’t have an account?</span>
-      <a onClick={handleSignUp}>Sign up</a>
-    </StyledSignUpLink>
+      <a className="text-[#22d3ee]" onClick={handleSignUp}>Sign up</a>
+    </div>
   );
 }

src/routes/reg/Register.tsx

@@ -148,10 +148,12 @@ export default function Reg() {
         </Button>
       </form>
       <hr className="or" />
-      {googleLogin && <GoogleLoginButton type="register" clientId={clientId} />}
-      {enableGithubLogin && (
-        <GithubLoginButton type="register" client_id={githubAuthConfig?.client_id} />
-      )}
+      <div className="flex flex-col gap-3">
+        {googleLogin && <GoogleLoginButton type="register" clientId={clientId} />}
+        {enableGithubLogin && (
+          <GithubLoginButton type="register" client_id={githubAuthConfig?.client_id} />
+        )}
+      </div>
       <SignInLink token={magicToken} />
     </>
   );

src/routes/reg/SignInLink.tsx

@@ -1,30 +1,4 @@
 import { useEffect } from 'react';
-import styled from "styled-components";
-
-const StyledSignInLink = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 30px;
-  >.item{
-    text-align: center;
-    margin: 0;
-    > span {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: #667085;
-      margin-right: 4px;
-    }
-    > a {
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
-      color: #22d3ee;
-      cursor: pointer;
-    }
-}
-`;
 
 export default function SignInLink({ token }: { token?: string }) {
   const handleSignIn = () => {
@@ -39,11 +13,9 @@ export default function SignInLink({ token }: { token?: string }) {
   }, [token]);
 
   return (
-    <StyledSignInLink>
-      <li className="item">
-        <span>Have an account?</span>
-        <a onClick={handleSignIn}>Sign In</a>
-      </li>
-    </StyledSignInLink>
+    <div className="flex gap-1 mt-7 text-sm text-[#667085] justify-center">
+      <span>Have an account?</span>
+      <a onClick={handleSignIn} className="text-[#22d3ee]">Sign In</a>
+    </div>
   );
 }