refactor: [M3-6321] – MUI v5 Migration - Components > DismissibleBann…

…er (#8998)
linode · Apr 13, 2023 · 6cf29bb · 6cf29bb
1 parent 3761ad3
commit 6cf29bb
Showing 1 changed file with 26 additions and 30 deletions.
diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx
@@ -1,33 +1,13 @@
 import Close from '@mui/icons-material/Close';
-import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
-import Notice, { NoticeProps } from 'src/components/Notice';
 import { SxProps } from '@mui/system';
+import * as React from 'react';
+import Notice, { NoticeProps } from 'src/components/Notice';
 import useDismissibleNotifications, {
   DismissibleNotificationOptions,
 } from 'src/hooks/useDismissibleNotifications';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    flexFlow: 'row nowrap',
-    justifyContent: 'space-between',
-    borderRadius: 1,
-    marginBottom: theme.spacing(),
-    padding: theme.spacing(2),
-    background: theme.bg.bgPaper,
-  },
-  closeIcon: {
-    ...theme.applyLinkStyles,
-    display: 'flex',
-    color: theme.textColors.tableStatic,
-    marginLeft: 20,
-  },
-}));
-
 interface Props {
   preferenceKey: string;
   children: JSX.Element;
@@ -40,7 +20,6 @@ type CombinedProps = Props & Partial<NoticeProps>;
 
 export const DismissibleBanner = (props: CombinedProps) => {
   const { className, preferenceKey, options, children, ...rest } = props;
-  const { classes, cx } = useStyles();
 
   const { hasDismissedBanner, handleDismiss } = useDismissibleBanner(
     preferenceKey,
@@ -53,25 +32,24 @@ export const DismissibleBanner = (props: CombinedProps) => {
 
   const dismissibleButton = (
     <Grid>
-      <button
-        className={classes.closeIcon}
+      <StyledButton
         aria-label={`Dismiss ${preferenceKey} banner`}
         onClick={handleDismiss}
         data-testid="notice-dismiss"
       >
         <Close />
-      </button>
+      </StyledButton>
     </Grid>
   );
 
   return (
-    <Notice
-      className={cx(classes.root, className)}
+    <StyledNotice
+      className={className}
       dismissibleButton={dismissibleButton}
       {...rest}
     >
       {children}
-    </Notice>
+    </StyledNotice>
   );
 };
 
@@ -96,3 +74,21 @@ export const useDismissibleBanner = (
 
   return { hasDismissedBanner, handleDismiss };
 };
+
+const StyledNotice = styled(Notice)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexFlow: 'row nowrap',
+  justifyContent: 'space-between',
+  borderRadius: 1,
+  marginBottom: theme.spacing(),
+  padding: theme.spacing(2),
+  background: theme.bg.bgPaper,
+}));
+
+const StyledButton = styled('button')(({ theme }) => ({
+  ...theme.applyLinkStyles,
+  display: 'flex',
+  color: theme.textColors.tableStatic,
+  marginLeft: 20,
+}));