From ebed6c078c0f6bc56fc65a19bd554225c36cd411 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sat, 21 Feb 2026 02:32:52 +0100
Subject: [PATCH] design: improve authenticated status visibility with Verified
 icon and TRACKING label

---
 frontend/src/pages/Dashboard.tsx | 42 ++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index f80e991..c40c9bf 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -509,22 +509,34 @@ const AccountRow: React.FC<{
             </Button>
           )}
 
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+
+// ... (inside AccountRow)
+
           {/* Scraper Auth Button - Controls the optional cooldown tracking */}
-          <Tooltip title={account.steamLoginSecure && !account.authError ? "Session valid" : (account.steamLoginSecure ? "Refresh scraper session" : "Authenticate for cooldown tracking")}>
-            <IconButton 
-              size="small" 
-              onClick={onAuth} 
-              disabled={!!(account.steamLoginSecure && !account.authError)}
-              sx={{ 
-                color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
-                border: '1px solid',
-                borderColor: 'divider',
-                borderRadius: 1,
-                opacity: account.steamLoginSecure && !account.authError ? 0.6 : 1
-              }}
-            >
-              {account.steamLoginSecure && !account.authError ? <ShieldIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
-            </IconButton>
+          <Tooltip title={account.steamLoginSecure && !account.authError ? "Session valid - Tracking active" : (account.steamLoginSecure ? "Refresh scraper session" : "Authenticate for cooldown tracking")}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              <IconButton 
+                size="small" 
+                onClick={onAuth} 
+                disabled={!!(account.steamLoginSecure && !account.authError)}
+                sx={{ 
+                  color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
+                  border: '1px solid',
+                  borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
+                  borderRadius: 1,
+                  opacity: account.steamLoginSecure && !account.authError ? 1 : 1,
+                  background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
+                }}
+              >
+                {account.steamLoginSecure && !account.authError ? <VerifiedUserIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
+              </IconButton>
+              {account.steamLoginSecure && !account.authError && (
+                <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem', letterSpacing: '0.5px' }}>
+                  TRACKING
+                </Typography>
+              )}
+            </Box>
           </Tooltip>
 
           <Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />