From 6cf29bbd3cbba092dfc2a10a5908bdd2a1819d94 Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Thu, 13 Apr 2023 12:14:53 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20[M3-6321]=20=E2=80=93=20MUI=20v5=20?=
 =?UTF-8?q?Migration=20-=20Components=20>=20DismissibleBanner=20(#8998)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DismissibleBanner/DismissibleBanner.tsx   | 56 +++++++++----------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx
index d266360c541..af737aac10f 100644
--- 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,
+}));