fix: update colors

This commit is contained in:
Mythie
2023-09-20 02:18:35 +00:00
parent 6778d2a0da
commit fbb8e887a8
8 changed files with 107 additions and 43 deletions

View File

@ -68,7 +68,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
{isLoading && ( {isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-white/50"> <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>
)} )}
</div> </div>

View File

@ -43,7 +43,7 @@ export default async function BillingSettingsPage() {
<div> <div>
<h3 className="text-lg font-medium">Billing</h3> <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{' '} Your subscription is{' '}
{subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}. {subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}.
{subscription?.periodEnd && ( {subscription?.periodEnd && (
@ -67,7 +67,7 @@ export default async function BillingSettingsPage() {
)} )}
{!billingPortalUrl && ( {!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 You do not currently have a customer record, this should not happen. Please contact
support for assistance. support for assistance.
</p> </p>

View File

@ -9,7 +9,7 @@ export default async function PasswordSettingsPage() {
<div> <div>
<h3 className="text-lg font-medium">Password</h3> <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" /> <hr className="my-4" />

View File

@ -9,7 +9,7 @@ export default async function ProfileSettingsPage() {
<div> <div>
<h3 className="text-lg font-medium">Profile</h3> <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" /> <hr className="my-4" />

View File

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

View File

@ -96,15 +96,31 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
Password Password
</Label> </Label>
<Input <div className="relative">
id="password" <Input
type="password" id="password"
minLength={6} type={showPassword ? 'text' : 'password'}
maxLength={72} minLength={6}
autoComplete="new-password" maxLength={72}
className="bg-background mt-2" autoComplete="new-password"
{...register('password')} 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} /> <FormErrorMessage className="mt-1.5" error={errors.password} />
</div> </div>
@ -114,15 +130,31 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
Repeat Password Repeat Password
</Label> </Label>
<Input <div className="relative">
id="repeated-password" <Input
type="password" id="repeated-password"
minLength={6} type={showConfirmPassword ? 'text' : 'password'}
maxLength={72} minLength={6}
autoComplete="new-password" maxLength={72}
className="bg-background mt-2" autoComplete="new-password"
{...register('repeatedPassword')} 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} /> <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
</div> </div>

View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
@ -128,15 +128,31 @@ export const SignInForm = ({ className }: SignInFormProps) => {
<span>Password</span> <span>Password</span>
</Label> </Label>
<Input <div className="relative">
id="password" <Input
type="password" id="password"
minLength={6} type={showPassword ? 'text' : 'password'}
maxLength={72} minLength={6}
autoComplete="current-password" maxLength={72}
className="bg-background mt-2" autoComplete="current-password"
{...register('password')} 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} /> <FormErrorMessage className="mt-1.5" error={errors.password} />
</div> </div>

View File

@ -109,15 +109,31 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
Password Password
</Label> </Label>
<Input <div className="relative">
id="password" <Input
type="password" id="password"
minLength={6} type={showPassword ? 'text' : 'password'}
maxLength={72} minLength={6}
autoComplete="new-password" maxLength={72}
className="bg-background mt-2" autoComplete="new-password"
{...register('password')} 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>
<div> <div>