Skip to content

Commit f11ea80

Browse files
mjohnson518mjohnson518
committed
Updt frontend
1 parent 7b1897e commit f11ea80

9 files changed

Lines changed: 258 additions & 121 deletions

File tree

‎meridian-frontend/app/portal/dashboard/page.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ function DashboardContent() {
5151
{user.kycStatus !== KYCStatus.APPROVED && (
5252
<motion.div
5353
variants={itemVariants}
54-
className="mb-8 p-4 rounded-2xl bg-amber-500/10 border border-amber-500/30"
54+
className="mb-8 p-4 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30"
5555
>
5656
<div className="flex items-center justify-between">
5757
<div>
58-
<h3 className="font-mono text-sm uppercase tracking-wider text-amber-400 mb-1">
58+
<h3 className="font-mono text-sm uppercase tracking-wider text-amber-600 dark:text-amber-400 mb-1">
5959
KYC Verification Required
6060
</h3>
61-
<p className="text-xs text-amber-300/70">
61+
<p className="text-xs text-amber-700/70 dark:text-amber-300/70">
6262
{user.kycStatus === KYCStatus.NOT_STARTED &&
6363
'Complete KYC verification to access mint/burn operations.'}
6464
{user.kycStatus === KYCStatus.IN_PROGRESS &&
@@ -83,11 +83,11 @@ function DashboardContent() {
8383
{/* Welcome Section */}
8484
<motion.div variants={itemVariants} className="mb-8">
8585
<h1 className="text-4xl font-heading font-bold mb-2">
86-
<span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
86+
<span className="bg-gradient-to-r from-gray-900 via-gray-700 to-gray-500 dark:from-white dark:via-gray-200 dark:to-gray-400 bg-clip-text text-transparent">
8787
Welcome back, {user.email.split('@')[0]}
8888
</span>
8989
</h1>
90-
<p className="text-gray-500">
90+
<p className="text-gray-600 dark:text-gray-500">
9191
Manage your multi-currency stablecoin operations
9292
</p>
9393
</motion.div>
@@ -198,30 +198,30 @@ function DashboardContent() {
198198
<PortalCard header="Account Information" hoverEffect={false}>
199199
<div className="space-y-4">
200200
<div>
201-
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 block mb-1">
201+
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 dark:text-gray-500 block mb-1">
202202
Organization
203203
</span>
204-
<span className="text-sm text-white">{user.organization}</span>
204+
<span className="text-sm text-gray-900 dark:text-white">{user.organization}</span>
205205
</div>
206206
<div>
207-
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 block mb-1">
207+
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 dark:text-gray-500 block mb-1">
208208
Role
209209
</span>
210-
<span className="text-sm text-white">{user.role}</span>
210+
<span className="text-sm text-gray-900 dark:text-white">{user.role}</span>
211211
</div>
212212
<div>
213-
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 block mb-1">
213+
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 dark:text-gray-500 block mb-1">
214214
Wallet Address
215215
</span>
216-
<span className="text-xs font-mono text-gray-400 break-all">
216+
<span className="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
217217
{user.walletAddress || 'Not connected'}
218218
</span>
219219
</div>
220220
<div>
221-
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 block mb-1">
221+
<span className="text-xs font-mono uppercase tracking-wider text-gray-500 dark:text-gray-500 block mb-1">
222222
Member Since
223223
</span>
224-
<span className="text-sm text-white">
224+
<span className="text-sm text-gray-900 dark:text-white">
225225
{new Date(user.createdAt).toLocaleDateString()}
226226
</span>
227227
</div>

‎meridian-frontend/app/portal/layout.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ export default function PortalLayout({
1010
}) {
1111
return (
1212
<AuthProvider>
13-
<div className="min-h-screen bg-[#050608] text-white">
14-
{/* Subtle grid background overlay */}
13+
<div className="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white transition-colors duration-300">
14+
{/* Subtle grid background overlay - dark mode only */}
1515
<div
16-
className="fixed inset-0 pointer-events-none opacity-30"
16+
className="fixed inset-0 pointer-events-none opacity-30 hidden dark:block"
1717
style={{
1818
backgroundImage: `
1919
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
@@ -24,6 +24,19 @@ export default function PortalLayout({
2424
WebkitMaskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)',
2525
}}
2626
/>
27+
{/* Light mode subtle pattern */}
28+
<div
29+
className="fixed inset-0 pointer-events-none opacity-50 dark:hidden"
30+
style={{
31+
backgroundImage: `
32+
linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
33+
linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px)
34+
`,
35+
backgroundSize: '24px 24px',
36+
maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)',
37+
WebkitMaskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)',
38+
}}
39+
/>
2740
{/* Content */}
2841
<div className="relative z-10">
2942
{children}

‎meridian-frontend/app/portal/login/page.tsx‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,33 @@ const itemVariants = {
3939

4040
const inputClasses = cn(
4141
"w-full px-4 py-3 rounded-xl font-mono text-sm",
42-
"bg-white/[0.08] border border-white/30",
43-
"text-white placeholder-gray-300",
44-
"focus:outline-none focus:border-emerald-500/60 focus:ring-2 focus:ring-emerald-500/30",
42+
// Light mode
43+
"bg-gray-50 border-gray-300",
44+
// Dark mode - solid dark background for visibility
45+
"dark:bg-gray-800/90 dark:border-gray-600",
46+
"border",
47+
// Text colors
48+
"text-gray-900 dark:text-white",
49+
"placeholder-gray-500 dark:placeholder-gray-400",
50+
// Focus states
51+
"focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/30",
52+
"dark:focus:border-emerald-500/60 dark:focus:ring-emerald-500/20",
4553
"transition-all duration-200"
4654
);
4755

4856
const inputErrorClasses = cn(
4957
"w-full px-4 py-3 rounded-xl font-mono text-sm",
50-
"bg-red-500/15 border border-red-500/50",
51-
"text-white placeholder-gray-300",
52-
"focus:outline-none focus:border-red-500/60 focus:ring-2 focus:ring-red-500/30",
58+
// Light mode
59+
"bg-red-50 border-red-400",
60+
// Dark mode
61+
"dark:bg-red-500/15 dark:border-red-500/50",
62+
"border",
63+
// Text colors
64+
"text-gray-900 dark:text-white",
65+
"placeholder-gray-500 dark:placeholder-gray-400",
66+
// Focus states
67+
"focus:outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/30",
68+
"dark:focus:border-red-500/60 dark:focus:ring-red-500/20",
5369
"transition-all duration-200"
5470
);
5571

@@ -89,19 +105,28 @@ export default function LoginPage() {
89105
};
90106

91107
return (
92-
<div className="min-h-screen flex items-center justify-center bg-[#050608] relative overflow-hidden">
93-
{/* Background Grid */}
108+
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 relative overflow-hidden transition-colors duration-300">
109+
{/* Background Grid - Dark mode */}
94110
<div
95-
className="fixed inset-0 pointer-events-none opacity-30"
111+
className="fixed inset-0 pointer-events-none opacity-30 hidden dark:block"
96112
style={{
97113
backgroundImage: `linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)`,
98114
backgroundSize: '24px 24px',
99115
maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)',
100116
}}
101117
/>
118+
{/* Background Grid - Light mode */}
119+
<div
120+
className="fixed inset-0 pointer-events-none opacity-50 dark:hidden"
121+
style={{
122+
backgroundImage: `linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px)`,
123+
backgroundSize: '24px 24px',
124+
maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)',
125+
}}
126+
/>
102127

103128
{/* Decorative glow */}
104-
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-emerald-500/10 rounded-full blur-[120px] pointer-events-none" />
129+
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-emerald-500/5 dark:bg-emerald-500/10 rounded-full blur-[120px] pointer-events-none" />
105130

106131
<motion.div
107132
className="w-full max-w-md px-6 relative z-10"
@@ -116,7 +141,7 @@ export default function LoginPage() {
116141
MERIDIAN
117142
</span>
118143
</h1>
119-
<p className="text-xs text-gray-500 font-mono uppercase tracking-[0.3em]">
144+
<p className="text-xs text-gray-500 dark:text-gray-500 font-mono uppercase tracking-[0.3em]">
120145
Institutional Portal
121146
</p>
122147
</motion.div>
@@ -129,7 +154,7 @@ export default function LoginPage() {
129154
<div>
130155
<label
131156
htmlFor="email"
132-
className="text-xs font-mono uppercase tracking-wider text-gray-400 block mb-2"
157+
className="text-xs font-mono uppercase tracking-wider text-gray-600 dark:text-gray-400 block mb-2"
133158
>
134159
Email Address
135160
</label>
@@ -158,7 +183,7 @@ export default function LoginPage() {
158183
<div>
159184
<label
160185
htmlFor="password"
161-
className="text-xs font-mono uppercase tracking-wider text-gray-400 block mb-2"
186+
className="text-xs font-mono uppercase tracking-wider text-gray-600 dark:text-gray-400 block mb-2"
162187
>
163188
Password
164189
</label>
@@ -188,10 +213,10 @@ export default function LoginPage() {
188213
<motion.div
189214
initial={{ opacity: 0, y: -10 }}
190215
animate={{ opacity: 1, y: 0 }}
191-
className="p-4 rounded-xl bg-red-500/10 border border-red-500/30"
216+
className="p-4 rounded-xl bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30"
192217
role="alert"
193218
>
194-
<p className="text-xs font-mono text-red-400">{error}</p>
219+
<p className="text-xs font-mono text-red-600 dark:text-red-400">{error}</p>
195220
</motion.div>
196221
)}
197222

@@ -214,12 +239,12 @@ export default function LoginPage() {
214239
</form>
215240

216241
{/* Register Link */}
217-
<div className="mt-6 pt-6 border-t border-white/5">
218-
<p className="text-xs text-gray-500 text-center font-mono">
242+
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700/50">
243+
<p className="text-xs text-gray-500 dark:text-gray-500 text-center font-mono">
219244
Don't have an account?{' '}
220245
<a
221246
href="/portal/register"
222-
className="text-emerald-400 hover:text-emerald-300 transition-colors"
247+
className="text-emerald-600 dark:text-emerald-400 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors"
223248
>
224249
Register
225250
</a>
@@ -253,7 +278,7 @@ export default function LoginPage() {
253278
<motion.div variants={itemVariants} className="mt-6 text-center">
254279
<a
255280
href="/"
256-
className="text-xs font-mono text-gray-600 hover:text-gray-400 transition-colors"
281+
className="text-xs font-mono text-gray-500 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-400 transition-colors"
257282
>
258283
← Back to Home
259284
</a>

‎meridian-frontend/components/portal/PortalButton.tsx‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -57,37 +57,54 @@ export function PortalButton({
5757
"inline-flex items-center justify-center gap-2",
5858
"font-medium rounded-full",
5959
"transition-all duration-200",
60-
"focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#050608]",
60+
"focus:outline-none focus:ring-2 focus:ring-offset-2",
61+
"focus:ring-offset-white dark:focus:ring-offset-gray-950",
6162
"disabled:opacity-50 disabled:cursor-not-allowed"
6263
);
6364

6465
const variantClasses = {
6566
primary: cn(
6667
"bg-gradient-to-r from-emerald-500 to-teal-500 text-white",
67-
"shadow-[0_0_20px_-5px_rgba(16,185,129,0.5)]",
68-
"hover:shadow-[0_0_30px_-5px_rgba(16,185,129,0.6)]",
68+
"shadow-lg shadow-emerald-500/25",
69+
"hover:shadow-xl hover:shadow-emerald-500/30",
70+
"dark:shadow-[0_0_20px_-5px_rgba(16,185,129,0.5)]",
71+
"dark:hover:shadow-[0_0_30px_-5px_rgba(16,185,129,0.6)]",
6972
"focus:ring-emerald-500"
7073
),
7174
secondary: cn(
72-
"bg-white/5 text-white border border-white/10",
73-
"hover:bg-white/10 hover:border-emerald-500/30",
75+
// Light mode: visible gray background
76+
"bg-gray-100 text-gray-700 border border-gray-200",
77+
"hover:bg-gray-200 hover:border-emerald-500/30",
78+
// Dark mode: solid dark background for visibility
79+
"dark:bg-gray-800/80 dark:text-white dark:border-gray-700",
80+
"dark:hover:bg-gray-700/80 dark:hover:border-emerald-500/30",
7481
"focus:ring-emerald-500"
7582
),
7683
outline: cn(
77-
"bg-transparent text-white border border-white/20",
78-
"hover:bg-white/5 hover:border-emerald-400/50",
79-
"hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)]",
84+
// Light mode
85+
"bg-transparent text-gray-700 border border-gray-300",
86+
"hover:bg-gray-50 hover:border-emerald-500/50",
87+
// Dark mode: more visible border
88+
"dark:text-white dark:border-gray-600",
89+
"dark:hover:bg-gray-800/50 dark:hover:border-emerald-400/50",
90+
"dark:hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)]",
8091
"focus:ring-emerald-500"
8192
),
8293
ghost: cn(
83-
"bg-transparent text-gray-400",
84-
"hover:bg-white/5 hover:text-white",
94+
// Light mode
95+
"bg-transparent text-gray-600",
96+
"hover:bg-gray-100 hover:text-gray-900",
97+
// Dark mode
98+
"dark:text-gray-400",
99+
"dark:hover:bg-gray-800/50 dark:hover:text-white",
85100
"focus:ring-gray-500"
86101
),
87102
danger: cn(
88103
"bg-gradient-to-r from-red-500 to-rose-500 text-white",
89-
"shadow-[0_0_20px_-5px_rgba(239,68,68,0.5)]",
90-
"hover:shadow-[0_0_30px_-5px_rgba(239,68,68,0.6)]",
104+
"shadow-lg shadow-red-500/25",
105+
"hover:shadow-xl hover:shadow-red-500/30",
106+
"dark:shadow-[0_0_20px_-5px_rgba(239,68,68,0.5)]",
107+
"dark:hover:shadow-[0_0_30px_-5px_rgba(239,68,68,0.6)]",
91108
"focus:ring-red-500"
92109
),
93110
};

‎meridian-frontend/components/portal/PortalCard.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,33 +36,37 @@ export function PortalCard({
3636
<motion.div
3737
className={cn(
3838
"relative overflow-hidden rounded-2xl",
39-
"bg-white/[0.05] backdrop-blur-xl",
40-
"border border-white/20",
39+
// Light mode: white bg, gray border
40+
"bg-white border-gray-200",
41+
// Dark mode: solid dark bg for visibility
42+
"dark:bg-gray-900/90 dark:border-gray-700/50",
43+
"border backdrop-blur-sm",
4144
"transition-all duration-300 ease-out",
4245
hoverEffect && [
43-
"hover:border-emerald-500/30",
44-
"hover:bg-white/[0.08]",
45-
"hover:shadow-[0_0_30px_-10px_rgba(16,185,129,0.2)]",
46+
"hover:border-emerald-500/40",
47+
"hover:shadow-lg",
48+
"dark:hover:bg-gray-900",
49+
"dark:hover:shadow-[0_0_30px_-10px_rgba(16,185,129,0.3)]",
4650
],
4751
className
4852
)}
4953
whileHover={hoverEffect ? { y: -2 } : undefined}
5054
transition={{ duration: 0.2 }}
5155
{...props}
5256
>
53-
{/* Subtle gradient overlay */}
54-
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent pointer-events-none" />
57+
{/* Subtle gradient overlay - only in dark mode */}
58+
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none dark:block hidden" />
5559

5660
{/* Content */}
5761
<div className="relative z-10">
5862
{header && (
5963
<div className={cn(
6064
"flex items-center justify-between",
61-
"border-b border-white/5",
65+
"border-b border-gray-100 dark:border-gray-700/50",
6266
padding !== 'none' ? paddingClasses[padding] : 'p-6',
6367
"pb-4"
6468
)}>
65-
<h3 className="text-sm font-mono uppercase tracking-wider text-gray-300">
69+
<h3 className="text-sm font-mono uppercase tracking-wider text-gray-600 dark:text-gray-300">
6670
{header}
6771
</h3>
6872
{headerAction}
@@ -91,24 +95,27 @@ export function PortalCardStatic({
9195
<div
9296
className={cn(
9397
"relative overflow-hidden rounded-2xl",
94-
"bg-white/[0.05] backdrop-blur-xl",
95-
"border border-white/20",
98+
// Light mode: white bg, gray border
99+
"bg-white border-gray-200",
100+
// Dark mode: solid dark bg for visibility
101+
"dark:bg-gray-900/90 dark:border-gray-700/50",
102+
"border backdrop-blur-sm",
96103
className
97104
)}
98105
>
99-
{/* Subtle gradient overlay */}
100-
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent pointer-events-none" />
106+
{/* Subtle gradient overlay - only in dark mode */}
107+
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none dark:block hidden" />
101108

102109
{/* Content */}
103110
<div className="relative z-10">
104111
{header && (
105112
<div className={cn(
106113
"flex items-center justify-between",
107-
"border-b border-white/5",
114+
"border-b border-gray-100 dark:border-gray-700/50",
108115
padding !== 'none' ? paddingClasses[padding] : 'p-6',
109116
"pb-4"
110117
)}>
111-
<h3 className="text-sm font-mono uppercase tracking-wider text-gray-300">
118+
<h3 className="text-sm font-mono uppercase tracking-wider text-gray-600 dark:text-gray-300">
112119
{header}
113120
</h3>
114121
{headerAction}

0 commit comments

Comments
 (0)