change: [M3-9067] - Improve Backups Banner Styles and Refactor Notice Component

packages/manager/.changeset/pr-11480-changed-1736262405005.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Improved backups banner styles ([#11480](https://github.com/linode/manager/pull/11480))

packages/manager/cypress/e2e/core/account/account-cancellation.spec.ts

@@ -197,7 +197,7 @@ describe('Account cancellation', () => {
         // Check both boxes but verify submit remains disabled without email
         cy.get('[data-qa-checkbox="deleteAccountServices"]').click();
         cy.get('[data-qa-checkbox="deleteAccountUsers"]').click();
-        
+
         ui.button
           .findByTitle('Close Account')
           .should('be.visible')
@@ -382,7 +382,7 @@ describe('Parent/Child account cancellation', () => {
         // Check both boxes but verify submit remains disabled without email
         cy.get('[data-qa-checkbox="deleteAccountServices"]').click();
         cy.get('[data-qa-checkbox="deleteAccountUsers"]').click();
-        
+
         ui.button
           .findByTitle('Close Account')
           .should('be.visible')

packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts

@@ -131,7 +131,7 @@ const planSelectionTable = 'List of Linode Plans';
 
 const notices = {
   limitedAvailability: '[data-testid="limited-availability-banner"]',
-  unavailable: '[data-testid="notice-error"]',
+  unavailable: '[data-qa-error="true"]',
 };
 
 authenticate();

packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx

@@ -1,12 +1,9 @@
-import { Box } from '@linode/ui';
+import { Box, IconButton, Notice } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
-import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { useDismissibleNotifications } from 'src/hooks/useDismissibleNotifications';
 
-import { StyledButton, StyledNotice } from './DismissibleBanner.styles';
-
 import type { NoticeProps } from '@linode/ui';
 import type { DismissibleNotificationOptions } from 'src/hooks/useDismissibleNotifications';
 
@@ -61,32 +58,30 @@ export const DismissibleBanner = (props: Props) => {
   }
 
   const dismissibleButton = (
-    <Grid>
-      <StyledButton
-        aria-label={`Dismiss ${preferenceKey} banner`}
-        data-testid="notice-dismiss"
-        onClick={handleDismiss}
-      >
-        <Close />
-      </StyledButton>
-    </Grid>
+    <IconButton
+      aria-label={`Dismiss ${preferenceKey} banner`}
+      data-testid="notice-dismiss"
+      onClick={handleDismiss}
+      sx={{ padding: 1 }}
+    >
+      <Close />
+    </IconButton>
   );
 
   return (
-    <StyledNotice className={className} {...rest}>
-      <Box
-        alignItems="center"
-        display="flex"
-        flexDirection="row"
-        justifyContent="space-between"
-      >
-        {children}
-        <Box alignItems="center" display="flex">
-          {actionButton}
-          {dismissibleButton}
-        </Box>
+    <Notice
+      bgcolor={(theme) => theme.palette.background.paper}
+      className={className}
+      display="flex"
+      justifyContent="space-between"
+      {...rest}
+    >
+      {children}
+      <Box alignItems="center" display="flex">
+        {actionButton}
+        {dismissibleButton}
       </Box>
-    </StyledNotice>
+    </Notice>
   );
 };
 

packages/manager/src/features/Backups/BackupsCTA.tsx

@@ -1,7 +1,8 @@
-import { Box, StyledLinkButton, Typography } from '@linode/ui';
+import { IconButton, Notice, Typography } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
-import * as React from 'react';
+import React from 'react';
 
+import { LinkButton } from 'src/components/LinkButton';
 import { useAccountSettings } from 'src/queries/account/settings';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 import {
@@ -11,7 +12,6 @@ import {
 import { useProfile } from 'src/queries/profile/profile';
 
 import { BackupDrawer } from './BackupDrawer';
-import { StyledPaper } from './BackupsCTA.styles';
 
 export const BackupsCTA = () => {
   const { data: accountSettings } = useAccountSettings();
@@ -20,7 +20,7 @@ export const BackupsCTA = () => {
   const { data: isBackupsBannerDismissed } = usePreferences(
     (preferences) => preferences?.backups_cta_dismissed
   );
-  const { mutateAsync: updatePreferences } = useMutatePreferences();
+  const { mutate: updatePreferences } = useMutatePreferences();
 
   const [isBackupsDrawerOpen, setIsBackupsDrawerOpen] = React.useState(false);
 
@@ -44,26 +44,31 @@ export const BackupsCTA = () => {
   }
 
   return (
-    <StyledPaper>
-      <Typography sx={{ fontSize: '1rem', marginLeft: '0.5rem' }}>
-        <StyledLinkButton onClick={() => setIsBackupsDrawerOpen(true)}>
+    <Notice
+      bgcolor={(theme) => theme.palette.background.paper}
+      display="flex"
+      flexDirection="row"
+      justifyContent="space-between"
+      spacingBottom={8}
+      variant="info"
+    >
+      <Typography fontSize="inherit">
+        <LinkButton onClick={() => setIsBackupsDrawerOpen(true)}>
           Enable Linode Backups
-        </StyledLinkButton>{' '}
+        </LinkButton>{' '}
         to protect your data and recover quickly in an emergency.
       </Typography>
-      <Box component="span" display="flex">
-        <StyledLinkButton
-          aria-label="Dismiss notice enabling Linode backups"
-          onClick={handleDismiss}
-          sx={{ lineHeight: '0.5rem', marginLeft: 12 }}
-        >
-          <Close />
-        </StyledLinkButton>
-      </Box>
+      <IconButton
+        aria-label="Dismiss notice enabling Linode backups"
+        onClick={handleDismiss}
+        sx={{ padding: 1 }}
+      >
+        <Close />
+      </IconButton>
       <BackupDrawer
         onClose={() => setIsBackupsDrawerOpen(false)}
         open={isBackupsDrawerOpen}
       />
-    </StyledPaper>
+    </Notice>
   );
 };

packages/manager/src/features/CloudPulse/Alerts/constants.ts

@@ -116,7 +116,7 @@ export const PollingIntervalOptions = {
     { label: '10 min', value: 600 },
   ],
 };
- 
+
 export const severityMap: Record<AlertSeverityType, string> = {
   0: 'Severe',
   1: 'Medium',

packages/manager/src/features/GlobalNotifications/EmailBounce.tsx

@@ -128,8 +128,8 @@ const EmailBounceNotification = React.memo((props: Props) => {
   }
 
   return (
-    <Notice important spacing={2} variant="warning">
-      <Grid alignItems="center" container>
+    <Notice important variant="warning">
+      <Grid alignItems="center" container spacing={2}>
         <Grid lg={8} md={6} xs={12}>
           {text}
         </Grid>

packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx

@@ -24,7 +24,7 @@ export const VerificationDetailsBanner = ({
   }
 
   return (
-    <Notice important spacing={1} variant="warning">
+    <Notice important variant="warning">
       <Box
         alignItems="center"
         display="flex"

packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx

@@ -174,10 +174,10 @@ export const KubernetesLanding = () => {
       {isDiskEncryptionFeatureEnabled && (
         <DismissibleBanner
           preferenceKey={DISK_ENCRYPTION_UPDATE_PROTECT_CLUSTERS_BANNER_KEY}
-          sx={{ margin: '1rem 0 1rem 0' }}
+          spacingBottom={8}
           variant="info"
         >
-          <Typography>
+          <Typography fontSize="inherit">
             {DISK_ENCRYPTION_UPDATE_PROTECT_CLUSTERS_COPY}
           </Typography>
         </DismissibleBanner>

packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx

@@ -112,7 +112,9 @@ describe('PlacementGroupsDetailPanel', () => {
     );
 
     expect(getByRole('combobox')).toBeDisabled();
-    expect(getByTestId('notice-warning')).toHaveTextContent(
+    expect(
+      getByTestId('placement-groups-no-capability-notice')
+    ).toHaveTextContent(
       'Currently, only specific regions support placement groups.'
     );
     expect(

packages/ui/.changeset/pr-11480-changed-1736262442937.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Changed
+---
+
+Refactor and clean up `Notice` ([#11480](https://github.com/linode/manager/pull/11480))

packages/ui/.changeset/pr-11480-removed-1736802565293.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Removed
+---
+
+`marketing` variant on `Notice` component ([#11480](https://github.com/linode/manager/pull/11480))

packages/ui/src/components/Notice/Notice.styles.ts

@@ -1,18 +1,7 @@
 import { makeStyles } from 'tss-react/mui';
 
-import type { Theme } from '@mui/material/styles';
-
-export const useStyles = makeStyles<
-  void,
-  'error' | 'icon' | 'important' | 'noticeText'
->()((theme: Theme, _params, classes) => ({
+export const useStyles = makeStyles()((theme) => ({
   error: {
-    [`&.${classes.important}`]: {
-      borderLeftWidth: 32,
-    },
-    borderLeft: `5px solid ${theme.palette.error.dark}`,
-  },
-  errorList: {
     borderLeft: `5px solid ${theme.palette.error.dark}`,
   },
   icon: {
@@ -21,30 +10,14 @@ export const useStyles = makeStyles<
     position: 'absolute',
   },
   important: {
-    '&.MuiGrid2-root': {
-      padding: theme.spacing(1),
-      paddingRight: 18,
-    },
-    [`& .${classes.noticeText}`]: {
-      fontFamily: theme.font.normal,
-    },
-    backgroundColor: theme.bg.bgPaper,
+    backgroundColor: theme.palette.background.paper,
+    borderLeftWidth: 32,
+    fontFamily: theme.font.normal,
+    padding: theme.spacing(1),
   },
   info: {
-    [`&.${classes.important}`]: {
-      borderLeftWidth: 32,
-    },
-    borderLeft: `5px solid ${theme.palette.info.dark}`,
-  },
-  infoList: {
     borderLeft: `5px solid ${theme.palette.info.dark}`,
   },
-  inner: {
-    width: '100%',
-  },
-  marketing: {
-    borderLeft: `5px solid ${theme.color.green}`,
-  },
   noticeText: {
     fontFamily: theme.font.bold,
     fontSize: '1rem',
@@ -54,37 +27,21 @@ export const useStyles = makeStyles<
     '& + .notice': {
       marginTop: `${theme.spacing()} !important`,
     },
-    [`& .${classes.error}`]: {
-      borderLeftColor: theme.color.red,
-    },
     alignItems: 'center',
     borderRadius: 1,
     display: 'flex',
     fontSize: '1rem',
     maxWidth: '100%',
-    padding: '4px 16px',
-    paddingRight: 18,
+    padding: `${theme.spacing(0.5)} ${theme.spacing(2)}`,
     position: 'relative',
   },
   success: {
-    [`&.${classes.important}`]: {
-      borderLeftWidth: 32,
-    },
-    borderLeft: `5px solid ${theme.palette.success.dark}`,
-  },
-  successList: {
     borderLeft: `5px solid ${theme.palette.success.dark}`,
   },
   warning: {
-    [`& .${classes.icon}`]: {
-      color: theme.tokens.color.Neutrals[80],
-    },
-    [`&.${classes.important}`]: {
-      borderLeftWidth: 32,
-    },
     borderLeft: `5px solid ${theme.palette.warning.dark}`,
   },
-  warningList: {
-    borderLeft: `5px solid ${theme.palette.warning.dark}`,
+  warningIcon: {
+    color: theme.tokens.color.Neutrals[80],
   },
 }));