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>

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -250,12 +250,11 @@ const DatabaseCreate = () => {
         />
         {isRestricted && (
           <Notice
+            spacingTop={16}
             text={getRestrictedResourceText({
               action: 'create',
               resourceType: 'Databases',
             })}
-            important
-            spacingTop={16}
             variant="error"
           />
         )}

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx

@@ -183,7 +183,7 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => {
         </Typography>
         <Link to={ADVANCED_CONFIG_LEARN_MORE_LINK}>Learn more.</Link>
 
-        <Notice important sx={{ mb: 1, mt: 3 }} variant="info">
+        <Notice sx={{ mb: 1, mt: 3 }} variant="info">
           <Typography>{ADVANCED_CONFIG_INFO}</Typography>
         </Notice>
 

packages/manager/src/features/Databases/DatabaseDetail/index.tsx

@@ -65,11 +65,8 @@ export const DatabaseDetail = () => {
     id,
   });
 
-  const {
-    editableLabelError,
-    resetEditableLabel,
-    setEditableLabelError,
-  } = useEditableLabelState();
+  const { editableLabelError, resetEditableLabel, setEditableLabelError } =
+    useEditableLabelState();
 
   if (error) {
     return (
@@ -207,7 +204,6 @@ export const DatabaseDetail = () => {
             text={
               "You don't have permissions to modify this Database. Please contact an account administrator for details."
             }
-            important
             variant="warning"
           />
         )}

packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx

@@ -81,18 +81,14 @@ export const CreateDomain = () => {
     },
   ];
 
-  const [
-    defaultRecordsSetting,
-    setDefaultRecordsSetting,
-  ] = React.useState<DefaultRecordsSetting>(defaultRecords[0]);
+  const [defaultRecordsSetting, setDefaultRecordsSetting] =
+    React.useState<DefaultRecordsSetting>(defaultRecords[0]);
 
   const [selectedDefaultLinode, setSelectedDefaultLinode] = React.useState<
     Linode | undefined
   >(undefined);
-  const [
-    selectedDefaultNodeBalancer,
-    setSelectedDefaultNodeBalancer,
-  ] = React.useState<NodeBalancer | undefined>(undefined);
+  const [selectedDefaultNodeBalancer, setSelectedDefaultNodeBalancer] =
+    React.useState<NodeBalancer | undefined>(undefined);
 
   const { values, ...formik } = useFormik({
     initialValues: {
@@ -303,7 +299,6 @@ export const CreateDomain = () => {
             text={
               "You don't have permissions to create a new Domain. Please contact an account administrator for details."
             }
-            important
             variant="error"
           />
         )}

packages/manager/src/features/Domains/DomainBanner.tsx

@@ -25,7 +25,6 @@ export const DomainBanner = React.memo((props: DomainBannerProps) => {
         expiry: DateTime.utc().plus({ days: 30 }).toISO(),
         label: KEY,
       }}
-      important
       preferenceKey={KEY}
       variant="warning"
     >

packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx

@@ -82,7 +82,6 @@ export const FirewallDeviceLanding = React.memo(
             text={
               "You don't have permissions to modify this Firewall. Please contact an account administrator for details."
             }
-            important
             variant="error"
           />
         ) : null}

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx

@@ -53,9 +53,8 @@ interface Drawer {
 
 export const FirewallRulesLanding = React.memo((props: Props) => {
   const { disabled, firewallID, rules } = props;
-  const { mutateAsync: updateFirewallRules } = useUpdateFirewallRulesMutation(
-    firewallID
-  );
+  const { mutateAsync: updateFirewallRules } =
+    useUpdateFirewallRulesMutation(firewallID);
   const { data: devices } = useAllFirewallDevicesQuery(firewallID);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -95,10 +94,8 @@ export const FirewallRulesLanding = React.memo((props: Props) => {
   const [generalErrors, setGeneralErrors] = React.useState<
     APIError[] | undefined
   >();
-  const [
-    discardChangesModalOpen,
-    setDiscardChangesModalOpen,
-  ] = React.useState<boolean>(false);
+  const [discardChangesModalOpen, setDiscardChangesModalOpen] =
+    React.useState<boolean>(false);
 
   const openRuleDrawer = (
     category: Category,
@@ -116,10 +113,10 @@ export const FirewallRulesLanding = React.memo((props: Props) => {
         category === 'inbound' && mode === 'create'
           ? '/firewalls/$id/rules/add/inbound'
           : category === 'inbound' && mode === 'edit'
-          ? `/firewalls/$id/rules/edit/inbound/$ruleId`
-          : category === 'outbound' && mode === 'create'
-          ? '/firewalls/$id/rules/add/outbound'
-          : `/firewalls/$id/rules/edit/outbound/$ruleId`,
+            ? `/firewalls/$id/rules/edit/inbound/$ruleId`
+            : category === 'outbound' && mode === 'create'
+              ? '/firewalls/$id/rules/add/outbound'
+              : `/firewalls/$id/rules/edit/outbound/$ruleId`,
     });
   };
 
@@ -319,12 +316,14 @@ export const FirewallRulesLanding = React.memo((props: Props) => {
     }
   }, [status, reset]);
 
-  const inboundRules = React.useMemo(() => editorStateToRules(inboundState), [
-    inboundState,
-  ]);
-  const outboundRules = React.useMemo(() => editorStateToRules(outboundState), [
-    outboundState,
-  ]);
+  const inboundRules = React.useMemo(
+    () => editorStateToRules(inboundState),
+    [inboundState]
+  );
+  const outboundRules = React.useMemo(
+    () => editorStateToRules(outboundState),
+    [outboundState]
+  );
 
   // This is for the Rule Drawer. If there is a rule to modify,
   // we need to pass it to the drawer to pre-populate the form fields.
@@ -385,7 +384,6 @@ export const FirewallRulesLanding = React.memo((props: Props) => {
           text={
             "You don't have permissions to modify this Firewall. Please contact an account administrator for details."
           }
-          important
           variant="error"
         />
       ) : null}
@@ -495,8 +493,8 @@ interface DiscardChangesDialogProps {
   isOpen: boolean;
 }
 
-export const DiscardChangesDialog: React.FC<DiscardChangesDialogProps> = React.memo(
-  (props) => {
+export const DiscardChangesDialog: React.FC<DiscardChangesDialogProps> =
+  React.memo((props) => {
     const { handleClose, handleDiscard, isOpen } = props;
 
     const actions = React.useCallback(
@@ -527,5 +525,4 @@ export const DiscardChangesDialog: React.FC<DiscardChangesDialogProps> = React.m
         </Typography>
       </ConfirmationDialog>
     );
-  }
-);
+  });

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

@@ -64,7 +64,6 @@ export const APIMaintenanceBanner = React.memo((props: Props) => {
 
     return (
       <DismissibleBanner
-        important
         key={scheduledAPIMaintenance.id}
         preferenceKey={scheduledAPIMaintenance.id}
         variant="warning"

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

@@ -27,7 +27,6 @@ export const ComplianceBanner = () => {
           Review Update
         </StyledActionButton>
       }
-      important
       preferenceKey="gdpr-compliance"
       variant="warning"
     >

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

@@ -35,7 +35,6 @@ export const CreditCardExpiredBanner = () => {
         </Button>
       }
       forceImportantIconVerticalCenter
-      important
       preferenceKey={'credit-card-expired'}
       variant="error"
     >

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

@@ -5,12 +5,12 @@ import { SupportLink } from 'src/components/SupportLink';
 
 export const DatabaseMigrationInfoBanner = () => {
   return (
-    <Notice important top={10} variant="warning">
+    <Notice top={10} variant="warning">
       <Typography
+        lineHeight="20px"
         sx={(theme) => ({
           font: theme.font.bold,
         })}
-        lineHeight="20px"
       >
         Legacy clusters decommission
       </Typography>

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

@@ -131,7 +131,7 @@ const EmailBounceNotification = React.memo((props: Props) => {
   }
 
   return (
-    <Notice forceImportantIconVerticalCenter important variant="warning">
+    <Notice forceImportantIconVerticalCenter variant="warning">
       <Grid
         container
         display="flex"