From 6f0e86007eb53392b43cb8ece72e8f6a35d946d8 Mon Sep 17 00:00:00 2001
From: suryac <surya.c@getzino.com>
Date: Mon, 3 Aug 2026 16:01:49 +0530
Subject: [PATCH] side bar tweak

---
 src/components/cards/DailyLogCard.tsx |  4 ++--
 src/screens/ConsoleLayout.tsx         | 18 +++++++++++-------
 src/screens/LoginPage.tsx             |  4 ++--
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/cards/DailyLogCard.tsx b/src/components/cards/DailyLogCard.tsx
index b123b2c..7171281 100644
--- a/src/components/cards/DailyLogCard.tsx
+++ b/src/components/cards/DailyLogCard.tsx
@@ -111,8 +111,8 @@ export function DailyLogCard({ row, onPunchOut, isDetailView = false }: { row: R
             </div>
           ) : (
             <>
-              <UserIcon size={16} className="text-strong" />
-              <span className="text-strong">{userName}</span>
+              <UserIcon size={18} className="text-primary" />
+              <span className="text-primary font-bold text-[17px]">{userName}</span>
             </>
           )}
         </div>
diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index 490973b..6daa913 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -178,13 +178,17 @@ export function ConsoleLayout() {
 
         <div className="p-4 border-t border-border-subtle shrink-0 flex flex-col gap-3 mb-[env(safe-area-inset-bottom)]">
           {user && (
-            <div className="flex flex-col px-1">
-
-              <span className="text-sm font-medium text-foreground truncate">{user.name || 'User'}</span>
-              <span className="text-xs text-foreground/70 truncate">{user.email || 'user@email.com'}</span>
-              {userRoles && userRoles.length > 0 && (
-                <span className="text-xs font-semibold text-primary mt-0.5 truncate">{userRoles.join(', ')}</span>
-              )}
+            <div className="flex items-center gap-3 px-1 py-2">
+              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-lg shadow-sm border border-primary/20">
+                {(user.name || 'U').charAt(0).toUpperCase()}
+              </div>
+              <div className="flex flex-col min-w-0">
+                <span className="text-sm font-bold text-foreground truncate">{user.name || 'User'}</span>
+                <span className="text-xs text-foreground/70 truncate">{user.email || 'user@email.com'}</span>
+                {userRoles && userRoles.length > 0 && (
+                  <span className="text-[10px] uppercase tracking-wider font-bold text-primary mt-0.5 truncate">{userRoles.join(', ')}</span>
+                )}
+              </div>
             </div>
           )}
           <button
diff --git a/src/screens/LoginPage.tsx b/src/screens/LoginPage.tsx
index 7cb8d73..118657c 100644
--- a/src/screens/LoginPage.tsx
+++ b/src/screens/LoginPage.tsx
@@ -41,12 +41,12 @@ export function LoginPage() {
           <label className="flex flex-col gap-1.5 font-sans">
              <span className="text-sm font-semibold text-emerald-800">Email <span className="text-emerald-500">*</span></span>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoFocus 
-                    className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-emerald-300" placeholder="Enter your email" />
+                    className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400" placeholder="Enter your email" />
           </label>
           <label className="flex flex-col gap-1.5 font-sans">
              <span className="text-sm font-semibold text-emerald-800">Password <span className="text-emerald-500">*</span></span>
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required 
-                    className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-emerald-300" placeholder="Enter your password" />
+                    className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400" placeholder="Enter your password" />
           </label>
           {error && <div className="text-xs text-ruby-600 font-medium">{error}</div>}
           <Button type="submit" full disabled={busy} className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent">