refactor: restyle button according to figma and change login button variant to primary

src/components/ui/button.tsx

@@ -5,21 +5,21 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default:
+        primary:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+          'bg-primary text-text shadow-xs hover:bg-hover-primary active:bg-active-primary',
+        secondary:
+          'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary',
+        outline:
+          'border-2 border-primary bg-transparent text-text shadow-xs hover:bg-primary hover:border-neutral-000 hover:border-1.5 hover:text-neutral-000 active:bg-active-primary',
         destructive:
           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-text underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
@@ -29,7 +29,7 @@ const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'primary',
       size: 'default',
     },
   },

src/components/user/login-form.tsx

@@ -34,11 +34,7 @@ export default function LoginForm() {
         placeholder="Let's hope you remember it."
         name='password'
       />
-      <Button
+      <Button type='submit' variant='primary'>
-        className='hover:bg-blue-600 hover:text-white'
-        type='submit'
-        variant='secondary'
-      >
         Login
       </Button>
     </form>

src/components/user/sso-login-button.tsx

@@ -1,6 +1,6 @@
 import { signIn } from '@/auth';
-import { Button } from '@/components/ui/button';
+import { IconButton } from '@/components/icon-button';
-import { Fingerprint } from 'lucide-react';
+import { faOpenid } from '@fortawesome/free-brands-svg-icons';
 
 export default function SSOLogin({
   provider,
@@ -17,19 +17,15 @@ export default function SSOLogin({
         await signIn(provider);
       }}
     >
-      <Button
+      <IconButton
-        className='w-full flex items-center'
+        className='w-full'
         type='submit'
-        variant='default'
+        variant='secondary'
+        icon={faOpenid}
+        icon={faOpenid}
       >
-        <div className='flex justify-center'>
-          <Fingerprint />
-        </div>
-
-        <div className='flex justify-center'>
         Login with {providerDisplayName}
-        </div>
+      </IconButton>
-      </Button>
     </form>
   );
 }