fix: [M3-9796] - Notice icon, padding, and dark mode (#12065)

## Changes  🔄
- Fix icon not changing in dark mode
- Fix left padding
- All notices/banners have icons associated now without the need for important
  - Removed important references from the codebase and stories

No need for changeset since this isn't released yet. I did a quick pass-through and haven't noticed any regressions

## How to test 🧪

### Verification steps

(How to verify changes)

- [ ] Check notices/banners for regressions across the codebase in dark mode, various sizes, and storybook

Author: hana-akamai

packages/manager/cypress/e2e/core/objectStorageGen2/bucket-object-gen2.spec.ts

@@ -413,7 +413,7 @@ describe('Object Storage Gen2 bucket object tests', () => {
         cy.findByText(mockRegions[0].label).should('be.visible');
       });
     // warning message
-    cy.findByTestId('notice-warning-important').within(() => {
+    cy.findByTestId('notice-warning').within(() => {
       cy.contains(
         `There was an error loading buckets in ${mockRegions[1].label}`
       );
@@ -463,7 +463,7 @@ describe('Object Storage Gen2 bucket object tests', () => {
     // table with retrieved bucket
     cy.get('table tbody tr').should('have.length', 1);
     // warning message
-    cy.findByTestId('notice-warning-important').within(() => {
+    cy.findByTestId('notice-warning').within(() => {
       cy.contains(
         'There was an error loading buckets in the following regions:'
       );

packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx

@@ -33,7 +33,7 @@ export const AbuseTicketBanner = () => {
 
   const href = multiple
     ? '/support/tickets'
-    : abuseTickets[0].entity?.url ?? '';
+    : (abuseTickets[0].entity?.url ?? '');
   const isViewingTicket = location.pathname.match(href);
 
   return (
@@ -43,7 +43,6 @@ export const AbuseTicketBanner = () => {
           expiry: DateTime.utc().plus({ days: 7 }).toISO(),
           label: preferenceKey,
         }}
-        important
         preferenceKey={preferenceKey}
         variant="warning"
       >

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

@@ -11,7 +11,7 @@ type Story = StoryObj<typeof DismissibleBanner>;
 
 export const Default: Story = {
   render: (args) => (
-    <DismissibleBanner {...args} important variant="info">
+    <DismissibleBanner {...args} variant="info">
       <Typography>This is an example of a dismissible banner.</Typography>
     </DismissibleBanner>
   ),
@@ -29,7 +29,6 @@ export const CallToActionBanner: Story = {
         </Button>
       }
       forceImportantIconVerticalCenter
-      important
       preferenceKey="cluster-v1"
       variant="info"
     >
@@ -60,12 +59,11 @@ export const BetaBanner: Story = {
 export const InfoWithLongTextAndMarkup: StoryObj = {
   render: () => (
     <DismissibleBanner
-      important
       preferenceKey="lenghty-dismissible-banner"
       variant="info"
     >
       <Typography variant="h2">
-        This is an important, dismissible informational notice with a title.
+        This is a dismissible informational notice with a title.
       </Typography>
       <Typography>This notice contains long text that should wrap.</Typography>
     </DismissibleBanner>

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

@@ -63,6 +63,9 @@ export const DismissibleBanner = (props: Props) => {
         '& svg': {
           width: 16,
           height: 16,
+          '& path': {
+            fill: theme.tokens.component.NotificationBanner.Icon,
+          },
         },
       })}
     >

packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx

@@ -68,7 +68,7 @@ export const MaintenanceBanner = React.memo((props: Props) => {
   }
 
   return (
-    <Notice important variant="warning">
+    <Notice variant="warning">
       <Typography lineHeight="20px">
         {generateIntroText(type, maintenanceStart, maintenanceEnd)}
       </Typography>

packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx

@@ -29,13 +29,6 @@ export const ProductInformationBanner = React.memo(
       return null;
     }
 
-    const isImportantBanner =
-      thisBanner.decoration.important === 'true'
-        ? true
-        : thisBanner.decoration.important === 'false'
-        ? false
-        : true;
-
     let hasBannerExpired = true;
     try {
       hasBannerExpired = isAfter(
@@ -52,7 +45,6 @@ export const ProductInformationBanner = React.memo(
 
     return (
       <DismissibleBanner
-        important={isImportantBanner}
         preferenceKey={`${bannerLocation}-${thisBanner.expirationDate}`}
         variant={thisBanner.decoration.variant ?? 'warning'}
         {...rest}

packages/manager/src/components/ProductNotification/ProductNotification.tsx

@@ -22,9 +22,5 @@ export const ProductNotification = ({
   const level = (severityLevelMap[severity] as NoticeVariant) ?? 'warning';
   const props = { variant: level };
 
-  return (
-    <Notice {...props} important>
-      {text}
-    </Notice>
-  );
+  return <Notice {...props}>{text}</Notice>;
 };

packages/manager/src/features/Account/AccountLogins.tsx

@@ -165,7 +165,6 @@ const AccountLogins = () => {
         isChildUser,
         resourceType: 'Account',
       })}
-      important
       variant="warning"
     />
   );

packages/manager/src/features/Account/CloseAccountDialog.tsx

@@ -19,9 +19,8 @@ interface Props {
 }
 
 const CloseAccountDialog = ({ closeDialog, open }: Props) => {
-  const [isClosingAccount, setIsClosingAccount] = React.useState<boolean>(
-    false
-  );
+  const [isClosingAccount, setIsClosingAccount] =
+    React.useState<boolean>(false);
   const [errors, setErrors] = React.useState<APIError[] | undefined>(undefined);
   const [comments, setComments] = React.useState<string>('');
   const history = useHistory();
@@ -103,11 +102,10 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
       ) : null}
       <StyledNoticeWrapper>
         <Notice
+          spacingBottom={12}
           sx={(theme) => ({
             border: `1px solid ${theme.tokens.alias.Action.Negative.Default}`,
           })}
-          important
-          spacingBottom={12}
           variant="error"
         >
           <Typography sx={{ fontSize: '0.875rem' }}>

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

@@ -66,7 +66,12 @@ export const BackupsCTA = () => {
         <IconButton
           aria-label="Dismiss notice enabling Linode backups"
           onClick={handleDismiss}
-          sx={{ padding: 0.25 }}
+          sx={(theme) => ({
+            padding: 0.25,
+            '& path': {
+              fill: theme.tokens.component.NotificationBanner.Icon,
+            },
+          })}
         >
           <CloseIcon />
         </IconButton>