fix: add a hover color for buttons in the period selectors. (#9125)

Adds the same hover color as for the sidebar. Also adds a transition animation.
Unleash · Jan 21, 2025 · e4eab45 · e4eab45
1 parent 5846952
commit e4eab45
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
@@ -73,6 +73,7 @@ const Wrapper = styled('article')(({ theme }) => ({
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         color: theme.palette.text.primary,
+        transition: 'background-color 0.2s ease',
 
         '&.selected': {
             backgroundColor: theme.palette.secondary.light,
@@ -82,6 +83,9 @@ const Wrapper = styled('article')(({ theme }) => ({
         cursor: 'default',
         color: theme.palette.text.disabled,
     },
+    'button:hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
 }));
 
 const MonthSelector = styled('article')(({ theme }) => ({