Skip to content

Commit 29d2a60

Browse files
ameer2468ameer2468
committed
Merge branch 'ameers-work' into dev
2 parents de032bb + 5f8491a commit 29d2a60

File tree

15 files changed

+178
-277
lines changed

15 files changed

+178
-277
lines changed

‎apps/dashboard/app/(main)/settings/_components/account-deletion.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -93,35 +93,31 @@ export function AccountDeletion() {
9393

9494
return (
9595
<div>
96-
<div className="flex flex-col justify-between space-y-4 rounded-lg border border-red-900/20 bg-linear-to-r from-red-950/20 to-red-900/10 p-4 md:flex-row md:items-center md:space-x-6 md:space-y-0">
96+
<div className="flex flex-col justify-between space-y-4 rounded-lg border border-destructive/20 bg-destructive/10 p-4 md:flex-row md:items-center md:space-x-6 md:space-y-0">
9797
<div className="flex-1 space-y-2">
9898
<div className="flex items-center">
9999
<ShieldCheckIcon
100-
className="mr-2 h-5 w-5 text-red-500"
100+
className="mr-2 size-5 text-red-400"
101101
size={20}
102102
weight="fill"
103103
/>
104104
<h3 className="font-medium text-base text-red-400">
105105
Account Deletion
106106
</h3>
107107
</div>
108-
<p className="text-slate-700 text-sm">
108+
<p className="text-muted-foreground text-sm">
109109
Deleting your account will remove all your data and cannot be
110110
reversed after the grace period.
111111
</p>
112-
<div className="mt-1 hidden text-slate-600 text-xs italic md:block">
112+
<div className="mt-1 hidden text-muted-foreground text-xs italic md:block">
113113
A 30-day recovery window will be available before permanent
114114
deletion.
115115
</div>
116116
</div>
117117
<AlertDialog onOpenChange={setIsDialogOpen} open={isDialogOpen}>
118118
<AlertDialogTrigger asChild>
119-
<Button
120-
className="border border-red-800/50 bg-red-900/60 px-4 text-white hover:bg-red-800"
121-
size="sm"
122-
variant="destructive"
123-
>
124-
<TrashIcon className="mr-2 h-4 w-4" size={16} weight="duotone" />
119+
<Button size="sm" variant="destructive">
120+
<TrashIcon className="size-4" size={16} weight="duotone" />
125121
Delete Account
126122
</Button>
127123
</AlertDialogTrigger>

‎apps/dashboard/app/(main)/settings/_components/email-form.tsx‎

Lines changed: 50 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@ import {
77
EnvelopeSimpleIcon,
88
LockKeyIcon,
99
ShieldCheckIcon,
10-
SparkleIcon,
1110
WarningIcon,
1211
} from "@phosphor-icons/react";
1312
import { useState } from "react";
1413
import { useForm } from "react-hook-form";
1514
import { toast } from "sonner";
1615
import { z } from "zod";
17-
import { Alert, AlertDescription } from "@/components/ui/alert";
16+
import { NoticeBanner } from "@/app/(main)/websites/_components/notice-banner";
1817
import { Badge } from "@/components/ui/badge";
1918
import { Button } from "@/components/ui/button";
2019
import { Card, CardContent } from "@/components/ui/card";
@@ -76,32 +75,28 @@ export function EmailForm() {
7675
return (
7776
<div className="fade-in slide-in-from-bottom-2 animate-in space-y-6 duration-300">
7877
{/* Current Email Display */}
79-
<Card className="border-muted/50 bg-gradient-to-br from-muted/20 to-muted/5">
80-
<CardContent className="p-4">
81-
<div className="flex flex-col-reverse items-start justify-between gap-2 lg:flex-row">
78+
<Card className="bg-accent-brighter">
79+
<CardContent>
80+
<div className="flex flex-col-reverse items-center justify-between gap-2 lg:flex-row">
8281
<div className="flex items-center gap-3">
83-
<div className="flex h-10 w-10 items-center justify-center rounded-full border border-blue-500/20 bg-gradient-to-br from-blue-500/20 to-blue-600/5">
82+
<div className="flex size-10 items-center justify-center rounded-full border border-secondary-brightest bg-secondary-brighter">
8483
<EnvelopeSimpleIcon
85-
className="h-5 w-5 text-foreground"
84+
className="size-5 text-accent-foreground"
8685
size={20}
8786
weight="duotone"
8887
/>
8988
</div>
9089
<div>
9190
<p className="font-medium text-sm">Current Email</p>
92-
<p className="text-muted-foreground text-sm">
91+
<p className="text-[13px] text-muted-foreground">
9392
{session?.user?.email || "Not available"}
9493
</p>
9594
</div>
9695
</div>
9796
<div className="flex items-center gap-2">
9897
{session?.user?.emailVerified ? (
9998
<Badge className="text-xs" variant="secondary">
100-
<CheckCircleIcon
101-
className="mr-1 h-3 w-3"
102-
size={12}
103-
weight="fill"
104-
/>
99+
<CheckCircleIcon className="size-3" size={12} weight="fill" />
105100
Verified
106101
</Badge>
107102
) : (
@@ -123,18 +118,11 @@ export function EmailForm() {
123118
</Card>
124119

125120
{/* Security Notice */}
126-
<Alert className="border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/20">
127-
<ShieldCheckIcon
128-
className="h-4 w-4 text-muted-foreground"
129-
size={16}
130-
weight="duotone"
131-
/>
132-
<AlertDescription className="text-sm">
133-
<strong>Security Notice:</strong> Changing your email requires
134-
verification. You'll receive a confirmation link at your new email
135-
address.
136-
</AlertDescription>
137-
</Alert>
121+
<NoticeBanner
122+
description="Changing your email requires verification. You'll receive a confirmation link at your new email address."
123+
icon={<ShieldCheckIcon size={16} weight="duotone" />}
124+
title="Security Notice"
125+
/>
138126

139127
{/* Form */}
140128
<Form {...form}>
@@ -143,15 +131,18 @@ export function EmailForm() {
143131
control={form.control}
144132
name="newEmail"
145133
render={({ field }) => (
146-
<FormItem className="space-y-3">
134+
<FormItem className="gap-0">
147135
<FormLabel className="font-medium text-base">
148136
New Email Address
149137
</FormLabel>
138+
<FormDescription className="text-sm leading-relaxed">
139+
Change the email address you want to use for your account.
140+
</FormDescription>
150141
<FormControl>
151-
<div className="relative">
142+
<div className="relative mt-3">
152143
<Input
153144
className={cn(
154-
"pl-10 transition-all duration-200",
145+
"pl-9 transition-all duration-200",
155146
form.formState.errors.newEmail && "border-destructive"
156147
)}
157148
placeholder="Enter your new email address"
@@ -164,11 +155,6 @@ export function EmailForm() {
164155
/>
165156
</div>
166157
</FormControl>
167-
<FormDescription className="text-sm leading-relaxed">
168-
Enter the new email address you want to use for your account.
169-
You'll need to verify this email before the change takes
170-
effect.
171-
</FormDescription>
172158
<FormMessage />
173159
</FormItem>
174160
)}
@@ -178,15 +164,18 @@ export function EmailForm() {
178164
control={form.control}
179165
name="password"
180166
render={({ field }) => (
181-
<FormItem className="space-y-3">
167+
<FormItem className="gap-0">
182168
<FormLabel className="font-medium text-base">
183169
Current Password
184170
</FormLabel>
171+
<FormDescription className="text-sm leading-relaxed">
172+
Confirm your identity by entering your current password.
173+
</FormDescription>
185174
<FormControl>
186-
<div className="relative">
175+
<div className="relative mt-3">
187176
<Input
188177
className={cn(
189-
"pl-10 transition-all duration-200",
178+
"pl-9 transition-all duration-200",
190179
form.formState.errors.password && "border-destructive"
191180
)}
192181
placeholder="Enter your current password"
@@ -200,66 +189,39 @@ export function EmailForm() {
200189
/>
201190
</div>
202191
</FormControl>
203-
<FormDescription className="text-sm leading-relaxed">
204-
Confirm your identity by entering your current password.
205-
</FormDescription>
206192
<FormMessage />
207193
</FormItem>
208194
)}
209195
/>
210196

211197
{/* Action Button */}
212-
<div className="border-muted/50 border-t pt-4">
213-
<Button
214-
className="w-full transition-all duration-300 sm:w-auto sm:min-w-40"
215-
disabled={isLoading}
216-
type="submit"
217-
>
218-
{isLoading ? (
219-
<>
220-
<ArrowClockwiseIcon
221-
className="mr-2 h-4 w-4 animate-spin"
222-
size={16}
223-
weight="fill"
224-
/>
225-
Sending Request...
226-
</>
227-
) : (
228-
<>
229-
<EnvelopeSimpleIcon
230-
className="mr-2 h-4 w-4"
231-
size={16}
232-
weight="duotone"
233-
/>
234-
Update Email
235-
</>
236-
)}
237-
</Button>
238-
</div>
198+
<Button
199+
className="w-full transition-all duration-300 sm:w-fit"
200+
disabled={isLoading}
201+
type="submit"
202+
>
203+
{isLoading ? (
204+
<>
205+
<ArrowClockwiseIcon
206+
className="size-4 animate-spin"
207+
size={16}
208+
weight="fill"
209+
/>
210+
Sending Request...
211+
</>
212+
) : (
213+
<>
214+
<EnvelopeSimpleIcon
215+
className="size-4"
216+
size={16}
217+
weight="duotone"
218+
/>
219+
Update Email
220+
</>
221+
)}
222+
</Button>
239223
</form>
240224
</Form>
241-
242-
{/* Help Text */}
243-
<div className="rounded-lg border border-muted/50 bg-muted/30 p-4">
244-
<div className="flex items-start gap-3">
245-
<div className="rounded-md bg-primary/10 p-1">
246-
<SparkleIcon
247-
className="h-4 w-4 text-primary"
248-
size={16}
249-
weight="duotone"
250-
/>
251-
</div>
252-
<div className="text-sm">
253-
<p className="mb-1 font-medium">📧 Email Change Process</p>
254-
<ul className="space-y-1 text-muted-foreground leading-relaxed">
255-
<li>• A verification link will be sent to your new email</li>
256-
<li>• Click the link to confirm the email change</li>
257-
<li>• Your old email will remain active until verification</li>
258-
<li>• You'll be notified at both email addresses</li>
259-
</ul>
260-
</div>
261-
</div>
262-
</div>
263225
</div>
264226
);
265227
}

0 commit comments

Comments
 (0)