feat: added button styling and updated login layout

src/app/globals.css

@@ -1,12 +1,32 @@
 :root {
   --background: #ffffff;
-  --foreground: #171717;
+  --foreground: #3a3a3a;
+
+  --neutral: #808080;
+
+  --primary-50: rgba(59, 130, 246, 0.5);
+  --primary-75: rgba(59, 130, 246, 0.75);
+  --primary-100: rgba(59, 130, 246, 1);
+
+  --warning-50: rgba(245, 158, 11, 0.5);
+  --warning-75: rgba(245, 158, 11, 0.75);
+  --warning-100: rgba(245, 158, 11, 1);
+
+  --success-50: rgba(22, 163, 74, 0.5);
+  --success-75: rgba(22, 163, 74, 0.75);
+  --success-100: rgba(22, 163, 74, 1);
+
+  --danger-50: rgba(220, 38, 38, 0.5);
+  --danger-75: rgba(220, 38, 38, 0.75);
+  --danger-100: rgba(220, 38, 38, 1);
+
+  --button-text-size: 18px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
-    --foreground: #ededed;
+    --foreground: #e5e7eb;
   }
 }
 

src/app/login/page.tsx

@@ -1,20 +1,18 @@
 import { auth } from '@/auth';
-import SignIn from '@/components/user/signin-button';
-import { SignOut } from '@/components/user/signout-button';
+import Login from '@/components/user/login-button';
+import { redirect } from 'next/navigation';
 
-export default async function Login() {
+export default async function LoginPage() {
   const session = await auth();
+
+  if (session?.user) {
+    redirect('/');
+  }
+
   return (
     <div>
       <h1>Login</h1>
-      {!session?.user ? (
-        <SignIn></SignIn>
-      ) : (
-        <>
-          <h2>Hallo {session.user.name}</h2>
-          <SignOut></SignOut>
-        </>
-      )}
+      <Login provider='authentik' providerDisplayName='SSO' />
     </div>
   );
 }