feat(ui): Improve login card design and theme customization

Refactor the `Button` component, add new `LoginCard` component, update `ThemePicker` component, edit global CSS styles to include card background and foreground and style the login page, including the logo and login form.

src/app/globals.css

@@ -39,6 +39,8 @@
   --active-secondary: oklch(0.4254 0.133 272.15);
   --disabled-secondary: oklch(0.4937 0.1697 271.26 / 0.5);
 
+  --card: var(--neutral-800);
+
   /* ------------------- */
 
   --foreground: oklch(0.13 0.028 261.692);
@@ -99,7 +101,7 @@
 }
 
 @theme inline {
-  --transparent: var(--transpatent);
+  --transparent: var(--transparent);
 
   --color-neutral-000: var(--neutral-000);
   --color-neutral-100: var(--neutral-100);
@@ -114,12 +116,12 @@
   --color-neutral-800: var(--neutral-800);
   --color-neutral-900: var(--neutral-900);
 
-  --background: var(--neutral-750);
-  --base: var(--neutral-800);
-  --text: var(--neutral-000);
-  --text-alt: var(--neutral-900);
-  --background-disabled: var(--neutral-500);
-  --text-disabled: var(--neutral-700);
+  --color-background: var(--neutral-750);
+  --color-base: var(--neutral-800);
+  --color-text: var(--text);
+  --color-text-alt: var(--text-alt);
+  --color-background-disabled: var(--neutral-500);
+  --color-text-disabled: var(--neutral-700);
   --radius: 0.688rem;
 
   --color-primary: var(--primary);
@@ -224,7 +226,7 @@
   --neutral-900: oklch(0 0 0);
 
   --background: var(--neutral-750);
-  --base: var(--neutral-800);
+  --base: var(--neutral-750);
   --text: var(--neutral-000);
   --text-alt: var(--neutral-900);
   --background-disabled: var(--neutral-500);
@@ -240,12 +242,12 @@
   --active-secondary: oklch(0.4471 0.15 271.61);
   --disabled-secondary: oklch(0.6065 0.213 271.11 / 0.4);
 
+  --card: var(--neutral-750);
+
   /* ------------------- */
 
   --foreground: oklch(0.985 0.002 247.839);
 
-  --card: oklch(0.21 0.034 264.665);
-
   --card-foreground: oklch(0.985 0.002 247.839);
 
   --popover: oklch(0.21 0.034 264.665);

src/app/login/page.tsx

@@ -2,13 +2,17 @@ import { auth, providerMap } from '@/auth';
 import SSOLogin from '@/components/user/sso-login-button';
 import LoginForm from '@/components/user/login-form';
 import { redirect } from 'next/navigation';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/custom-ui/button';
 import Image from 'next/image';
 import { Separator } from '@/components/custom-ui/separator';
 import Logo from '@/components/logo';
 
 import '@/app/globals.css';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from '@/components/custom-ui/login-card';
 import { ThemePicker } from '@/components/user/theme-picker';
 import {
   HoverCard,
@@ -30,14 +34,9 @@ export default async function LoginPage() {
           <ThemePicker />
         </div>
         <div>
-          <Card className='w-[350px] max-w-screen'>
-            <CardHeader>
-              <Logo
-                colorType='colored'
-                logoType='secondary'
-                width={200}
-                height={200}
-              ></Logo>
+          <Card className='w-[350px] max-w-screen;'>
+            <CardHeader className='grid place-items-center'>
+              <Logo colorType='colored' logoType='secondary'></Logo>
             </CardHeader>
             <CardContent className='gap-6 flex flex-col items-center'>
               <LoginForm />

src/app/logout/page.tsx

@@ -1,5 +1,5 @@
 import { signOut } from '@/auth';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/custom-ui/button';
 import {
   Card,
   CardContent,

src/app/settings/page.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/custom-ui/button';
 import {
   Card,
   CardContent,