From 6d17e4b9ec85a98893844cafb6df463a999ed755 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Tue, 1 Jul 2025 15:29:13 -0400
Subject: [PATCH 01/12] fix volumes upgrade banner alignment

---
 .../LinodesDetail/VolumesUpgradeBanner.tsx    | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx b/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx
index e0046622adb..7fae0ec6dce 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx
+++ b/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={() =>

From 0b283fbe38cd8eef0be9b666ee9472091831a6aa Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Tue, 1 Jul 2025 15:32:39 -0400
Subject: [PATCH 02/12] update snackbar error icon and adjust other icon sizes

---
 packages/manager/src/components/Snackbar/Snackbar.tsx | 2 +-
 packages/ui/src/assets/icons/error-outlined.svg       | 4 ++--
 packages/ui/src/assets/icons/info-outlined.svg        | 4 ++--
 packages/ui/src/assets/icons/success-outlined.svg     | 5 ++---
 packages/ui/src/assets/icons/tip-outlined.svg         | 5 ++---
 packages/ui/src/assets/icons/warning-outlined.svg     | 8 ++++----
 6 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/manager/src/components/Snackbar/Snackbar.tsx b/packages/manager/src/components/Snackbar/Snackbar.tsx
index 41c9c8d4acf..c60873c47ae 100644
--- a/packages/manager/src/components/Snackbar/Snackbar.tsx
+++ b/packages/manager/src/components/Snackbar/Snackbar.tsx
@@ -30,7 +30,7 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
     },
     '#notistack-snackbar > svg': {
       position: 'absolute',
-      left: '-45px',
+      left: '-48px',
     },
     '&.notistack-MuiContent': {
       color: theme.notificationToast.default.color,
diff --git a/packages/ui/src/assets/icons/error-outlined.svg b/packages/ui/src/assets/icons/error-outlined.svg
index 538bc951feb..b1eedd96a0e 100644
--- a/packages/ui/src/assets/icons/error-outlined.svg
+++ b/packages/ui/src/assets/icons/error-outlined.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 14.4183 5.58172 18 10 18C11.8487 18 13.551 17.3729 14.9056 16.3199L3.68014 5.09436C2.62708 6.44904 2 8.15129 2 10ZM5.09436 3.68014L16.3199 14.9056C17.3729 13.551 18 11.8487 18 10C18 5.58172 14.4183 2 10 2C8.15129 2 6.44904 2.62708 5.09436 3.68014ZM10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071Z" fill="white"/>
 </svg>
diff --git a/packages/ui/src/assets/icons/info-outlined.svg b/packages/ui/src/assets/icons/info-outlined.svg
index b9769a3f914..2c651d3f66a 100644
--- a/packages/ui/src/assets/icons/info-outlined.svg
+++ b/packages/ui/src/assets/icons/info-outlined.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM9 5C9 4.44772 9.44771 4 10 4H10.01C10.5623 4 11.01 4.44772 11.01 5C11.01 5.55228 10.5623 6 10.01 6H10C9.44771 6 9 5.55228 9 5ZM10 7.5C10.5523 7.5 11 7.94772 11 8.5V15C11 15.5523 10.5523 16 10 16C9.44771 16 9 15.5523 9 15V8.5C9 7.94772 9.44771 7.5 10 7.5Z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11 7C11 6.44772 11.4477 6 12 6H12.01C12.5623 6 13.01 6.44772 13.01 7C13.01 7.55228 12.5623 8 12.01 8H12C11.4477 8 11 7.55228 11 7ZM12 9.5C12.5523 9.5 13 9.94772 13 10.5V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V10.5C11 9.94772 11.4477 9.5 12 9.5Z" fill="white"/>
 </svg>
\ No newline at end of file
diff --git a/packages/ui/src/assets/icons/success-outlined.svg b/packages/ui/src/assets/icons/success-outlined.svg
index 0fca783ffc6..c23f4d81a39 100644
--- a/packages/ui/src/assets/icons/success-outlined.svg
+++ b/packages/ui/src/assets/icons/success-outlined.svg
@@ -1,4 +1,3 @@
-
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM14.5692 6.17781C15.0233 6.49217 15.1366 7.11513 14.8222 7.56921L10.3222 14.0692C10.161 14.302 9.90876 14.4556 9.62796 14.4918C9.34717 14.528 9.06417 14.4435 8.84921 14.2593L5.34921 11.2593C4.92988 10.8998 4.88132 10.2685 5.24074 9.84921C5.60017 9.42988 6.23147 9.38132 6.65079 9.74074L9.30894 12.0192L13.1778 6.43079C13.4922 5.97671 14.1151 5.86344 14.5692 6.17781Z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16.5692 8.17781C17.0233 8.49217 17.1366 9.11513 16.8222 9.56921L12.3222 16.0692C12.161 16.302 11.9088 16.4556 11.628 16.4918C11.3472 16.528 11.0642 16.4435 10.8492 16.2593L7.34921 13.2593C6.92988 12.8998 6.88132 12.2685 7.24074 11.8492C7.60017 11.4299 8.23147 11.3813 8.65079 11.7407L11.3089 14.0192L15.1778 8.43079C15.4922 7.97671 16.1151 7.86344 16.5692 8.17781Z" fill="white"/>
 </svg>
\ No newline at end of file
diff --git a/packages/ui/src/assets/icons/tip-outlined.svg b/packages/ui/src/assets/icons/tip-outlined.svg
index 4fbf8c6788c..80d34428bab 100644
--- a/packages/ui/src/assets/icons/tip-outlined.svg
+++ b/packages/ui/src/assets/icons/tip-outlined.svg
@@ -1,4 +1,3 @@
-
-<svg width="20" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C4.98123 2 2.5 4.50236 2.5 7.63158C2.5 9.15683 3.09074 10.5358 4.04815 11.5483C4.44562 11.9686 4.86265 12.4541 5.22349 13H10.7765C11.1373 12.4541 11.5544 11.9686 11.9518 11.5483C12.9093 10.5358 13.5 9.15683 13.5 7.63158C13.5 4.50236 11.0188 2 8 2ZM9.89384 15H6.10616C6.17561 15.3165 6.21429 15.6453 6.21429 15.9859V16.2144C6.21429 17.2006 7.01374 18 8 18C8.98626 18 9.78571 17.2006 9.78571 16.2144V15.9859C9.78571 15.6453 9.82439 15.3165 9.89384 15ZM0.5 7.63158C0.5 3.43576 3.83907 0 8 0C12.1609 0 15.5 3.43576 15.5 7.63158C15.5 9.6827 14.7033 11.5495 13.405 12.9224C12.4398 13.9433 11.7857 14.9532 11.7857 15.9859V16.2144C11.7857 18.3052 10.0908 20 8 20C5.90925 20 4.21429 18.3052 4.21429 16.2144V15.9859C4.21429 14.9532 3.56025 13.9433 2.59496 12.9224C1.29669 11.5495 0.5 9.6827 0.5 7.63158Z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C8.98123 4 6.5 6.50236 6.5 9.63158C6.5 11.1568 7.09074 12.5358 8.04815 13.5483C8.44562 13.9686 8.86265 14.4541 9.22349 15H14.7765C15.1373 14.4541 15.5544 13.9686 15.9518 13.5483C16.9093 12.5358 17.5 11.1568 17.5 9.63158C17.5 6.50236 15.0188 4 12 4ZM13.8938 17H10.1062C10.1756 17.3165 10.2143 17.6453 10.2143 17.9859V18.2144C10.2143 19.2006 11.0137 20 12 20C12.9863 20 13.7857 19.2006 13.7857 18.2144V17.9859C13.7857 17.6453 13.8244 17.3165 13.8938 17ZM4.5 9.63158C4.5 5.43576 7.83907 2 12 2C16.1609 2 19.5 5.43576 19.5 9.63158C19.5 11.6827 18.7033 13.5495 17.405 14.9224C16.4398 15.9433 15.7857 16.9532 15.7857 17.9859V18.2144C15.7857 20.3052 14.0908 22 12 22C9.90925 22 8.21429 20.3052 8.21429 18.2144V17.9859C8.21429 16.9532 7.56025 15.9433 6.59496 14.9224C5.29669 13.5495 4.5 11.6827 4.5 9.63158Z" fill="white"/>
 </svg>
\ No newline at end of file
diff --git a/packages/ui/src/assets/icons/warning-outlined.svg b/packages/ui/src/assets/icons/warning-outlined.svg
index 391587bc5bc..f73c69dc18e 100644
--- a/packages/ui/src/assets/icons/warning-outlined.svg
+++ b/packages/ui/src/assets/icons/warning-outlined.svg
@@ -1,5 +1,5 @@
-<svg width="20" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6.5C11.5523 6.5 12 6.94772 12 7.5V11.5C12 12.0523 11.5523 12.5 11 12.5C10.4477 12.5 10 12.0523 10 11.5V7.5C10 6.94772 10.4477 6.5 11 6.5Z" fill="#3D3D42"/>
-<path d="M12 15C12 15.5523 11.5523 16 11 16C10.4477 16 10 15.5523 10 15C10 14.4477 10.4477 14 11 14C11.5523 14 12 14.4477 12 15Z" fill="#3D3D42"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69825 0.34297C10.0976 0.118122 10.5482 0 11.0065 0C11.4648 0 11.9154 0.118123 12.3148 0.34297C12.7141 0.567818 13.0488 0.891801 13.2865 1.28366C13.2968 1.30065 13.3066 1.31794 13.3159 1.33552L20.8016 15.5184C21.0276 15.9171 21.1471 16.3674 21.1483 16.826C21.1496 17.2916 21.029 17.7494 20.7984 18.154C20.5678 18.5585 20.2354 18.8956 19.834 19.1317C19.4327 19.3679 18.9766 19.4948 18.511 19.4999L18.5 19.5001L3.48898 19.5C3.02338 19.4949 2.56723 19.3679 2.16593 19.1317C1.76462 18.8956 1.43213 18.5585 1.20155 18.154C0.97097 17.7494 0.85033 17.2916 0.851634 16.826C0.852918 16.3673 0.97249 15.9168 1.19863 15.518L8.69748 1.33488C8.70665 1.31752 8.71634 1.30044 8.72652 1.28366C8.96421 0.891804 9.29888 0.56782 9.69825 0.34297ZM11.0065 2C10.8919 2 10.7793 2.02953 10.6795 2.08574C10.5862 2.13822 10.5071 2.21229 10.4487 2.3016L2.95902 16.4674C2.9532 16.4784 2.94718 16.4893 2.94096 16.5001C2.88275 16.6009 2.85195 16.7152 2.85163 16.8316C2.8513 16.948 2.88146 17.0624 2.93911 17.1636C2.99675 17.2647 3.07987 17.349 3.1802 17.408C3.2793 17.4663 3.39177 17.498 3.50667 17.5H18.4933C18.6082 17.498 18.7207 17.4663 18.8198 17.408C18.9201 17.349 19.0032 17.2647 19.0609 17.1636C19.1185 17.0624 19.1487 16.948 19.1483 16.8316C19.148 16.7152 19.1172 16.6009 19.059 16.5001C19.0554 16.4938 19.0519 16.4875 19.0484 16.4812C19.0458 16.4764 19.0432 16.4716 19.0406 16.4668L11.5642 2.30137C11.5058 2.21216 11.4267 2.13817 11.3336 2.08574C11.2337 2.02953 11.1211 2 11.0065 2Z" fill="#3D3D42"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.5C12.5523 8.5 13 8.94772 13 9.5V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V9.5C11 8.94772 11.4477 8.5 12 8.5Z" fill="#3D3D42"/>
+  <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#3D3D42"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6983 2.34297C11.0976 2.11812 11.5482 2 12.0065 2C12.4648 2 12.9154 2.11812 13.3148 2.34297C13.7141 2.56782 14.0488 2.8918 14.2865 3.28366C14.2968 3.30065 14.3066 3.31794 14.3159 3.33552L21.8016 17.5184C22.0276 17.9171 22.1471 18.3674 22.1483 18.826C22.1496 19.2916 22.029 19.7494 21.7984 20.154C21.5678 20.5585 21.2354 20.8956 20.834 21.1317C20.4327 21.3679 19.9766 21.4948 19.511 21.4999L19.5 21.5001L4.48898 21.5C4.02338 21.4949 3.56723 21.3679 3.16593 21.1317C2.76462 20.8956 2.43213 20.5585 2.20155 20.154C1.97097 19.7494 1.85033 19.2916 1.85163 18.826C1.85292 18.3673 1.97249 17.9168 2.19863 17.518L9.69748 3.33488C9.70665 3.31752 9.71634 3.30044 9.72652 3.28366C9.96421 2.8918 10.2989 2.56782 10.6983 2.34297ZM12.0065 4C11.8919 4 11.7793 4.02953 11.6795 4.08574C11.5862 4.13822 11.5071 4.21229 11.4487 4.3016L3.95902 18.4674C3.9532 18.4784 3.94718 18.4893 3.94096 18.5001C3.88275 18.6009 3.85195 18.7152 3.85163 18.8316C3.8513 18.948 3.88146 19.0624 3.93911 19.1636C3.99675 19.2647 4.07987 19.349 4.1802 19.408C4.2793 19.4663 4.39177 19.498 4.50667 19.5H19.4933C19.6082 19.498 19.7207 19.4663 19.8198 19.408C19.9201 19.349 20.0032 19.2647 20.0609 19.1636C20.1185 19.0624 20.1487 18.948 20.1483 18.8316C20.148 18.7152 20.1172 18.6009 20.059 18.5001C20.0554 18.4938 20.0519 18.4875 20.0484 18.4812C20.0458 18.4764 20.0432 18.4716 20.0406 18.4668L12.5642 4.30137C12.5058 4.21216 12.4267 4.13817 12.3336 4.08574C12.2337 4.02953 12.1211 4 12.0065 4Z" fill="#3D3D42"/>
 </svg>
\ No newline at end of file

From 60e33d4a6111b2ed2c79efc050ebfb964e6eb1f0 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Wed, 2 Jul 2025 15:34:46 -0400
Subject: [PATCH 03/12] update notice error icon and variant borders

---
 packages/ui/src/assets/icons/error.svg             | 6 +++---
 packages/ui/src/components/Notice/Notice.styles.ts | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/assets/icons/error.svg b/packages/ui/src/assets/icons/error.svg
index 5cf04dc9b7d..6d6b71a9851 100644
--- a/packages/ui/src/assets/icons/error.svg
+++ b/packages/ui/src/assets/icons/error.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 1.66659C14.6024 1.66659 18.3333 5.39755 18.3333 9.99992C18.3333 14.6023 14.6024 18.3333 9.99999 18.3333C5.39762 18.3333 1.66666 14.6023 1.66666 9.99992C1.66666 5.39755 5.39762 1.66659 9.99999 1.66659ZM7.67376 6.49294C7.34767 6.16685 6.81897 6.16685 6.49289 6.49294C6.1668 6.81903 6.1668 7.34772 6.49289 7.67381L12.3262 13.5071C12.6523 13.8332 13.181 13.8332 13.5071 13.5071C13.8332 13.1811 13.8332 12.6524 13.5071 12.3263L7.67376 6.49294Z" fill="#D63C42"/>
-</svg>
\ No newline at end of file
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 1.66659C14.6024 1.66659 18.3333 5.39755 18.3333 9.99992C18.3333 14.6023 14.6024 18.3333 9.99999 18.3333C5.39762 18.3333 1.66666 14.6023 1.66666 9.99992C1.66666 5.39755 5.39762 1.66659 9.99999 1.66659ZM6.90957 11.9095C6.58349 12.2356 6.58349 12.7643 6.90957 13.0904C7.23566 13.4165 7.76435 13.4165 8.09044 13.0904L10 11.1808L11.9096 13.0904C12.2357 13.4165 12.7644 13.4165 13.0904 13.0904C13.4165 12.7643 13.4165 12.2356 13.0904 11.9095L11.1809 9.99996L13.0904 8.09039C13.4165 7.76431 13.4165 7.23561 13.0904 6.90953C12.7644 6.58344 12.2357 6.58344 11.9096 6.90953L10 8.81909L8.09044 6.90953C7.76435 6.58344 7.23566 6.58344 6.90957 6.90953C6.58349 7.23561 6.58349 7.76431 6.90957 8.09039L8.81914 9.99996L6.90957 11.9095Z" fill="#D63C42"/>
+</svg>
diff --git a/packages/ui/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts
index fa0f8641236..8a54553a5f4 100644
--- a/packages/ui/src/components/Notice/Notice.styles.ts
+++ b/packages/ui/src/components/Notice/Notice.styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
   error: {
-    borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Error.Border}`,
+    border: `1px solid ${theme.tokens.component.NotificationBanner.Error.Border}`,
     background: theme.tokens.component.NotificationBanner.Error.Background,
     '& path': {
       fill: theme.tokens.component.NotificationBanner.Error.StatusIcon,
@@ -18,7 +18,7 @@ export const useStyles = makeStyles()((theme) => ({
     position: 'relative',
   },
   info: {
-    borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Informative.Border}`,
+    border: `1px solid ${theme.tokens.component.NotificationBanner.Informative.Border}`,
     background:
       theme.tokens.component.NotificationBanner.Informative.Background,
     '& path': {
@@ -56,14 +56,14 @@ export const useStyles = makeStyles()((theme) => ({
     position: 'relative',
   },
   success: {
-    borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Success.Border}`,
+    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}`,
+    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': {

From a02b95473d7dc826ced49c7d13ed5242f0b7dc74 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Thu, 3 Jul 2025 11:03:43 -0400
Subject: [PATCH 04/12] migrate notice styles to styled components

---
 .../ui/src/components/Notice/Notice.styles.ts | 105 ++++++++++--------
 packages/ui/src/components/Notice/Notice.tsx  |  52 ++++-----
 2 files changed, 77 insertions(+), 80 deletions(-)

diff --git a/packages/ui/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts
index 8a54553a5f4..b385e31a196 100644
--- a/packages/ui/src/components/Notice/Notice.styles.ts
+++ b/packages/ui/src/components/Notice/Notice.styles.ts
@@ -1,73 +1,82 @@
-import { makeStyles } from 'tss-react/mui';
+import { styled } from '@mui/material/styles';
 
-export const useStyles = makeStyles()((theme) => ({
-  error: {
+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',
+  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: {
+  }),
+  ...(['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: {
+  }),
+  ...(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: {
+  }),
+  ...(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',
+})(({ theme }) => ({
+  '& g': {
+    stroke: theme.tokens.color.Neutrals.White,
   },
+  color: theme.tokens.color.Neutrals.White,
+  width: 20,
+  height: 20,
+  position: 'relative',
 }));
diff --git a/packages/ui/src/components/Notice/Notice.tsx b/packages/ui/src/components/Notice/Notice.tsx
index 4d50dc2b2a8..545b2d839f0 100644
--- a/packages/ui/src/components/Notice/Notice.tsx
+++ b/packages/ui/src/components/Notice/Notice.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../assets/icons';
 import { Box } from '../Box';
 import { Typography } from '../Typography';
-import { useStyles } from './Notice.styles';
+import { StyledIconBox, StyledNoticeBox } from './Notice.styles';
 
 import type { BoxProps } from '../Box';
 import type { TypographyProps } from '../Typography';
@@ -61,6 +61,14 @@ export interface NoticeProps extends BoxProps {
   variant?: NoticeVariant;
 }
 
+const variantMap: Record<NoticeVariant, NoticeVariant> = {
+  error: 'error',
+  info: 'info',
+  success: 'success',
+  tip: 'tip',
+  warning: 'warning',
+} as const;
+
 /**
 ## Usage
 
@@ -94,16 +102,6 @@ export const Notice = (props: NoticeProps) => {
     ...rest
   } = props;
 
-  const { classes, cx } = useStyles();
-
-  const variantMap = {
-    error: variant === 'error',
-    info: variant === 'info',
-    success: variant === 'success',
-    tip: variant === 'tip',
-    warning: variant === 'warning',
-  };
-
   const errorScrollClassName = bypassValidation
     ? ''
     : errorGroup
@@ -120,19 +118,8 @@ export const Notice = (props: NoticeProps) => {
       };
 
   return (
-    <Box
-      className={cx(
-        classes.root,
-        {
-          [classes.error]: variantMap.error,
-          [classes.info]: variantMap.info || variantMap.tip,
-          [classes.success]: variantMap.success,
-          [classes.warning]: variantMap.warning,
-          [errorScrollClassName]: variantMap.error,
-        },
-        'notice',
-        className,
-      )}
+    <StyledNoticeBox
+      className={`notice ${variant === 'error' ? errorScrollClassName : ''} ${className}`}
       data-testid={dataTestId ?? `notice${variant ? `-${variant}` : ''}`}
       role="alert"
       sx={[
@@ -146,22 +133,23 @@ export const Notice = (props: NoticeProps) => {
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
+      variant={variantMap[variant ?? 'info']}
       {...dataAttributes}
       {...rest}
     >
-      <Box
+      <StyledIconBox
         sx={(theme) => ({
           display: 'flex',
           alignSelf: forceImportantIconVerticalCenter ? 'center' : 'flex-start',
           marginRight: theme.spacingFunction(8),
         })}
       >
-        {variantMap.error && <ErrorIcon className={classes.icon} />}
-        {variantMap.info && <InfoIcon className={classes.icon} />}
-        {variantMap.success && <CheckIcon className={classes.icon} />}
-        {variantMap.tip && <LightBulbIcon className={classes.icon} />}
-        {variantMap.warning && <WarningIcon className={classes.icon} />}
-      </Box>
+        {variant === 'error' && <ErrorIcon />}
+        {variant === 'info' && <InfoIcon />}
+        {variant === 'success' && <CheckIcon />}
+        {variant === 'tip' && <LightBulbIcon />}
+        {variant === 'warning' && <WarningIcon />}
+      </StyledIconBox>
       <Box sx={{ width: '100%' }}>
         {text || typeof children === 'string' ? (
           <Typography {...typeProps}>{text ?? children}</Typography>
@@ -169,6 +157,6 @@ export const Notice = (props: NoticeProps) => {
           children
         )}
       </Box>
-    </Box>
+    </StyledNoticeBox>
   );
 };

From 1e72d3ea75573098ee1fdeda5d1f4b0600ace785 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Thu, 3 Jul 2025 12:27:34 -0400
Subject: [PATCH 05/12] add prop to fit the notice/banner width with the
 content

---
 packages/ui/src/components/Notice/Notice.tsx | 8 +++++++-
 packages/ui/src/foundations/themes/light.ts  | 5 -----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/Notice/Notice.tsx b/packages/ui/src/components/Notice/Notice.tsx
index 545b2d839f0..53fce22f779 100644
--- a/packages/ui/src/components/Notice/Notice.tsx
+++ b/packages/ui/src/components/Notice/Notice.tsx
@@ -31,6 +31,10 @@ export interface NoticeProps extends BoxProps {
    * The error group this error belongs to. This is used to scroll to the error when the user clicks on the error.
    */
   errorGroup?: string;
+  /**
+   * If true, the width of the notice will only span the content instead of the container.
+   */
+  fitContentWidth?: boolean;
   /**
    * If true, the important icon will be vertically centered with the text no matter the height of the text.
    */
@@ -87,6 +91,7 @@ const variantMap: Record<NoticeVariant, NoticeVariant> = {
 export const Notice = (props: NoticeProps) => {
   const {
     bypassValidation = false,
+    fitContentWidth = false,
     children,
     className,
     dataTestId,
@@ -119,7 +124,7 @@ export const Notice = (props: NoticeProps) => {
 
   return (
     <StyledNoticeBox
-      className={`notice ${variant === 'error' ? errorScrollClassName : ''} ${className}`}
+      className={`notice ${variant === 'error' ? errorScrollClassName : ''} ${className ? className : ''}`}
       data-testid={dataTestId ?? `notice${variant ? `-${variant}` : ''}`}
       role="alert"
       sx={[
@@ -130,6 +135,7 @@ export const Notice = (props: NoticeProps) => {
               : theme.spacingFunction(16),
           marginLeft: spacingLeft !== undefined ? `${spacingLeft}px` : 0,
           marginTop: spacingTop !== undefined ? `${spacingTop}px` : 0,
+          width: fitContentWidth ? 'fit-content' : '100%',
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index dd8ee4348d5..beeeab5bd80 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -1231,11 +1231,6 @@ export const lightTheme: ThemeOptions = {
         outlined: {
           border: `1px solid ${Color.Neutrals[30]}`,
         },
-        root: {
-          '& .notice': {
-            width: 'fit-content',
-          },
-        },
         rounded: {
           borderRadius: 0,
         },

From 153dc4d046f8abdd90468f1cfc010e646a59d6a6 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Thu, 3 Jul 2025 12:46:06 -0400
Subject: [PATCH 06/12] Added changeset: Notification banner stroke, width,
 error icon

---
 .../manager/.changeset/pr-12471-changed-1751561166369.md     | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-12471-changed-1751561166369.md

diff --git a/packages/manager/.changeset/pr-12471-changed-1751561166369.md b/packages/manager/.changeset/pr-12471-changed-1751561166369.md
new file mode 100644
index 00000000000..ccbcc54f51a
--- /dev/null
+++ b/packages/manager/.changeset/pr-12471-changed-1751561166369.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Notification banner stroke, width, error icon ([#12471](https://github.com/linode/manager/pull/12471))

From ce37ae802a1fb864aba7a38e89597e9a61e24a89 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Thu, 3 Jul 2025 12:47:02 -0400
Subject: [PATCH 07/12] Added changeset: Volumes upgrade banner alignment

---
 packages/manager/.changeset/pr-12471-fixed-1751561222068.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-12471-fixed-1751561222068.md

diff --git a/packages/manager/.changeset/pr-12471-fixed-1751561222068.md b/packages/manager/.changeset/pr-12471-fixed-1751561222068.md
new file mode 100644
index 00000000000..318c9c9453a
--- /dev/null
+++ b/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))

From 52200984850afe459bcc41b9b2675d90f93e14e2 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Thu, 3 Jul 2025 13:59:31 -0400
Subject: [PATCH 08/12] fix unit test

---
 packages/ui/src/components/Notice/Notice.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Notice/Notice.test.tsx b/packages/ui/src/components/Notice/Notice.test.tsx
index dd05e3984dc..2565021d175 100644
--- a/packages/ui/src/components/Notice/Notice.test.tsx
+++ b/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;');
   });
 

From 200e7b7a18cc0f8056dd17c4475bd976cc29d285 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Mon, 7 Jul 2025 17:22:47 -0400
Subject: [PATCH 09/12] address feedback pt 1

---
 .../src/components/Snackbar/Snackbar.tsx      |  6 ++++
 .../ui/src/assets/icons/info-outlined.svg     |  2 +-
 .../ui/src/components/Notice/Notice.styles.ts |  6 +---
 packages/ui/src/components/Notice/Notice.tsx  | 36 +++++++++----------
 .../components/TooltipIcon/TooltipIcon.tsx    |  2 +-
 packages/ui/src/foundations/themes/dark.ts    |  2 ++
 packages/ui/src/foundations/themes/light.ts   |  2 ++
 7 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/packages/manager/src/components/Snackbar/Snackbar.tsx b/packages/manager/src/components/Snackbar/Snackbar.tsx
index c60873c47ae..029f2ba420c 100644
--- a/packages/manager/src/components/Snackbar/Snackbar.tsx
+++ b/packages/manager/src/components/Snackbar/Snackbar.tsx
@@ -31,6 +31,9 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
     '#notistack-snackbar > svg': {
       position: 'absolute',
       left: '-48px',
+      '& path': {
+        fill: theme.notificationToast.default.icon,
+      },
     },
     '&.notistack-MuiContent': {
       color: theme.notificationToast.default.color,
@@ -61,6 +64,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',
diff --git a/packages/ui/src/assets/icons/info-outlined.svg b/packages/ui/src/assets/icons/info-outlined.svg
index 2c651d3f66a..2c6c055fe7c 100644
--- a/packages/ui/src/assets/icons/info-outlined.svg
+++ b/packages/ui/src/assets/icons/info-outlined.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11 7C11 6.44772 11.4477 6 12 6H12.01C12.5623 6 13.01 6.44772 13.01 7C13.01 7.55228 12.5623 8 12.01 8H12C11.4477 8 11 7.55228 11 7ZM12 9.5C12.5523 9.5 13 9.94772 13 10.5V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V10.5C11 9.94772 11.4477 9.5 12 9.5Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11 7C11 6.44772 11.4477 6 12 6H12.01C12.5623 6 13.01 6.44772 13.01 7C13.01 7.55228 12.5623 8 12.01 8H12C11.4477 8 11 7.55228 11 7ZM12 9.5C12.5523 9.5 13 9.94772 13 10.5V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V10.5C11 9.94772 11.4477 9.5 12 9.5Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/packages/ui/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts
index b385e31a196..71e502e10a8 100644
--- a/packages/ui/src/components/Notice/Notice.styles.ts
+++ b/packages/ui/src/components/Notice/Notice.styles.ts
@@ -71,11 +71,7 @@ export const StyledNoticeBox = styled(Box, {
 
 export const StyledIconBox = styled(Box, {
   label: 'StyledIconBox',
-})(({ theme }) => ({
-  '& g': {
-    stroke: theme.tokens.color.Neutrals.White,
-  },
-  color: theme.tokens.color.Neutrals.White,
+})(() => ({
   width: 20,
   height: 20,
   position: 'relative',
diff --git a/packages/ui/src/components/Notice/Notice.tsx b/packages/ui/src/components/Notice/Notice.tsx
index 53fce22f779..cad6806348c 100644
--- a/packages/ui/src/components/Notice/Notice.tsx
+++ b/packages/ui/src/components/Notice/Notice.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useStyles } from 'tss-react/mui';
 
 import {
   CheckIcon,
@@ -65,14 +66,6 @@ export interface NoticeProps extends BoxProps {
   variant?: NoticeVariant;
 }
 
-const variantMap: Record<NoticeVariant, NoticeVariant> = {
-  error: 'error',
-  info: 'info',
-  success: 'success',
-  tip: 'tip',
-  warning: 'warning',
-} as const;
-
 /**
 ## Usage
 
@@ -107,24 +100,31 @@ export const Notice = (props: NoticeProps) => {
     ...rest
   } = props;
 
+  const { cx } = useStyles();
+
   const errorScrollClassName = bypassValidation
     ? ''
     : errorGroup
       ? `error-for-scroll-${errorGroup}`
       : `error-for-scroll`;
 
-  const dataAttributes = !variantMap.error
-    ? {
-        'data-qa-notice': true,
-      }
-    : {
-        'data-qa-error': true,
-        'data-qa-notice': true,
-      };
+  const dataAttributes =
+    variant !== 'error'
+      ? {
+          'data-qa-notice': true,
+        }
+      : {
+          'data-qa-error': true,
+          'data-qa-notice': true,
+        };
 
   return (
     <StyledNoticeBox
-      className={`notice ${variant === 'error' ? errorScrollClassName : ''} ${className ? className : ''}`}
+      className={cx(
+        'notice',
+        { [errorScrollClassName]: variant === 'error' },
+        className,
+      )}
       data-testid={dataTestId ?? `notice${variant ? `-${variant}` : ''}`}
       role="alert"
       sx={[
@@ -139,7 +139,7 @@ export const Notice = (props: NoticeProps) => {
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
-      variant={variantMap[variant ?? 'info']}
+      variant={variant ?? 'info'}
       {...dataAttributes}
       {...rest}
     >
diff --git a/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx b/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx
index 454c9a4de6e..87d76621759 100644
--- a/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx
+++ b/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx
@@ -136,7 +136,7 @@ export const TooltipIcon = (props: TooltipIconProps) => {
           component={InfoOutlined}
           data-testid="tooltip-info-icon"
           sx={cdsIconProps.rootStyle}
-          viewBox={cdsIconProps.viewBox}
+          viewBox="0 0 24 24"
         />
       );
       break;
diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts
index 88fb0533b9f..16124032e76 100644
--- a/packages/ui/src/foundations/themes/dark.ts
+++ b/packages/ui/src/foundations/themes/dark.ts
@@ -111,6 +111,7 @@ export const notificationToast = {
     backgroundColor: NotificationToast.Informative.Background,
     borderLeft: `48px solid ${NotificationToast.Informative.IconBackground}`,
     color: NotificationToast.Text,
+    icon: NotificationToast.Informative.StatusIcon,
   },
   error: {
     backgroundColor: NotificationToast.Error.Background,
@@ -127,6 +128,7 @@ export const notificationToast = {
   warning: {
     backgroundColor: NotificationToast.Warning.Background,
     borderLeft: `48px solid ${NotificationToast.Warning.IconBackground}`,
+    icon: NotificationToast.Warning.StatusIcon,
   },
   tip: {
     backgroundColor: NotificationToast.Informative.Background,
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index a27add6da29..cfe840decf5 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -117,6 +117,7 @@ export const notificationToast = {
     backgroundColor: NotificationToast.Informative.Background,
     borderLeft: `48px solid ${NotificationToast.Informative.IconBackground}`,
     color: NotificationToast.Text,
+    icon: NotificationToast.Informative.StatusIcon,
   },
   error: {
     backgroundColor: NotificationToast.Error.Background,
@@ -133,6 +134,7 @@ export const notificationToast = {
   warning: {
     backgroundColor: NotificationToast.Warning.Background,
     borderLeft: `48px solid ${NotificationToast.Warning.IconBackground}`,
+    icon: NotificationToast.Warning.StatusIcon,
   },
   tip: {
     backgroundColor: NotificationToast.Informative.Background,

From a710cb697471bb42ac86abc9a43aeaacb6626adc Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Mon, 7 Jul 2025 17:29:05 -0400
Subject: [PATCH 10/12] Added changeset: Notification banner stroke, width,
 error icon

---
 .../.changeset/pr-12471-changed-1751923646046.md}               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename packages/{manager/.changeset/pr-12471-changed-1751561166369.md => ui/.changeset/pr-12471-changed-1751923646046.md} (80%)

diff --git a/packages/manager/.changeset/pr-12471-changed-1751561166369.md b/packages/ui/.changeset/pr-12471-changed-1751923646046.md
similarity index 80%
rename from packages/manager/.changeset/pr-12471-changed-1751561166369.md
rename to packages/ui/.changeset/pr-12471-changed-1751923646046.md
index ccbcc54f51a..a56e13a63fa 100644
--- a/packages/manager/.changeset/pr-12471-changed-1751561166369.md
+++ b/packages/ui/.changeset/pr-12471-changed-1751923646046.md
@@ -1,5 +1,5 @@
 ---
-"@linode/manager": Changed
+"@linode/ui": Changed
 ---
 
 Notification banner stroke, width, error icon ([#12471](https://github.com/linode/manager/pull/12471))

From eae36f5bb34b3973e02e61a8095c766709c19301 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Tue, 8 Jul 2025 16:29:01 -0400
Subject: [PATCH 11/12] feedback

---
 packages/ui/src/components/Notice/Notice.styles.ts | 2 ++
 packages/ui/src/components/Notice/Notice.tsx       | 6 ++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts
index 71e502e10a8..54f197037b7 100644
--- a/packages/ui/src/components/Notice/Notice.styles.ts
+++ b/packages/ui/src/components/Notice/Notice.styles.ts
@@ -10,6 +10,7 @@ export const StyledNoticeBox = styled(Box, {
   shouldForwardProp: omittedProps(['variant']),
 })<{ variant: NoticeVariant }>(({ theme, variant }) => ({
   display: 'flex',
+  gap: '0.5rem',
   alignItems: 'center',
   '& + .notice': {
     marginTop: `${theme.spacingFunction(16)} !important`,
@@ -72,6 +73,7 @@ export const StyledNoticeBox = styled(Box, {
 export const StyledIconBox = styled(Box, {
   label: 'StyledIconBox',
 })(() => ({
+  display: 'flex',
   width: 20,
   height: 20,
   position: 'relative',
diff --git a/packages/ui/src/components/Notice/Notice.tsx b/packages/ui/src/components/Notice/Notice.tsx
index cad6806348c..2a1d309b1c8 100644
--- a/packages/ui/src/components/Notice/Notice.tsx
+++ b/packages/ui/src/components/Notice/Notice.tsx
@@ -144,11 +144,9 @@ export const Notice = (props: NoticeProps) => {
       {...rest}
     >
       <StyledIconBox
-        sx={(theme) => ({
-          display: 'flex',
+        sx={{
           alignSelf: forceImportantIconVerticalCenter ? 'center' : 'flex-start',
-          marginRight: theme.spacingFunction(8),
-        })}
+        }}
       >
         {variant === 'error' && <ErrorIcon />}
         {variant === 'info' && <InfoIcon />}

From 7455cb69e134a940f7784b20ae69a35de9765f1b Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Mon, 14 Jul 2025 17:30:07 -0400
Subject: [PATCH 12/12] fix center alignment for single line toasts and fill
 color

---
 packages/manager/src/components/Snackbar/Snackbar.tsx | 1 +
 packages/ui/src/assets/icons/success-outlined.svg     | 2 +-
 packages/ui/src/assets/icons/tip-outlined.svg         | 2 +-
 packages/ui/src/assets/icons/warning-outlined.svg     | 6 +++---
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/components/Snackbar/Snackbar.tsx b/packages/manager/src/components/Snackbar/Snackbar.tsx
index 029f2ba420c..cf9168e7407 100644
--- a/packages/manager/src/components/Snackbar/Snackbar.tsx
+++ b/packages/manager/src/components/Snackbar/Snackbar.tsx
@@ -31,6 +31,7 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
     '#notistack-snackbar > svg': {
       position: 'absolute',
       left: '-48px',
+      top: 6,
       '& path': {
         fill: theme.notificationToast.default.icon,
       },
diff --git a/packages/ui/src/assets/icons/success-outlined.svg b/packages/ui/src/assets/icons/success-outlined.svg
index c23f4d81a39..56d320bce2e 100644
--- a/packages/ui/src/assets/icons/success-outlined.svg
+++ b/packages/ui/src/assets/icons/success-outlined.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16.5692 8.17781C17.0233 8.49217 17.1366 9.11513 16.8222 9.56921L12.3222 16.0692C12.161 16.302 11.9088 16.4556 11.628 16.4918C11.3472 16.528 11.0642 16.4435 10.8492 16.2593L7.34921 13.2593C6.92988 12.8998 6.88132 12.2685 7.24074 11.8492C7.60017 11.4299 8.23147 11.3813 8.65079 11.7407L11.3089 14.0192L15.1778 8.43079C15.4922 7.97671 16.1151 7.86344 16.5692 8.17781Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16.5692 8.17781C17.0233 8.49217 17.1366 9.11513 16.8222 9.56921L12.3222 16.0692C12.161 16.302 11.9088 16.4556 11.628 16.4918C11.3472 16.528 11.0642 16.4435 10.8492 16.2593L7.34921 13.2593C6.92988 12.8998 6.88132 12.2685 7.24074 11.8492C7.60017 11.4299 8.23147 11.3813 8.65079 11.7407L11.3089 14.0192L15.1778 8.43079C15.4922 7.97671 16.1151 7.86344 16.5692 8.17781Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/packages/ui/src/assets/icons/tip-outlined.svg b/packages/ui/src/assets/icons/tip-outlined.svg
index 80d34428bab..27d17e1df92 100644
--- a/packages/ui/src/assets/icons/tip-outlined.svg
+++ b/packages/ui/src/assets/icons/tip-outlined.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C8.98123 4 6.5 6.50236 6.5 9.63158C6.5 11.1568 7.09074 12.5358 8.04815 13.5483C8.44562 13.9686 8.86265 14.4541 9.22349 15H14.7765C15.1373 14.4541 15.5544 13.9686 15.9518 13.5483C16.9093 12.5358 17.5 11.1568 17.5 9.63158C17.5 6.50236 15.0188 4 12 4ZM13.8938 17H10.1062C10.1756 17.3165 10.2143 17.6453 10.2143 17.9859V18.2144C10.2143 19.2006 11.0137 20 12 20C12.9863 20 13.7857 19.2006 13.7857 18.2144V17.9859C13.7857 17.6453 13.8244 17.3165 13.8938 17ZM4.5 9.63158C4.5 5.43576 7.83907 2 12 2C16.1609 2 19.5 5.43576 19.5 9.63158C19.5 11.6827 18.7033 13.5495 17.405 14.9224C16.4398 15.9433 15.7857 16.9532 15.7857 17.9859V18.2144C15.7857 20.3052 14.0908 22 12 22C9.90925 22 8.21429 20.3052 8.21429 18.2144V17.9859C8.21429 16.9532 7.56025 15.9433 6.59496 14.9224C5.29669 13.5495 4.5 11.6827 4.5 9.63158Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C8.98123 4 6.5 6.50236 6.5 9.63158C6.5 11.1568 7.09074 12.5358 8.04815 13.5483C8.44562 13.9686 8.86265 14.4541 9.22349 15H14.7765C15.1373 14.4541 15.5544 13.9686 15.9518 13.5483C16.9093 12.5358 17.5 11.1568 17.5 9.63158C17.5 6.50236 15.0188 4 12 4ZM13.8938 17H10.1062C10.1756 17.3165 10.2143 17.6453 10.2143 17.9859V18.2144C10.2143 19.2006 11.0137 20 12 20C12.9863 20 13.7857 19.2006 13.7857 18.2144V17.9859C13.7857 17.6453 13.8244 17.3165 13.8938 17ZM4.5 9.63158C4.5 5.43576 7.83907 2 12 2C16.1609 2 19.5 5.43576 19.5 9.63158C19.5 11.6827 18.7033 13.5495 17.405 14.9224C16.4398 15.9433 15.7857 16.9532 15.7857 17.9859V18.2144C15.7857 20.3052 14.0908 22 12 22C9.90925 22 8.21429 20.3052 8.21429 18.2144V17.9859C8.21429 16.9532 7.56025 15.9433 6.59496 14.9224C5.29669 13.5495 4.5 11.6827 4.5 9.63158Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/packages/ui/src/assets/icons/warning-outlined.svg b/packages/ui/src/assets/icons/warning-outlined.svg
index f73c69dc18e..e6add355be7 100644
--- a/packages/ui/src/assets/icons/warning-outlined.svg
+++ b/packages/ui/src/assets/icons/warning-outlined.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.5C12.5523 8.5 13 8.94772 13 9.5V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V9.5C11 8.94772 11.4477 8.5 12 8.5Z" fill="#3D3D42"/>
-  <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#3D3D42"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6983 2.34297C11.0976 2.11812 11.5482 2 12.0065 2C12.4648 2 12.9154 2.11812 13.3148 2.34297C13.7141 2.56782 14.0488 2.8918 14.2865 3.28366C14.2968 3.30065 14.3066 3.31794 14.3159 3.33552L21.8016 17.5184C22.0276 17.9171 22.1471 18.3674 22.1483 18.826C22.1496 19.2916 22.029 19.7494 21.7984 20.154C21.5678 20.5585 21.2354 20.8956 20.834 21.1317C20.4327 21.3679 19.9766 21.4948 19.511 21.4999L19.5 21.5001L4.48898 21.5C4.02338 21.4949 3.56723 21.3679 3.16593 21.1317C2.76462 20.8956 2.43213 20.5585 2.20155 20.154C1.97097 19.7494 1.85033 19.2916 1.85163 18.826C1.85292 18.3673 1.97249 17.9168 2.19863 17.518L9.69748 3.33488C9.70665 3.31752 9.71634 3.30044 9.72652 3.28366C9.96421 2.8918 10.2989 2.56782 10.6983 2.34297ZM12.0065 4C11.8919 4 11.7793 4.02953 11.6795 4.08574C11.5862 4.13822 11.5071 4.21229 11.4487 4.3016L3.95902 18.4674C3.9532 18.4784 3.94718 18.4893 3.94096 18.5001C3.88275 18.6009 3.85195 18.7152 3.85163 18.8316C3.8513 18.948 3.88146 19.0624 3.93911 19.1636C3.99675 19.2647 4.07987 19.349 4.1802 19.408C4.2793 19.4663 4.39177 19.498 4.50667 19.5H19.4933C19.6082 19.498 19.7207 19.4663 19.8198 19.408C19.9201 19.349 20.0032 19.2647 20.0609 19.1636C20.1185 19.0624 20.1487 18.948 20.1483 18.8316C20.148 18.7152 20.1172 18.6009 20.059 18.5001C20.0554 18.4938 20.0519 18.4875 20.0484 18.4812C20.0458 18.4764 20.0432 18.4716 20.0406 18.4668L12.5642 4.30137C12.5058 4.21216 12.4267 4.13817 12.3336 4.08574C12.2337 4.02953 12.1211 4 12.0065 4Z" fill="#3D3D42"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.5C12.5523 8.5 13 8.94772 13 9.5V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V9.5C11 8.94772 11.4477 8.5 12 8.5Z" fill="currentColor"/>
+  <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6983 2.34297C11.0976 2.11812 11.5482 2 12.0065 2C12.4648 2 12.9154 2.11812 13.3148 2.34297C13.7141 2.56782 14.0488 2.8918 14.2865 3.28366C14.2968 3.30065 14.3066 3.31794 14.3159 3.33552L21.8016 17.5184C22.0276 17.9171 22.1471 18.3674 22.1483 18.826C22.1496 19.2916 22.029 19.7494 21.7984 20.154C21.5678 20.5585 21.2354 20.8956 20.834 21.1317C20.4327 21.3679 19.9766 21.4948 19.511 21.4999L19.5 21.5001L4.48898 21.5C4.02338 21.4949 3.56723 21.3679 3.16593 21.1317C2.76462 20.8956 2.43213 20.5585 2.20155 20.154C1.97097 19.7494 1.85033 19.2916 1.85163 18.826C1.85292 18.3673 1.97249 17.9168 2.19863 17.518L9.69748 3.33488C9.70665 3.31752 9.71634 3.30044 9.72652 3.28366C9.96421 2.8918 10.2989 2.56782 10.6983 2.34297ZM12.0065 4C11.8919 4 11.7793 4.02953 11.6795 4.08574C11.5862 4.13822 11.5071 4.21229 11.4487 4.3016L3.95902 18.4674C3.9532 18.4784 3.94718 18.4893 3.94096 18.5001C3.88275 18.6009 3.85195 18.7152 3.85163 18.8316C3.8513 18.948 3.88146 19.0624 3.93911 19.1636C3.99675 19.2647 4.07987 19.349 4.1802 19.408C4.2793 19.4663 4.39177 19.498 4.50667 19.5H19.4933C19.6082 19.498 19.7207 19.4663 19.8198 19.408C19.9201 19.349 20.0032 19.2647 20.0609 19.1636C20.1185 19.0624 20.1487 18.948 20.1483 18.8316C20.148 18.7152 20.1172 18.6009 20.059 18.5001C20.0554 18.4938 20.0519 18.4875 20.0484 18.4812C20.0458 18.4764 20.0432 18.4716 20.0406 18.4668L12.5642 4.30137C12.5058 4.21216 12.4267 4.13817 12.3336 4.08574C12.2337 4.02953 12.1211 4 12.0065 4Z" fill="currentColor"/>
 </svg>
\ No newline at end of file