fix: update colors

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -68,7 +68,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-12 w-12 animate-spin text-slate-500" />
+          <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
         </div>
       )}
     </div>

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -43,7 +43,7 @@ export default async function BillingSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Billing</h3>
 
-      <p className="mt-2 text-sm text-slate-500">
+      <p className="text-muted-foreground mt-2 text-sm">
         Your subscription is{' '}
         {subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}.
         {subscription?.periodEnd && (
@@ -67,7 +67,7 @@ export default async function BillingSettingsPage() {
       )}
 
       {!billingPortalUrl && (
-        <p className="max-w-[60ch] text-base text-slate-500">
+        <p className="text-muted-foreground max-w-[60ch] text-base">
           You do not currently have a customer record, this should not happen. Please contact
           support for assistance.
         </p>

apps/web/src/app/(dashboard)/settings/password/page.tsx

@@ -9,7 +9,7 @@ export default async function PasswordSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Password</h3>
 
-      <p className="mt-2 text-sm text-slate-500">Here you can update your password.</p>
+      <p className="text-muted-foreground mt-2 text-sm">Here you can update your password.</p>
 
       <hr className="my-4" />
 

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -9,7 +9,7 @@ export default async function ProfileSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Profile</h3>
 
-      <p className="mt-2 text-sm text-slate-500">Here you can edit your personal details.</p>
+      <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
 
       <hr className="my-4" />
 

apps/web/src/components/(dashboard)/period-selector/period-selector.tsx

@@ -44,7 +44,7 @@ export const PeriodSelector = () => {
 
   return (
     <Select defaultValue={period} onValueChange={onPeriodChange}>
-      <SelectTrigger className="max-w-[200px] text-slate-500">
+      <SelectTrigger className="text-muted-foreground max-w-[200px]">
         <SelectValue />
       </SelectTrigger>
 

apps/web/src/components/forms/password.tsx

@@ -115,9 +115,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>
@@ -149,9 +149,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
           >
             {showConfirmPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>

apps/web/src/components/forms/signin.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 
@@ -148,9 +148,9 @@ export const SignInForm = ({ className }: SignInFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>

apps/web/src/components/forms/signup.tsx

@@ -128,9 +128,9 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>