From 64d56d911095676d2a69b44a5db8660936add4d4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 31 Jan 2026 00:06:00 +0000
Subject: [PATCH] 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
---
 frontend/lib/theme.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/lib/theme.tsx b/frontend/lib/theme.tsx
index 26a9e63..91a086e 100644
--- a/frontend/lib/theme.tsx
+++ b/frontend/lib/theme.tsx
@@ -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)',
+          },
         },
       },
     },