style: signin page theming (#938)

apps/app/components/account/email-code-form.tsx

@@ -92,13 +92,13 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
     <>
       <form className="space-y-5 py-5 px-5">
         {(codeSent || codeResent) && (
-          <div className="rounded-md bg-green-50 p-4">
+          <div className="rounded-md bg-green-500/20 p-4">
             <div className="flex">
               <div className="flex-shrink-0">
-                <CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
+                <CheckCircleIcon className="h-5 w-5 text-green-500" aria-hidden="true" />
               </div>
               <div className="ml-3">
-                <p className="text-sm font-medium text-green-800">
+                <p className="text-sm font-medium text-green-500">
                   {codeResent
                     ? "Please check your mail for new code."
                     : "Please check your mail for code."}
@@ -141,7 +141,9 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
             <button
               type="button"
               className={`mt-5 flex w-full justify-end text-xs outline-none ${
-                isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-brand-accent"
+                isResendDisabled
+                  ? "cursor-default text-brand-secondary"
+                  : "cursor-pointer text-brand-accent"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
@@ -174,7 +176,8 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
               className="w-full text-center"
               size="md"
               onClick={handleSubmit(handleSignin)}
-              loading={isSubmitting || (!isValid && isDirty)}
+              disabled={!isValid && isDirty}
+              loading={isSubmitting}
             >
               {isSubmitting ? "Signing in..." : "Sign in"}
             </PrimaryButton>

apps/app/components/account/email-password-form.tsx

@@ -94,7 +94,9 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
         <div className="mt-2 flex items-center justify-between">
           <div className="ml-auto text-sm">
             <Link href={"/forgot-password"}>
-              <a className="font-medium text-brand-accent hover:text-indigo-500">Forgot your password?</a>
+              <a className="font-medium text-brand-accent hover:text-brand-accent">
+                Forgot your password?
+              </a>
             </Link>
           </div>
         </div>
@@ -102,7 +104,8 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
           <SecondaryButton
             type="submit"
             className="w-full text-center"
-            loading={isSubmitting || (!isValid && isDirty)}
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
           >
             {isSubmitting ? "Signing in..." : "Sign In"}
           </SecondaryButton>

apps/app/components/account/github-login-button.tsx

@@ -33,11 +33,11 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   }, []);
 
   return (
-    <div className="px-1 w-full">
+    <div className="w-full px-1">
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-3 rounded-md border border-brand-base p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
+        <button className="flex w-full items-center justify-center gap-3 rounded-md border border-brand-base p-2 text-sm font-medium text-brand-secondary duration-300 hover:bg-brand-surface-2">
           <Image src={githubImage} height={22} width={22} color="#000" alt="GitHub Logo" />
           <span>Sign In with Github</span>
         </button>

apps/app/components/ui/input/index.tsx

@@ -42,7 +42,7 @@ export const Input: React.FC<Props> = ({
           : mode === "trueTransparent"
           ? "rounded border-none bg-transparent ring-0"
           : ""
-      } ${error ? "border-red-500/20" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
+      } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
         fullWidth ? "w-full" : ""
       } ${size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`}
       {...rest}

apps/app/layouts/default-layout/index.tsx

@@ -21,7 +21,7 @@ type Props = {
 
 const DefaultLayout: React.FC<Props> = ({ meta, children }) => (
   <Container meta={meta}>
-    <div className="w-full h-screen overflow-auto bg-brand-base">
+    <div className="h-screen w-full overflow-auto bg-brand-surface-1">
       <>{children}</>
     </div>
   </Container>

apps/app/pages/signin.tsx

@@ -98,12 +98,12 @@ const SignInPage: NextPage = () => {
       }}
     >
       {isLoading && (
-        <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-white">
+        <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3">
           <h2 className="text-xl text-gray-900">Signing in. Please wait...</h2>
           <Spinner />
         </div>
       )}
-      <div className="flex h-screen w-full items-center justify-center overflow-auto bg-gray-50">
+      <div className="flex h-screen w-full items-center justify-center overflow-auto">
         <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
           <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
             <div className="flex flex-col items-center justify-center gap-10">
@@ -113,12 +113,12 @@ const SignInPage: NextPage = () => {
               </h2>
             </div>
 
-            <div className="flex flex-col rounded-[10px] bg-brand-surface-2  shadow-md">
+            <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
               {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
                 <>
                   <EmailSignInForm handleSuccess={onSignInSuccess} />
 
-                  <div className="flex flex-col gap-3 py-5 px-5 border-t items-center justify-center border-brand-base ">
+                  <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5 ">
                     <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
 
                     <GithubLoginButton handleSignIn={handleGithubSignIn} />