fix: [M3-9894] - Use outlined warning icon in Firewall warning banner (linode#12159)

* Switch to outlined icon

* Added changeset: Use outlined icon in Firewall warning banner

* Feedback @abailly-akamai @mjac0bs

Author: hkhalil-akamai

packages/manager/.changeset/pr-12159-fixed-1746488156627.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Incorrect icon in Firewall warning banner to use outlined icon ([#12159](https://github.com/linode/manager/pull/12159))

packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts

@@ -1,4 +1,4 @@
-import { Box, omittedProps, Stack, WarningIcon } from '@linode/ui';
+import { Box, omittedProps, Stack, WarningOutlinedIcon } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
@@ -14,10 +14,12 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, {
   },
 }));
 
-export const StyledWarningIcon = styled(WarningIcon, {
+export const StyledWarningIcon = styled(WarningOutlinedIcon, {
   label: 'StyledWarningIcon',
 })(({ theme }) => ({
-  color: theme.tokens.color.Neutrals.Black,
+  '& > path': {
+    fill: theme.tokens.color.Neutrals.Black,
+  },
 }));
 
 export const StyledBanner = styled(Stack, {

packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx

@@ -43,7 +43,7 @@ export const AkamaiBanner = React.memo((props: AkamaiBannerProps) => {
       warning={warning}
     >
       <StyledBannerLabel warning={warning}>
-        <Stack alignItems="center" direction="row">
+        <Stack alignItems={warning ? 'start' : 'center'} direction="row">
           <Box sx={{ height: 18, width: 25 }}>
             {warning ? (
               <StyledWarningIcon height={18} />