Add button hover and disabled states to improve visibility

Toolbar buttons were appearing greyed out due to MUI's default disabled
styling (0.38 opacity). Added custom disabled state styling with:
- 0.5 opacity for better visibility
- Muted background and border colors
- Clear visual distinction from enabled state

Also added hover effect with cyan glow to make enabled buttons more
interactive and easier to identify.

https://claude.ai/code/session_k071w
This commit is contained in:
Claude
2026-01-31 00:06:00 +00:00
parent e94b1f0053
commit 64d56d9110

View File

@@ -85,9 +85,18 @@ const theme = createTheme({
borderRadius: '6px',
padding: '8px 16px',
transition: 'all 0.1s ease',
'&:hover': {
boxShadow: '0 0 8px rgba(56, 178, 172, 0.3)',
},
'&:active': {
transform: 'scale(0.98)',
},
'&.Mui-disabled': {
opacity: 0.5,
backgroundColor: 'rgba(74, 85, 104, 0.3)',
borderColor: 'rgba(74, 85, 104, 0.5)',
color: 'rgba(247, 250, 252, 0.5)',
},
},
},
},