From 7927762db3fff5177a29365c64aefb7df3997ef6 Mon Sep 17 00:00:00 2001
From: Joshua Tuddenham <joshuaisaact@gmail.com>
Date: Sat, 2 Nov 2024 11:25:23 +0000
Subject: [PATCH] style: updated login screen, mobile responsive

---
 src/components/auth/LoginForm.tsx        | 43 +++++++++++++++----
 src/components/ui/social/SocialLinks.tsx |  2 +-
 src/pages/Login.tsx                      | 54 ++++++++++++------------
 3 files changed, 64 insertions(+), 35 deletions(-)

diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
index 1df83ad..69d0205 100644
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -16,12 +16,15 @@ export function LoginForm() {
       navigate('/home', { replace: true });
     }
   }, [session, navigate]);
+
   return (
-    <Card className="w-full max-w-md border-white/20 bg-white/10 backdrop-blur-sm">
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl font-bold tracking-tight text-white">Welcome back</CardTitle>
-        <CardDescription className="text-green-100/80">
-          Sign in to access your trips
+    <Card className="w-full max-w-md border-white/20 bg-white/10 text-center backdrop-blur-sm">
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-center text-2xl font-bold tracking-tight text-white">
+          Welcome
+        </CardTitle>
+        <CardDescription className="text-center text-green-100/80">
+          Plan and track your adventures
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -35,12 +38,36 @@ export function LoginForm() {
                 colors: {
                   brand: '#4A9F76',
                   brandAccent: '#3d8862',
+                  defaultButtonBackground: 'rgba(255, 255, 255, 0.15)',
+                  defaultButtonBackgroundHover: 'rgba(255, 255, 255, 0.25)',
+                  defaultButtonText: 'white',
+                  dividerBackground: 'rgba(255, 255, 255, 0.2)',
                 },
               },
             },
-            className: {
-              anchor: 'auth-anchor',
-              button: 'auth-button',
+            style: {
+              button: {
+                flex: '1',
+                flexDirection: 'column',
+                gap: '8px',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '16px',
+                border: '1px solid rgba(255, 255, 255, 0.25)',
+              },
+              divider: {
+                textAlign: 'center',
+              },
+              container: {
+                textAlign: 'center',
+              },
+            },
+          }}
+          localization={{
+            variables: {
+              sign_in: {
+                social_provider_text: 'Sign in with {{provider}}',
+              },
             },
           }}
           providers={['google', 'github']}
diff --git a/src/components/ui/social/SocialLinks.tsx b/src/components/ui/social/SocialLinks.tsx
index d8a8f30..a5d9df6 100644
--- a/src/components/ui/social/SocialLinks.tsx
+++ b/src/components/ui/social/SocialLinks.tsx
@@ -3,7 +3,7 @@ import { SOCIAL_LINKS } from '@/lib/constants/social';
 
 function SocialLinks() {
   return (
-    <div className="flex gap-6">
+    <div className="grid grid-cols-2 gap-4 sm:flex sm:gap-6">
       {SOCIAL_LINKS.map((link) => (
         <SocialLink
           key={link.label}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index d4babd6..23a6d01 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -5,7 +5,7 @@ import { Github } from 'lucide-react';
 
 export default function Login() {
   return (
-    <div className="relative min-h-screen bg-gradient-to-b from-green-900 to-green-950">
+    <div className="relative min-h-screen bg-gradient-to-b from-green-900 via-green-900/95 to-green-950">
       <div className="mx-auto flex min-h-screen max-w-screen-xl flex-col items-center justify-between px-4 py-8 sm:py-12">
         {/* Main Content Section */}
         <div className="animate-fade-in flex w-full flex-1 flex-col items-center justify-center opacity-0">
@@ -21,40 +21,42 @@ export default function Login() {
             Your trip companion
           </p>
 
+          <div className="animate-fade-in-up mb-8 w-full max-w-md py-5 opacity-0 [animation-delay:600ms]">
+            <LoginForm />
+          </div>
+
+          <p className="animate-fade-in-up max-w-sm text-center text-sm text-green-100/80 opacity-0 [animation-delay:700ms]">
+            A full-stack portfolio project showcasing modern web development
+          </p>
+
           {/* Job Search Banner */}
-          <div className="animate-fade-in-up my-8 flex flex-col items-center gap-4 opacity-0 [animation-delay:600ms] sm:my-10">
-            <div className="grid grid-cols-1 items-center gap-4 rounded-lg bg-green-800/30 px-6 py-4 backdrop-blur-sm transition-all duration-300 hover:bg-green-800/40 sm:grid-cols-[auto,1fr]">
-              <img
-                src="./me.jpg"
-                className="mx-auto h-20 w-20 rounded-full border-2 border-green-200/20 shadow-lg sm:mx-0"
-                alt="Profile"
-              />
-              <div className="text-center sm:text-left">
-                <p className="font-medium text-white">
-                  🚀 Software Developer Open to Opportunities
-                </p>
-                <p className="mt-2 text-sm text-green-100">
-                  I'm currently looking for my next role in software development.
-                  <br />
-                  Let's create something impactful together!
-                </p>
+          <div className="animate-fade-in-up my-8 flex flex-col items-center gap-4 opacity-0 [animation-delay:800ms] sm:my-10">
+            <div className="max-w-[320px] rounded-lg bg-green-800/30 p-4 backdrop-blur-sm transition-all duration-300 hover:bg-green-800/40 sm:max-w-[640px]">
+              <div className="grid grid-cols-1 items-center gap-4 sm:grid-cols-[auto,1fr]">
+                <img
+                  src="./me.jpg"
+                  className="mx-auto h-16 w-16 rounded-full border-2 border-green-200/20 shadow-lg sm:mx-0 sm:h-20 sm:w-20"
+                  alt="Profile"
+                />
+                <div className="text-center sm:text-left">
+                  <p className="font-medium text-white">
+                    🚀 Software Developer Open to Opportunities
+                  </p>
+                  <p className="mt-2 text-sm text-green-100">
+                    Seeking my next challenge in software development.
+                    <span className="hidden sm:inline"> Let's build something exceptional.</span>
+                    <span className="sm:hidden"> Ready to build something exceptional.</span>
+                  </p>
+                </div>
               </div>
             </div>
 
             <SocialLinks />
           </div>
-
-          <div className="animate-fade-in-up mb-8 w-full max-w-md opacity-0 [animation-delay:1100ms]">
-            <LoginForm />
-          </div>
-
-          <p className="animate-fade-in-up text-sm text-green-100/80 opacity-0 [animation-delay:1000ms]">
-            A full-stack portfolio project showcasing modern web development
-          </p>
         </div>
 
         {/* GitHub Section */}
-        <div className="animate-fade-in-up w-full pt-8 opacity-0 [animation-delay:1200ms] sm:pt-12">
+        <div className="animate-fade-in-up w-full pt-8 opacity-0 [animation-delay:900ms] sm:pt-12">
           <div className="flex flex-col items-center gap-3">
             <p className="text-sm text-green-100/90">Explore this open-source project</p>
             <div className="flex flex-col gap-2 sm:flex-row sm:gap-4">