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,22 +509,34 @@ const AccountRow: React.FC<{
</Button> </Button>
)} )}
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
// ... (inside AccountRow)
{/* Scraper Auth Button - Controls the optional cooldown tracking */} {/* 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")}>
<IconButton <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
size="small" <IconButton
onClick={onAuth} size="small"
disabled={!!(account.steamLoginSecure && !account.authError)} onClick={onAuth}
sx={{ disabled={!!(account.steamLoginSecure && !account.authError)}
color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'), sx={{
border: '1px solid', color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
borderColor: 'divider', border: '1px solid',
borderRadius: 1, borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
opacity: account.steamLoginSecure && !account.authError ? 0.6 : 1 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 ? <ShieldIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)} }}
</IconButton> >
{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> </Tooltip>
<Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} /> <Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />