change: [M3-10065, M3-9910] - Notification banner stroke, width, error icon

packages/manager/.changeset/pr-12471-fixed-1751561222068.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Volumes upgrade banner alignment ([#12471](https://github.com/linode/manager/pull/12471))

packages/manager/src/components/Snackbar/Snackbar.tsx

@@ -30,7 +30,11 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
     },
     '#notistack-snackbar > svg': {
       position: 'absolute',
-      left: '-45px',
+      left: '-48px',
+      top: 6,
+      '& path': {
+        fill: theme.notificationToast.default.icon,
+      },
     },
     '&.notistack-MuiContent': {
       color: theme.notificationToast.default.color,
@@ -61,6 +65,9 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
     '&.notistack-MuiContent-warning': {
       backgroundColor: theme.notificationToast.warning.backgroundColor,
       borderLeft: theme.notificationToast.warning.borderLeft,
+      '& #notistack-snackbar svg > path': {
+        fill: theme.notificationToast.warning.icon,
+      },
     },
     '& #notistack-snackbar + div': {
       alignSelf: 'flex-start',

packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx

@@ -29,25 +29,25 @@ export const VolumesUpgradeBanner = ({ linodeId }: Props) => {
 
   return (
     <Notice forceImportantIconVerticalCenter variant="info">
-      <Stack direction="column" flex={1} justifyContent="center">
-        <Typography>
-          {numUpgradeableVolumes === 1
-            ? 'A Volume attached to this Linode is '
-            : 'Volumes attached to this Linode are '}
-          eligible for a <b>free upgrade</b> to high performance NVMe Block
-          Storage.{' '}
-          <Link to="https://www.linode.com/blog/cloud-storage/nvme-block-storage-now-available/">
-            Learn More
-          </Link>
-          .
-        </Typography>
-      </Stack>
       <Stack
         alignSelf="flex-start"
         direction="row"
         justifyContent="flex-end"
         spacing={1}
       >
+        <Stack flex={1} justifyContent="center">
+          <Typography>
+            {numUpgradeableVolumes === 1
+              ? 'A Volume attached to this Linode is '
+              : 'Volumes attached to this Linode are '}
+            eligible for a <b>free upgrade</b> to high performance NVMe Block
+            Storage.{' '}
+            <Link to="https://www.linode.com/blog/cloud-storage/nvme-block-storage-now-available/">
+              Learn More
+            </Link>
+            .
+          </Typography>
+        </Stack>
         <Button
           buttonType="primary"
           onClick={() =>

packages/ui/.changeset/pr-12471-changed-1751923646046.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Changed
+---
+
+Notification banner stroke, width, error icon ([#12471](https://github.com/linode/manager/pull/12471))

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

@@ -1,73 +1,80 @@
-import { makeStyles } from 'tss-react/mui';
+import { styled } from '@mui/material/styles';
 
-export const useStyles = makeStyles()((theme) => ({
-  error: {
-    borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Error.Border}`,
+import { omittedProps } from '../../utilities';
+import { Box } from '../Box';
+
+import type { NoticeVariant } from './Notice';
+
+export const StyledNoticeBox = styled(Box, {
+  label: 'StyledNotice',
+  shouldForwardProp: omittedProps(['variant']),
+})<{ variant: NoticeVariant }>(({ theme, variant }) => ({
+  display: 'flex',
+  gap: '0.5rem',
+  alignItems: 'center',
+  '& + .notice': {
+    marginTop: `${theme.spacingFunction(16)} !important`,
+  },
+  borderRadius: 1,
+  padding: `10px ${theme.spacingFunction(12)}`,
+  '& .MuiTypography-root': {
+    width: '100%',
+  },
+  '& p': {
+    fontSize: theme.tokens.font.FontSize.Xs,
+    font: theme.font.semibold,
+    position: 'relative',
+    top: 1,
+    margin: 0,
+  },
+  '& ul': {
+    paddingLeft: 20,
+    margin: 0,
+    listStyleType: 'disc',
+    '& li': {
+      display: 'list-item',
+      padding: 0,
+    },
+  },
+  ...(variant === 'error' && {
+    border: `1px solid ${theme.tokens.component.NotificationBanner.Error.Border}`,
     background: theme.tokens.component.NotificationBanner.Error.Background,
     '& path': {
       fill: theme.tokens.component.NotificationBanner.Error.StatusIcon,
     },
-  },
-  icon: {
-    '& g': {
-      stroke: theme.tokens.color.Neutrals.White,
-    },
-    color: theme.tokens.color.Neutrals.White,
-    width: 20,
-    height: 20,
-    position: 'relative',
-  },
-  info: {
-    borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Informative.Border}`,
+  }),
+  ...(['info', 'tip'].includes(variant) && {
+    border: `1px solid ${theme.tokens.component.NotificationBanner.Informative.Border}`,
     background:
       theme.tokens.component.NotificationBanner.Informative.Background,
     '& path': {
       fill: theme.tokens.component.NotificationBanner.Informative.StatusIcon,
     },
-  },
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    '& + .notice': {
-      marginTop: `${theme.spacingFunction(16)} !important`,
-    },
-    borderRadius: 1,
-    padding: `10px ${theme.spacingFunction(12)}`,
-    '& .MuiTypography-root': {
-      width: '100%',
-    },
-    '& p': {
-      fontSize: theme.tokens.font.FontSize.Xs,
-      font: theme.font.semibold,
-      position: 'relative',
-      top: 1,
-      margin: 0,
-    },
-    '& ul': {
-      paddingLeft: 20,
-      margin: 0,
-      listStyleType: 'disc',
-      '& li': {
-        display: 'list-item',
-        padding: 0,
-      },
-    },
-    maxWidth: '100%',
-    position: 'relative',
-  },
-  success: {
-    borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Success.Border}`,
+  }),
+  ...(variant === 'success' && {
+    border: `1px solid ${theme.tokens.component.NotificationBanner.Success.Border}`,
     background: theme.tokens.component.NotificationBanner.Success.Background,
     '& path': {
       fill: theme.tokens.component.NotificationBanner.Success.StatusIcon,
     },
-  },
-  warning: {
-    borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Warning.Border}`,
+  }),
+  ...(variant === 'warning' && {
+    border: `1px solid ${theme.tokens.component.NotificationBanner.Warning.Border}`,
     background: theme.tokens.component.NotificationBanner.Warning.Background,
     // Only update outer triangle color
     '& .css-1j6o9qe-icon path:first-of-type': {
       fill: theme.tokens.component.NotificationBanner.Warning.StatusIcon,
     },
-  },
+  }),
+  maxWidth: '100%',
+  position: 'relative',
+}));
+
+export const StyledIconBox = styled(Box, {
+  label: 'StyledIconBox',
+})(() => ({
+  display: 'flex',
+  width: 20,
+  height: 20,
+  position: 'relative',
 }));

packages/ui/src/components/Notice/Notice.test.tsx

@@ -63,7 +63,7 @@ describe('Notice Component', () => {
   it('applies variant prop', () => {
     const { container } = renderWithTheme(<Notice variant="error" />);
 
-    expect(container.firstChild).toHaveStyle('border-left: 4px solid #d63c42;');
+    expect(container.firstChild).toHaveStyle('border: 1px solid #d63c42;');
     expect(container.firstChild).toHaveStyle('background: #ffe5e5;');
   });