design: improve authenticated status visibility with Verified icon and TRACKING label

This commit is contained in:
2026-02-21 02:32:52 +01:00
parent 7d49209c0b
commit ebed6c078c

View File

@@ -509,8 +509,13 @@ 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")}>
<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}
@@ -518,13 +523,20 @@ const AccountRow: React.FC<{
sx={{
color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
border: '1px solid',
borderColor: 'divider',
borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
borderRadius: 1,
opacity: account.steamLoginSecure && !account.authError ? 0.6 : 1
opacity: account.steamLoginSecure && !account.authError ? 1 : 1,
background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
}}
>
{account.steamLoginSecure && !account.authError ? <ShieldIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
{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 }} />