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

@@ -96,16 +96,32 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Password
         </Label>
 
+        <div className="relative">
           <Input
             id="password"
-          type="password"
+            type={showPassword ? 'text' : 'password'}
             minLength={6}
             maxLength={72}
             autoComplete="new-password"
-          className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('password')}
           />
 
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
+
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
@@ -114,16 +130,32 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Repeat Password
         </Label>
 
+        <div className="relative">
           <Input
             id="repeated-password"
-          type="password"
+            type={showConfirmPassword ? 'text' : 'password'}
             minLength={6}
             maxLength={72}
             autoComplete="new-password"
-          className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('repeatedPassword')}
           />
 
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
+          >
+            {showConfirmPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
+
         <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
       </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';
 
@@ -128,16 +128,32 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           <span>Password</span>
         </Label>
 
+        <div className="relative">
           <Input
             id="password"
-          type="password"
+            type={showPassword ? 'text' : 'password'}
             minLength={6}
             maxLength={72}
             autoComplete="current-password"
-          className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('password')}
           />
 
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
+
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 

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

@@ -109,15 +109,31 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           Password
         </Label>
 
+        <div className="relative">
           <Input
             id="password"
-          type="password"
+            type={showPassword ? 'text' : 'password'}
             minLength={6}
             maxLength={72}
             autoComplete="new-password"
-          className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('password')}
           />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
       </div>
 
       <div>