refactor: Set colors for toast icons explicitly (#1170)

Author: dwesolow

web_ui/packages/ui/src/toast/toast.component.tsx

@@ -38,10 +38,10 @@ type CustomToastProps = {
 };
 
 const ICON: Record<ToastType, ReactNode> = {
-    success: <AcceptCircle />,
-    error: <CrossCircle />,
-    warning: <Alert />,
-    info: <Info />,
+    success: <AcceptCircle className={classes.icon} />,
+    error: <CrossCircle className={classes.icon} />,
+    warning: <Alert className={classes.icon} />,
+    info: <Info className={classes.icon} />,
     neutral: null,
 };
 
@@ -53,7 +53,7 @@ const ToastCloseButton = ({ id }: { id: string }) => {
             aria-label={'Close toast'}
             UNSAFE_className={classes.closeButton}
         >
-            <CloseSmall className={classes.closeIcon} />
+            <CloseSmall className={classes.icon} />
         </ActionButton>
     );
 };
@@ -95,7 +95,7 @@ const CustomToast = ({ message, id, actionButtons, type, hasCloseButton = true,
                 >
                     <Flex flex={1} alignItems={'center'} justifyContent={'space-between'}>
                         <Flex gap={'size-100'} alignItems={'center'}>
-                            <View>{icon}</View>
+                            <Flex>{icon}</Flex>
                             <Text>{message}</Text>
                         </Flex>
                         <ToastActionButtons actionButtons={actionButtons} />

web_ui/packages/ui/src/toast/toast.module.scss

@@ -32,36 +32,36 @@
     }
 }
 
-.closeIcon {
-    color: var(--closeIconColor);
+.icon {
+    fill: var(--iconColor);
 }
 
 .info {
     --backgroundColor: var(--energy-blue-shade);
     --textColor: var(--spectrum-global-color-gray-900);
-    --closeIconColor: var(--spectrum-global-color-gray-900);
+    --iconColor: var(--spectrum-global-color-gray-900);
 }
 
 .warning {
     --backgroundColor: var(--brand-daisy);
     --textColor: var(--spectrum-global-color-gray-50);
-    --closeIconColor: var(--spectrum-global-color-gray-50);
+    --iconColor: var(--spectrum-global-color-gray-50);
 }
 
 .error {
     --backgroundColor: var(--brand-coral-coral-shade1);
     --textColor: var(--spectrum-global-color-gray-900);
-    --closeIconColor: var(--spectrum-global-color-gray-900);
+    --iconColor: var(--spectrum-global-color-gray-900);
 }
 
 .success {
     --backgroundColor: var(--brand-moss);
     --textColor: var(--spectrum-global-color-gray-900);
-    --closeIconColor: var(--spectrum-global-color-gray-900);
+    --iconColor: var(--spectrum-global-color-gray-900);
 }
 
 .neutral {
     --backgroundColor: var(--spectrum-global-color-gray-400);
     --textColor: var(--spectrum-global-color-gray-900);
-    --closeIconColor: var(--spectrum-global-color-gray-900);
+    --iconColor: var(--spectrum-global-color-gray-900);
 }