fixed the colors to use tailwind.config

Vets-Who-Code · Nov 23, 2024 · a5f6c55 · a5f6c55
1 parent e35c157
commit a5f6c55
Showing 1 changed file with 9 additions and 30 deletions.
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -41,58 +41,37 @@ const Login: PageWithLayout = () => {
 
     if (status === "unauthenticated") {
         return (
-            // Changed background from gradient to navy blue
-            <div className="tw-flex tw-items-center tw-justify-center tw-min-h-screen" style={{ background: '#091f40' }}>
+            <div className="tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-bg-secondary">
                 <div className="tw-bg-white tw-rounded-lg tw-shadow-lg tw-w-full tw-max-w-md tw-overflow-hidden">
                     <div className="tw-p-8 tw-space-y-3">
-                        {/* Updated heading text and styling */}
-                        <h1 className="tw-text-2xl tw-font-bold tw-text-center" 
-                            style={{ 
-                                fontFamily: 'Gotham, Arial, sans-serif',
-                                color: '#091f40'
-                            }}>
+                        <h1 className="tw-text-2xl tw-font-bold tw-text-center tw-text-secondary">
                             Retool. Retrain. Relaunch.
                         </h1>
-                        {/* Updated text color and content */}
-                        <p className="tw-text-center" style={{ color: '#091f40' }}>
+                        <p className="tw-text-center tw-text-secondary">
                             Sign in to continue your journey with #VetsWhoCode
                         </p>
                     </div>
                     <div className="tw-p-6">
-                        {/* Updated button styling to use brand red */}
                         <button 
                             type="button"
                             onClick={() => void signIn("github", { 
                                 callbackUrl: "/profile",
                                 redirect: true
                             })}
-                            className="tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-white tw-rounded-md tw-transition-colors"
-                            style={{ 
-                                backgroundColor: '#c5203e',
-                                fontFamily: 'Gotham, Arial, sans-serif'
-                            }}
+                            className="tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-white tw-bg-primary tw-rounded-md tw-transition-colors"
                         >
-                            <i className="fa-brands fab fa-github tw-h-4 tw-w-4" aria-hidden="true"></i>
+                            <i className="fab fa-github" />
                             Sign in with GitHub
                         </button>
                     </div>
                     <div className="tw-px-8 tw-pb-8">
-                        {/* Updated link colors to brand red */}
-                        <p className="tw-text-center tw-text-sm" style={{ color: '#091f40' }}>
+                        <p className="tw-text-center tw-text-sm tw-text-secondary">
                             By clicking continue, you agree to our{" "}
-                            <a 
-                                href="/terms" 
-                                className="tw-underline tw-underline-offset-4 hover:tw-opacity-80"
-                                style={{ color: '#c5203e' }}
-                            >
+                            <a href="/terms" className="tw-text-primary tw-underline tw-underline-offset-4 hover:tw-opacity-80">
                                 Terms of Service
                             </a>{" "}
                             and{" "}
-                            <a 
-                                href="/privacy" 
-                                className="tw-underline tw-underline-offset-4 hover:tw-opacity-80"
-                                style={{ color: '#c5203e' }}
-                            >
+                            <a href="/privacy" className="tw-text-primary tw-underline tw-underline-offset-4 hover:tw-opacity-80">
                                 Privacy Policy
                             </a>
                             .
@@ -105,7 +84,7 @@ const Login: PageWithLayout = () => {
 
     return (
         <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-flex-col tw-gap-4 tw-justify-center tw-items-center">
-            <span style={{ color: '#091f40' }}>Redirecting to profile...</span>
+            <span className="tw-text-secondary">Redirecting to profile...</span>
             <Spinner />
         </div>
     );