fix: remove information icon customization (#1203)

Author: anusha-c18

src/components/Notifications/ToastNotification/Animate.tsx

@@ -47,6 +47,7 @@ const Animate: FC<PropsWithChildren<Props>> = ({
         element.style.display = "none";
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [show, removeState]);
 
   if (removeState) {

src/components/Notifications/ToastNotification/Toast.scss

@@ -1,6 +1,3 @@
-@import "vanilla-framework/scss/settings";
-@import "vanilla-framework/scss/build";
-
 .toast-animate {
   position: relative;
   z-index: 101;
@@ -13,21 +10,21 @@
   position: absolute;
   right: 0;
 
-  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+  @media screen and (min-width: 620px) and (max-width: 1036px) {
     width: 500px;
   }
 
-  @media screen and (min-width: $breakpoint-large) {
+  @media screen and (min-width: 1036px) {
     width: 600px;
   }
 }
 
 .toast-notification {
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 15%);
   overflow: hidden;
   z-index: 101;
 
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     left: 0;
     margin: 1.5rem auto;
     max-width: 400px;
@@ -37,7 +34,7 @@
 
 .toast-notification-list {
   background-color: white;
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
   max-height: calc(100vh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
@@ -66,7 +63,7 @@
       .dismiss-text {
         align-items: center;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
       }
     }
 
@@ -77,9 +74,9 @@
         align-items: center;
         border: none;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
         justify-content: center;
-        margin-right: $sph--small !important;
+        margin-right: 0.5rem !important;
         padding: calc(0.4rem - 1px);
 
         /* stylelint-disable max-nesting-depth */
@@ -88,25 +85,19 @@
           padding: 0;
           text-align: center;
         }
-
-        /* stylelint-disable-next-line selector-class-pattern */
-        .p-icon--info--notification {
-          @extend %icon;
-          @include vf-icon-info-coloured-themed;
-        }
         /* stylelint-enable max-nesting-depth */
       }
     }
 
-    @media screen and (max-width: $breakpoint-small) {
+    @media screen and (max-width: 620px) {
       align-items: flex-start;
       flex-direction: column;
       gap: 0.5rem;
       margin-bottom: 0.5rem;
     }
   }
 
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     bottom: 2rem;
     left: 0;
     margin: 1.5rem auto;

src/components/Notifications/ToastNotification/ToastNotification.stories.tsx

@@ -44,6 +44,7 @@ const PreloadedList = () => {
       "Please try again.",
     );
     toastNotify.toggleListView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/Notifications/ToastNotification/ToastNotificationList.tsx

@@ -28,8 +28,7 @@ export const severityOrder = [
 
 export const iconLookup = {
   positive: ICONS.success,
-  // custom name for info icon to override default color from vanilla
-  information: "info--notification",
+  information: ICONS.information,
   caution: ICONS.warning,
   negative: ICONS.error,
 } as const;
@@ -55,6 +54,7 @@ const ToastNotificationList: FC<Props> = ({
 
   useLayoutEffect(() => {
     adjustScrollPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [notifications]);
 
   // this layout effect is used to maintain scroll position of the

src/components/Notifications/ToastNotification/ToastNotificationProvider.tsx

@@ -139,6 +139,7 @@ const ToastNotificationProvider: FC<PropsWithChildren> = ({ children }) => {
         clearTimeout(notificationTimer);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const showNotificationWithDelay = () => {