frontend: ListItemLink: adjust styles to use new theme tokens

Signed-off-by: Oleksandr Dubenko <[email protected]>

Author: sniok

frontend/src/components/Sidebar/ListItemLink.tsx

@@ -1,6 +1,5 @@
 import { Icon, IconProps } from '@iconify/react';
-import { styled, Tooltip } from '@mui/material';
-import ListItem from '@mui/material/ListItem';
+import { alpha, ListItemButton, styled, Tooltip } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import React from 'react';
@@ -17,17 +16,32 @@ interface ListItemLinkProps {
   subtitle?: string;
   icon?: IconProps['icon'];
   iconOnly?: boolean;
+  hasParent?: boolean;
+  fullWidth?: boolean;
   containerProps?: {
     [prop: string]: any;
   };
 }
 
-// make a styled() li
-const StyledLi = styled('li')();
+const StyledLi = styled('li')<{ hasParent?: boolean }>(({ hasParent }) => ({
+  marginRight: '5px',
+  marginLeft: hasParent ? '35px' : '5px',
+  marginBottom: '1px',
+}));
 
 export default function ListItemLink(props: ListItemLinkProps) {
-  const { primary, pathname, search, icon, name, containerProps, iconOnly, subtitle, ...other } =
-    props;
+  const {
+    primary,
+    pathname,
+    search,
+    icon,
+    name,
+    iconOnly,
+    subtitle,
+    hasParent,
+    fullWidth,
+    ...other
+  } = props;
 
   const iconSize = React.useMemo(
     () => (iconOnly ? CollapsedIconSize : ExpandedIconSize),
@@ -72,12 +86,118 @@ export default function ListItemLink(props: ListItemLinkProps) {
     );
   }
 
+  const hasSubtitle = Boolean(subtitle);
+
   return (
-    <StyledLi {...containerProps}>
-      <ListItem button component={renderLink} {...other}>
+    <StyledLi hasParent={hasParent}>
+      <ListItemButton
+        component={renderLink}
+        {...other}
+        sx={theme => ({
+          color:
+            theme.palette.sidebar.color ??
+            theme.palette.getContrastText(theme.palette.sidebar.background),
+          margin: 0,
+          borderRadius: theme.shape.borderRadius + 'px',
+          height: iconOnly ? '50px' : undefined,
+          opacity: hasParent ? 0.9 : 1.0,
+          fontSize: hasParent ? '0.85rem' : '1rem',
+
+          svg: {
+            color: 'currentColor',
+          },
+
+          '&.Mui-selected': hasParent
+            ? {
+                ':before': {
+                  content: "''",
+                  width: '4px',
+                  borderRadius: theme.shape.borderRadius + 'px',
+                  background: theme.palette.sidebar.selectedColor,
+                  position: 'absolute',
+                  left: '4px',
+                  top: '7px',
+                  bottom: '7px',
+                },
+                opacity: 1.0,
+                color: theme.palette.sidebar.selectedColor,
+                background: 'none',
+              }
+            : {
+                opacity: 1.0,
+                boxShadow: '1px 1px 4px rgb(0 0 0 / 12%)',
+                background: theme.palette.sidebar.selectedBackground,
+                color: theme.palette.getContrastText(theme.palette.sidebar.selectedBackground),
+              },
+
+          '&.Mui-selected:hover': hasParent
+            ? {
+                backgroundColor: alpha(
+                  theme.palette.getContrastText(theme.palette.sidebar.background),
+                  0.07
+                ),
+              }
+            : {
+                backgroundColor: alpha(theme.palette.sidebar.selectedBackground, 0.8),
+              },
+
+          ':hover': {
+            backgroundColor: alpha(
+              theme.palette.getContrastText(theme.palette.sidebar.background),
+              0.07
+            ),
+          },
+
+          '.MuiListItemIcon-root': {
+            color: 'unset',
+          },
+
+          '.MuiListItemText-root': {
+            margin: 0,
+          },
+
+          '& *': {
+            fontSize: '.875rem',
+            textTransform: 'none',
+          },
+          '& .MuiListItem-root': {
+            paddingTop: '4px',
+            paddingBottom: '4px',
+          },
+
+          '& .MuiListItemIcon-root': {
+            minWidth: 0,
+            alignSelf: fullWidth && hasSubtitle ? 'stretch' : 'auto',
+            paddingTop: fullWidth && hasSubtitle ? theme.spacing(1) : 0,
+            marginRight: fullWidth ? '8px' : '0',
+          },
+          '& .MuiListItemText-secondary': {
+            fontSize: '.85rem',
+            fontStyle: 'italic',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflowWrap: 'anywhere',
+            overflow: 'hidden',
+            color: 'currentColor',
+          },
+
+          ...(!hasParent && {
+            '& .MuiListItem-root': {
+              paddingTop: hasSubtitle ? '0' : '7px',
+              paddingBottom: hasSubtitle ? '0' : '7px',
+              paddingLeft: '19px',
+              minHeight: !fullWidth ? '56px' : 'unset',
+            },
+
+            '& *': {
+              fontSize: '1rem',
+            },
+          }),
+        })}
+      >
         {listItemLinkContainer}
         {!iconOnly && <ListItemText primary={primary} secondary={subtitle} />}
-      </ListItem>
+      </ListItemButton>
     </StyledLi>
   );
 }