Skip to content

Commit ea3ef0b

Browse files
ewceniza9009ewceniza9009
committed
fix: resolve login page text contrast and theme-aware inputs in light mode [skip cicd] [skip render]
1 parent ec8715a commit ea3ef0b

1 file changed

Lines changed: 15 additions & 15 deletions

File tree

‎emr-client/src/app/login/page.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function LoginPage() {
5555
};
5656

5757
return (
58-
<div className="min-h-screen flex bg-[var(--background)] text-slate-200 selection:bg-teal-500/30 selection:text-white relative overflow-hidden">
58+
<div className="min-h-screen flex bg-[var(--background)] text-[var(--text-secondary)] selection:bg-teal-500/30 selection:text-white relative overflow-hidden">
5959
{/* LEFT SIDE: FORM */}
60-
<div className="w-full lg:w-[45%] flex flex-col p-8 lg:p-24 relative z-20 bg-[var(--background)] shadow-[20px_0_50px_rgba(0,0,0,0.5)]">
60+
<div className="w-full lg:w-[45%] flex flex-col p-8 lg:p-24 relative z-20 bg-[var(--background)] shadow-[20px_0_50px_rgba(0,0,0,0.15)] dark:shadow-[20px_0_50px_rgba(0,0,0,0.5)] border-r border-[var(--divider-color)]">
6161
<div className="mb-auto">
62-
<button onClick={() => router.push("/")} className="flex items-center gap-2 text-slate-500 hover:text-white transition-colors text-xs font-bold mb-12">
62+
<button onClick={() => router.push("/")} className="flex items-center gap-2 text-slate-500 hover:text-[var(--text-primary)] transition-colors text-xs font-bold mb-12">
6363
<ArrowLeft className="w-4 h-4" />
6464
Back to Home
6565
</button>
@@ -69,14 +69,14 @@ export default function LoginPage() {
6969
<Activity className="w-6 h-6 text-white" />
7070
</div>
7171
<div className="flex flex-col">
72-
<h1 className="text-2xl font-black text-white tracking-tight leading-none uppercase">HALKYONE</h1>
72+
<h1 className="text-2xl font-black text-[var(--text-primary)] tracking-tight leading-none uppercase">HALKYONE</h1>
7373
<span className="text-[10px] font-bold text-teal-400 uppercase tracking-[0.2em] mt-1">Clinical OS</span>
7474
</div>
7575
</div>
7676

7777
<div className="space-y-2 mb-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
78-
<h2 className="text-4xl font-bold text-white tracking-tight">Welcome back</h2>
79-
<p className="text-slate-400 text-sm font-medium">Enter your credentials to access your clinical workspace.</p>
78+
<h2 className="text-4xl font-bold text-[var(--text-primary)] tracking-tight">Welcome back</h2>
79+
<p className="text-[var(--text-muted)] text-sm font-medium">Enter your credentials to access your clinical workspace.</p>
8080
</div>
8181

8282
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 max-w-sm animate-in fade-in slide-in-from-bottom-8 duration-700 delay-150">
@@ -88,13 +88,13 @@ export default function LoginPage() {
8888
)}
8989

9090
<div className="space-y-2">
91-
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Email address</label>
91+
<label className="text-[10px] font-black text-[var(--text-muted)] uppercase tracking-widest ml-1">Email address</label>
9292
<div className="relative group">
9393
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 group-focus-within:text-[var(--primary)] transition-colors z-10" />
9494
<input
9595
{...register("email")}
9696
type="email"
97-
className="w-full bg-white/[0.02] backdrop-blur-md border border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm font-bold text-white focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-transparent focus:bg-white/[0.05] transition-all placeholder:text-slate-600 hover:border-white/20 shadow-inner"
97+
className="w-full bg-[var(--input-bg)] border border-slate-300 dark:border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm font-bold text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-transparent focus:bg-[var(--input-bg)] transition-all placeholder:text-slate-400 dark:placeholder:text-slate-600 hover:border-slate-400 dark:hover:border-white/20 shadow-inner"
9898
placeholder="name@halkyone.clinical"
9999
/>
100100
</div>
@@ -103,15 +103,15 @@ export default function LoginPage() {
103103

104104
<div className="space-y-2">
105105
<div className="flex items-center justify-between px-1">
106-
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Password</label>
106+
<label className="text-[10px] font-black text-[var(--text-muted)] uppercase tracking-widest">Password</label>
107107
<button type="button" className="text-[10px] font-black text-[var(--primary)] uppercase tracking-widest hover:text-emerald-400 transition-colors">Forgot?</button>
108108
</div>
109109
<div className="relative group">
110110
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 group-focus-within:text-[var(--primary)] transition-colors z-10" />
111111
<input
112112
{...register("password")}
113113
type="password"
114-
className="w-full bg-white/[0.02] backdrop-blur-md border border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm font-bold text-white focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-transparent focus:bg-white/[0.05] transition-all placeholder:text-slate-600 hover:border-white/20 shadow-inner"
114+
className="w-full bg-[var(--input-bg)] border border-slate-300 dark:border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm font-bold text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-transparent focus:bg-[var(--input-bg)] transition-all placeholder:text-slate-400 dark:placeholder:text-slate-600 hover:border-slate-400 dark:hover:border-white/20 shadow-inner"
115115
placeholder="••••••••"
116116
/>
117117
</div>
@@ -157,7 +157,7 @@ export default function LoginPage() {
157157
</div>
158158

159159
{/* RIGHT SIDE: HERO CONTENT */}
160-
<div className="hidden lg:flex flex-1 relative bg-[var(--background)] items-center justify-center overflow-hidden">
160+
<div className="hidden lg:flex flex-1 relative bg-[#020408] items-center justify-center overflow-hidden">
161161
{/* Animated Mesh Background */}
162162
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
163163
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-20 mix-blend-overlay" />
@@ -169,11 +169,11 @@ export default function LoginPage() {
169169
{/* Floating UI Widget - Live Sync */}
170170
{/* Floating UI Widget - Pinned to absolute top right */}
171171
<div className="absolute top-12 right-12 z-20 animate-in slide-in-from-right duration-1000 delay-300 group">
172-
<div className="bg-[var(--card-bg)]/80 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] flex flex-col gap-4 w-72 transform group-hover:-translate-y-2 group-hover:shadow-[0_30px_60px_rgba(0,0,0,0.6)] transition-all duration-500 relative overflow-hidden">
172+
<div className="bg-[#0a0c12]/80 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] flex flex-col gap-4 w-72 transform group-hover:-translate-y-2 group-hover:shadow-[0_30px_60px_rgba(0,0,0,0.6)] transition-all duration-500 relative overflow-hidden">
173173
<div className="absolute inset-0 bg-gradient-to-br from-teal-500/10 to-transparent pointer-events-none" />
174174

175175
<div className="flex items-center gap-4 relative z-10">
176-
<div className="w-12 h-12 rounded-2xl bg-[var(--card-bg)] border border-white/10 flex items-center justify-center shadow-inner relative overflow-hidden">
176+
<div className="w-12 h-12 rounded-2xl bg-[#0a0c12] border border-white/10 flex items-center justify-center shadow-inner relative overflow-hidden">
177177
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-transparent" />
178178
<TrendingUp className="w-5 h-5 text-emerald-400 relative z-10" />
179179
</div>
@@ -198,7 +198,7 @@ export default function LoginPage() {
198198
</blockquote>
199199

200200
<div className="flex items-center gap-5 pt-4">
201-
<div className="w-14 h-14 rounded-full bg-[var(--card-bg)] border border-white/10 flex items-center justify-center text-sm font-black text-white shadow-xl relative overflow-hidden">
201+
<div className="w-14 h-14 rounded-full bg-[#0a0c12] border border-white/10 flex items-center justify-center text-sm font-black text-white shadow-xl relative overflow-hidden">
202202
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-transparent" />
203203
SC
204204
</div>
@@ -211,7 +211,7 @@ export default function LoginPage() {
211211
</div>
212212

213213
{/* Decorative Glass Overlay */}
214-
<div className="absolute inset-0 bg-gradient-to-br from-[var(--background)]/50 to-transparent pointer-events-none" />
214+
<div className="absolute inset-0 bg-gradient-to-br from-[#020408]/50 to-transparent pointer-events-none" />
215215
</div>
216216
</div>
217217

0 commit comments

Comments
 (0)