refactor: migrating utilityRow to MuiList and remove customizations

package.json

@@ -49,7 +49,6 @@
     "@kyper/progressindicators": "^3.1.0",
     "@kyper/tag": "^3.0.0",
     "@kyper/tokenprovider": "^4.0.1",
-    "@kyper/utilityrow": "^2.1.0",
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@mxenabled/mxui": "^1.7.0",

src/ConnectedTokenProvider.tsx

@@ -21,8 +21,6 @@ declare module '@mui/material/styles' {
   }
 }
 
-export const muiListItemButtonPadding = 12
-
 const connectThemeOverrides = (palette: Theme['palette']) => ({
   components: {
     MuiTypography: {
@@ -146,15 +144,6 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
     },
-    MuiListItemButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: 8,
-          paddingLeft: muiListItemButtonPadding,
-          paddingRight: muiListItemButtonPadding,
-        },
-      },
-    },
   },
   // TODO: Remove this custom spacing scale once we are on MXUI v2.
   spacing: (factor: number) => `${factor * 8}px`,
@@ -209,7 +198,6 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
         <GlobalStyles
           styles={{
             ':root': {
-              '--muiListItemButtonPadding': `${muiListItemButtonPadding}px`,
               // These can be deleted once we are on MXUI v2.
               '--mui-palette-primary-main': combinedTheme.palette.primary.main,
               '--mui-palette-primary-light': combinedTheme.palette.primary.light,

src/components/support/SupportMenu.js

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { UtilityRow } from '@kyper/utilityrow'
 import { Icon, Text } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'
@@ -11,6 +10,8 @@ import { SlideDown } from 'src/components/SlideDown'
 import { getDelay } from 'src/utilities/getDelay'
 import useAnalyticsPath from 'src/hooks/useAnalyticsPath'
 import { PageviewInfo } from 'src/const/Analytics'
+import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { FlushListContainer } from 'src/shared/MuiList/FlushListContainer'
 
 export const SupportMenu = React.forwardRef((props, menuRef) => {
   const { selectGeneralSupport } = props
@@ -28,13 +29,21 @@ export const SupportMenu = React.forwardRef((props, menuRef) => {
       </SlideDown>
 
       <SlideDown delay={getNextDelay()}>
-        <UtilityRow
-          borderType="inset-left"
-          onClick={selectGeneralSupport}
-          rightChildren={<Icon name="chevron_right" size={24} />}
-          subTitle={__('Get help connecting your account')}
-          title={__('Request support')}
-        />
+        <FlushListContainer>
+          <List>
+            <ListItem>
+              <ListItemButton onClick={selectGeneralSupport}>
+                <ListItemText
+                  primary={__('Request support')}
+                  secondary={__('Get help connecting your account')}
+                />
+                <ListItemIcon>
+                  <Icon name="chevron_right" size={24} />
+                </ListItemIcon>
+              </ListItemButton>
+            </ListItem>
+          </List>
+        </FlushListContainer>
       </SlideDown>
     </div>
   )

src/shared/MuiList/FlushListContainer.module.css

@@ -1,4 +1,4 @@
 .container {
-  margin-left: calc(var(--muiListItemButtonPadding) * -1);
-  margin-right: calc(var(--muiListItemButtonPadding) * -1);
+  margin-left: calc(var(--spacing-3) * -1);
+  margin-right: calc(var(--spacing-3) * -1);
 }

typings/kyper.d.ts

@@ -12,6 +12,5 @@ declare module '@kyper/icon/Growth'
 declare module '@kyper/icon/Image'
 declare module '@kyper/icon/Health'
 declare module '@kyper/progressindicators'
-declare module '@kyper/utilityrow'
 declare module '@kyper/hooks'
 declare module '@kyper/icon/CheckmarkFilled'