From b046aedceef853f824f339427b6614b30c675215 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Wed, 27 Aug 2025 16:07:11 -0500
Subject: [PATCH] Improve auth page

---
 src/App.tsx                          | 38 +++++--------
 src/ui/Homepage/Homepage.tsx         | 80 +++++++++++++++-------------
 src/ui/Homepage/HomepageAuth.tsx     |  4 +-
 src/ui/Homepage/HompageUpdateLog.tsx | 47 +++++++---------
 4 files changed, 78 insertions(+), 91 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 223e6246..fb3e1525 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -90,31 +90,19 @@ function AppContent() {
     return (
         <div>
             {!isAuthenticated && !authLoading && (
-                <div 
-                    className="fixed inset-0 bg-gradient-to-br from-background via-muted/20 to-background z-[9999]"
-                    aria-hidden="true"
-                >
-                    <div className="absolute inset-0 opacity-20">
-                        <div className="absolute inset-0" style={{
-                            backgroundImage: `repeating-linear-gradient(
-                                45deg,
-                                transparent,
-                                transparent 20px,
-                                hsl(var(--primary) / 0.4) 20px,
-                                hsl(var(--primary) / 0.4) 40px
-                            )`
-                        }} />
-                    </div>
-
-                    <div className="absolute inset-0 opacity-10">
-                        <div className="absolute inset-0" style={{
-                            backgroundImage: `linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
-                                            linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px)`,
-                            backgroundSize: '40px 40px'
-                        }} />
-                    </div>
-
-                    <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-background/60" />
+                <div>
+                    <div className="absolute inset-0" style={{
+                        backgroundImage: `linear-gradient(
+                            135deg,
+                            transparent 0%,
+                            transparent 49%,
+                            rgba(255, 255, 255, 0.03) 49%,
+                            rgba(255, 255, 255, 0.03) 51%,
+                            transparent 51%,
+                            transparent 100%
+                        )`,
+                        backgroundSize: '80px 80px'
+                    }} />
                 </div>
             )}
 
diff --git a/src/ui/Homepage/Homepage.tsx b/src/ui/Homepage/Homepage.tsx
index 3349115b..b6fbe9ae 100644
--- a/src/ui/Homepage/Homepage.tsx
+++ b/src/ui/Homepage/Homepage.tsx
@@ -72,76 +72,82 @@ export function Homepage({
 
     return (
         <div
-            className={`w-full min-h-svh grid place-items-center relative transition-[padding-top] duration-200 ease-linear ${
+            className={`w-full min-h-svh relative transition-[padding-top] duration-200 ease-linear ${
                 isTopbarOpen ? 'pt-[66px]' : 'pt-2'
             }`}>
-            <div className="flex flex-row items-center justify-center gap-8 relative z-[10000]">
-                <HomepageAuth
-                    setLoggedIn={setLoggedIn}
-                    setIsAdmin={setIsAdmin}
-                    setUsername={setUsername}
-                    setUserId={setUserId}
-                    loggedIn={loggedIn}
-                    authLoading={authLoading}
-                    dbError={dbError}
-                    setDbError={setDbError}
-                    onAuthSuccess={onAuthSuccess}
-                />
-
-                <div className="flex flex-row items-center justify-center gap-8">
-                    {loggedIn && (
-                        <div className="flex flex-col items-center gap-4 w-[350px]">
+            {!loggedIn ? (
+                <div className="absolute top-[66px] left-0 w-full h-[calc(100%-66px)] flex items-center justify-center">
+                    <HomepageAuth
+                        setLoggedIn={setLoggedIn}
+                        setIsAdmin={setIsAdmin}
+                        setUsername={setUsername}
+                        setUserId={setUserId}
+                        loggedIn={loggedIn}
+                        authLoading={authLoading}
+                        dbError={dbError}
+                        setDbError={setDbError}
+                        onAuthSuccess={onAuthSuccess}
+                    />
+                </div>
+            ) : (
+                <div className="absolute top-[66px] left-0 w-full h-[calc(100%-66px)] flex items-center justify-center">
+                    <div className="flex flex-row items-center justify-center gap-8 relative z-[10000]">
+                        <div className="flex flex-col items-center gap-6 w-[400px]">
                             <div
-                                className="my-2 text-center bg-muted/50 border-2 border-[#303032] rounded-lg p-4 w-full">
-                                <h3 className="text-lg font-semibold mb-2">Logged in!</h3>
-                                <p className="text-muted-foreground">
+                                className="text-center bg-[#18181b] border-2 border-[#303032] rounded-lg p-6 w-full shadow-lg">
+                                <h3 className="text-xl font-bold mb-3 text-white">Logged in!</h3>
+                                <p className="text-gray-300 leading-relaxed">
                                     You are logged in! Use the sidebar to access all available tools. To get started,
                                     create an SSH Host in the SSH Manager tab. Once created, you can connect to that
                                     host using the other apps in the sidebar.
                                 </p>
                             </div>
 
-                            <div className="flex flex-row items-center gap-2">
+                            <div className="flex flex-row items-center gap-3">
                                 <Button
-                                    variant="link"
-                                    className="text-sm"
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
                                     onClick={() => window.open('https://github.com/LukeGus/Termix', '_blank')}
                                 >
                                     GitHub
                                 </Button>
-                                <div className="w-px h-4 bg-border"></div>
+                                <div className="w-px h-4 bg-[#303032]"></div>
                                 <Button
-                                    variant="link"
-                                    className="text-sm"
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
                                     onClick={() => window.open('https://github.com/LukeGus/Termix/issues/new', '_blank')}
                                 >
                                     Feedback
                                 </Button>
-                                <div className="w-px h-4 bg-border"></div>
+                                <div className="w-px h-4 bg-[#303032]"></div>
                                 <Button
-                                    variant="link"
-                                    className="text-sm"
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
                                     onClick={() => window.open('https://discord.com/invite/jVQGdvHDrf', '_blank')}
                                 >
                                     Discord
                                 </Button>
-                                <div className="w-px h-4 bg-border"></div>
+                                <div className="w-px h-4 bg-[#303032]"></div>
                                 <Button
-                                    variant="link"
-                                    className="text-sm"
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-sm border-[#303032] text-gray-300 hover:text-white hover:bg-[#18181b] transition-colors"
                                     onClick={() => window.open('https://github.com/sponsors/LukeGus', '_blank')}
                                 >
                                     Donate
                                 </Button>
                             </div>
                         </div>
-                    )}
 
-                    <HomepageUpdateLog
-                        loggedIn={loggedIn}
-                    />
+                        <HomepageUpdateLog
+                            loggedIn={loggedIn}
+                        />
+                    </div>
                 </div>
-            </div>
+            )}
 
             <HomepageAlertManager
                 userId={userId}
diff --git a/src/ui/Homepage/HomepageAuth.tsx b/src/ui/Homepage/HomepageAuth.tsx
index 8cb5a221..8504e434 100644
--- a/src/ui/Homepage/HomepageAuth.tsx
+++ b/src/ui/Homepage/HomepageAuth.tsx
@@ -346,7 +346,7 @@ export function HomepageAuth({
 
     return (
         <div
-            className={`w-[420px] max-w-full p-6 flex flex-col ${className || ''}`}
+            className={`w-[420px] max-w-full p-6 flex flex-col bg-[#18181b] border-2 border-[#303032] rounded-md ${className || ''}`}
             {...props}
         >
             {dbError && (
@@ -686,4 +686,4 @@ export function HomepageAuth({
             )}
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/src/ui/Homepage/HompageUpdateLog.tsx b/src/ui/Homepage/HompageUpdateLog.tsx
index 908b1ae6..ad85aafd 100644
--- a/src/ui/Homepage/HompageUpdateLog.tsx
+++ b/src/ui/Homepage/HompageUpdateLog.tsx
@@ -89,70 +89,63 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) {
     };
 
     return (
-        <div className="w-[400px] h-[600px] flex flex-col border-2 border-border rounded-lg bg-card p-4">
+        <div className="w-[400px] h-[600px] flex flex-col border-2 border-[#303032] rounded-lg bg-[#18181b] p-4 shadow-lg">
             <div>
-                <h3 className="text-lg font-semibold mb-3">Updates & Releases</h3>
+                <h3 className="text-lg font-bold mb-3 text-white">Updates & Releases</h3>
 
-                <Separator className="p-0.25 mt-3 mb-3"/>
+                <Separator className="p-0.25 mt-3 mb-3 bg-[#303032]"/>
 
                 {versionInfo && versionInfo.status === 'requires_update' && (
-                    <Alert>
-                        <AlertTitle>Update Available</AlertTitle>
-                        <AlertDescription>
+                    <Alert className="bg-[#0e0e10] border-[#303032] text-white">
+                        <AlertTitle className="text-white">Update Available</AlertTitle>
+                        <AlertDescription className="text-gray-300">
                             A new version ({versionInfo.version}) is available.
-                            <Button
-                                variant="link"
-                                className="p-0 h-auto underline ml-1"
-                                onClick={() => window.open("https://docs.termix.site/docs", '_blank')}
-                            >
-                                Update now
-                            </Button>
                         </AlertDescription>
                     </Alert>
                 )}
             </div>
 
             {versionInfo && versionInfo.status === 'requires_update' && (
-                <Separator className="p-0.25 mt-3 mb-3"/>
+                <Separator className="p-0.25 mt-3 mb-3 bg-[#303032]"/>
             )}
 
-            <div className="flex-1 overflow-y-auto space-y-3">
+            <div className="flex-1 overflow-y-auto space-y-3 pr-2">
                 {loading && (
                     <div className="flex items-center justify-center h-32">
-                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                     </div>
                 )}
 
                 {error && (
-                    <Alert variant="destructive">
-                        <AlertTitle>Error</AlertTitle>
-                        <AlertDescription>{error}</AlertDescription>
+                    <Alert variant="destructive" className="bg-red-900/20 border-red-500 text-red-300">
+                        <AlertTitle className="text-red-300">Error</AlertTitle>
+                        <AlertDescription className="text-red-300">{error}</AlertDescription>
                     </Alert>
                 )}
 
                 {releases?.items.map((release) => (
                     <div
                         key={release.id}
-                        className="border border-border rounded-lg p-3 hover:bg-accent transition-colors cursor-pointer"
+                        className="border border-[#303032] rounded-lg p-3 hover:bg-[#0e0e10] transition-colors cursor-pointer bg-[#0e0e10]/50"
                         onClick={() => window.open(release.link, '_blank')}
                     >
                         <div className="flex items-start justify-between mb-2">
-                            <h4 className="font-medium text-sm leading-tight flex-1">
+                            <h4 className="font-semibold text-sm leading-tight flex-1 text-white">
                                 {release.title}
                             </h4>
                             {release.isPrerelease && (
                                 <span
-                                    className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded ml-2 flex-shrink-0">
+                                    className="text-xs bg-yellow-600 text-yellow-100 px-2 py-1 rounded ml-2 flex-shrink-0 font-medium">
                                     Pre-release
                                 </span>
                             )}
                         </div>
 
-                        <p className="text-xs text-muted-foreground mb-2 leading-relaxed">
+                        <p className="text-xs text-gray-300 mb-2 leading-relaxed">
                             {formatDescription(release.description)}
                         </p>
 
-                        <div className="flex items-center text-xs text-muted-foreground">
+                        <div className="flex items-center text-xs text-gray-400">
                             <span>{new Date(release.pubDate).toLocaleDateString()}</span>
                             {release.assets.length > 0 && (
                                 <>
@@ -165,9 +158,9 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) {
                 ))}
 
                 {releases && releases.items.length === 0 && !loading && (
-                    <Alert>
-                        <AlertTitle>No Releases</AlertTitle>
-                        <AlertDescription>
+                    <Alert className="bg-[#0e0e10] border-[#303032] text-gray-300">
+                        <AlertTitle className="text-gray-300">No Releases</AlertTitle>
+                        <AlertDescription className="text-gray-400">
                             No releases found.
                         </AlertDescription>
                     </Alert>