refactor(frontend): pane button theme

1 files changed, 69 insertions, 25 deletions

diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
index 9cb02793..9df56baa 100644
--- a/subprojects/frontend/src/PaneButtons.tsx
+++ b/subprojects/frontend/src/PaneButtons.tsx
@@ -9,10 +9,76 @@ import SchemaRoundedIcon from '@mui/icons-material/SchemaRounded';
 import TableChartIcon from '@mui/icons-material/TableChart';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { alpha, styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 
 import type ThemeStore from './theme/ThemeStore';
 
+const PaneButtonGroup = styled(ToggleButtonGroup, {
+  name: 'PaneButtons-Group',
+  shouldForwardProp: (prop) => prop !== 'hideLabel',
+})<{ hideLabel: boolean }>(({ theme, hideLabel }) => {
+  const color =
+    theme.palette.mode === 'dark'
+      ? theme.palette.primary.main
+      : theme.palette.text.primary;
+  return {
+    gap: theme.spacing(1),
+    '.MuiToggleButton-root': {
+      fontSize: '1rem',
+      lineHeight: '1.5',
+      border: 'none',
+      ...(hideLabel ? {} : { paddingBlock: 6 }),
+      '&::before': {
+        content: '" "',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '0%',
+        height: '2px',
+        background: color,
+        transition: theme.transitions.create('width', {
+          duration: theme.transitions.duration.standard,
+        }),
+      },
+      '&.MuiToggleButtonGroup-grouped': {
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      },
+      '&:not(.Mui-selected)': {
+        color: theme.palette.text.secondary,
+      },
+      '&.Mui-selected': {
+        color,
+        '&::before': {
+          width: '100%',
+        },
+        '&:not(:active)': {
+          background: 'transparent',
+        },
+        '&:hover': {
+          background: alpha(
+            theme.palette.text.primary,
+            theme.palette.action.hoverOpacity,
+          ),
+          '@media (hover: none)': {
+            background: 'transparent',
+          },
+        },
+      },
+    },
+    ...(hideLabel
+      ? {}
+      : {
+          '& svg': {
+            margin: '0 6px 0 -4px',
+          },
+        }),
+  };
+});
+
 function PaneButtons({
   themeStore,
   hideLabel,
@@ -21,31 +87,9 @@ function PaneButtons({
   hideLabel?: boolean;
 }): JSX.Element {
   return (
-    <ToggleButtonGroup
+    <PaneButtonGroup
       size={hideLabel ? 'small' : 'medium'}
-      className="rounded"
-      sx={(theme) => ({
-        '.MuiToggleButton-root': {
-          ...(hideLabel
-            ? {}
-            : {
-                paddingBlock: '6px',
-              }),
-          fontSize: '1rem',
-          lineHeight: '1.5',
-          fontWeight: theme.typography.fontWeightMedium ?? 500,
-          '&:not(.Mui-selected)': {
-            color: theme.palette.text.secondary,
-          },
-        },
-        ...(hideLabel
-          ? {}
-          : {
-              '& svg': {
-                margin: '0 6px 0 -4px',
-              },
-            }),
-      })}
+      hideLabel={hideLabel ?? PaneButtons.defaultProps.hideLabel}
     >
       <ToggleButton
         value="code"
@@ -89,7 +133,7 @@ function PaneButtons({
         <TableChartIcon fontSize="small" />
         {!hideLabel && 'Table'}
       </ToggleButton>
-    </ToggleButtonGroup>
+    </PaneButtonGroup>
   );
 }