Updating ActionableMessage to use theme colors (#13899)

ui/components/ui/actionable-message/actionable-message.js

@@ -6,13 +6,13 @@ import InfoTooltipIcon from '../info-tooltip/info-tooltip-icon';
 
 const CLASSNAME_WARNING = 'actionable-message--warning';
 const CLASSNAME_DANGER = 'actionable-message--danger';
-const CLASSNAME_INFO = 'actionable-message--info';
+const CLASSNAME_SUCCESS = 'actionable-message--success';
 const CLASSNAME_WITH_RIGHT_BUTTON = 'actionable-message--with-right-button';
 
-const typeHash = {
+export const typeHash = {
   warning: CLASSNAME_WARNING,
   danger: CLASSNAME_DANGER,
-  info: CLASSNAME_INFO,
+  success: CLASSNAME_SUCCESS,
   default: '',
 };
 
@@ -136,7 +136,7 @@ ActionableMessage.propTypes = {
   /**
    * change color theme for the component that already predefined in css
    */
-  type: PropTypes.string,
+  type: PropTypes.oneOf(Object.keys(typeHash)),
   /**
    * change text align to left and button to bottom right
    */

ui/components/ui/actionable-message/actionable-message.stories.js

@@ -1,5 +1,14 @@
 import React from 'react';
+
+import Box from '../box';
+import Typography from '../typography';
+import {
+  COLORS,
+  DISPLAY,
+  FLEX_WRAP,
+} from '../../../helpers/constants/design-system';
 import README from './README.mdx';
+import { typeHash } from './actionable-message';
 import ActionableMessage from '.';
 
 export default {
@@ -21,6 +30,11 @@ export default {
     infoTooltipText: { control: 'text' },
     useIcon: { control: 'boolean' },
     iconFillColor: { control: 'color' },
+    roundedButtons: { control: 'boolean' },
+  },
+  args: {
+    message:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   },
 };
 
@@ -45,16 +59,26 @@ export const DefaultStory = (args) => (
 
 DefaultStory.storyName = 'Default';
 
-DefaultStory.args = {
+export const Type = (args) => (
-  message:
+  <>
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    {Object.keys(typeHash).map((type) => (
+      <ActionableMessage
+        {...args}
+        message={args.message || type}
+        key={type}
+        type={type}
+      />
+    ))}
+  </>
+);
+
+Type.args = {
+  message: '',
 };
 
 export const OneAction = (args) => <ActionableMessage {...args} />;
 
 OneAction.args = {
-  message:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   primaryAction: {
     label: 'Dismiss',
   },
@@ -63,8 +87,6 @@ OneAction.args = {
 export const TwoActions = (args) => <ActionableMessage {...args} />;
 
 TwoActions.args = {
-  message:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   primaryAction: {
     label: 'Dismiss',
   },
@@ -77,8 +99,6 @@ TwoActions.args = {
 export const LeftAligned = (args) => <ActionableMessage {...args} />;
 
 LeftAligned.args = {
-  message:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   primaryAction: {
     label: 'Dismiss',
   },
@@ -88,8 +108,6 @@ LeftAligned.args = {
 export const WithIcon = (args) => <ActionableMessage {...args} />;
 
 WithIcon.args = {
-  message:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   className: 'actionable-message--left-aligned actionable-message--warning',
   useIcon: true,
   iconFillColor: '#f8c000',
@@ -107,3 +125,30 @@ PrimaryV2Action.args = {
     label: 'I want to proceed anyway',
   },
 };
+
+export const OnTopOfContent = (args) => {
+  return (
+    <div>
+      <Box display={DISPLAY.FLEX} gap={4} flexWrap={FLEX_WRAP.WRAP}>
+        <Box padding={6} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}>
+          <Typography>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </Typography>
+        </Box>
+        <Box padding={6} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}>
+          <Typography>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </Typography>
+        </Box>
+        <Box padding={6} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}>
+          <Typography>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </Typography>
+        </Box>
+      </Box>
+      <div style={{ position: 'absolute', top: 16, left: 16, right: 16 }}>
+        <ActionableMessage {...args} />
+      </div>
+    </div>
+  );
+};

ui/components/ui/actionable-message/index.scss

@@ -1,6 +1,7 @@
 .actionable-message {
-  background: var(--Blue-000);
+  color: var(--color-text-default);
-  border: 1px solid var(--Blue-200);
+  background-color: var(--color-background-default);
+  border: 1px solid var(--color-info-default);
   border-radius: 8px;
   padding: 16px;
   margin-top: 18px;
@@ -9,6 +10,28 @@
   align-items: center;
   position: relative;
 
+  /**
+  * Need the z-index and pseudo element for the time being while we update our muted colors to not use alpha levels
+  * Otherwise ActionableMessages on top of content will transparent and it may effect
+  * readability.
+  */
+
+  * {
+    z-index: 1;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    border-radius: 8px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--color-info-muted);
+  }
+
+
   &--with-icon {
     padding-inline-start: 32px;
   }
@@ -31,7 +54,7 @@
   @include H7;
 
   &__message {
-    color: var(--Blue-600);
+    color: var(--color-text-default);
     text-align: center;
     width: 100%;
   }
@@ -42,7 +65,7 @@
     justify-content: flex-end;
     align-items: center;
     margin-top: 10px;
-    color: var(--Blue-600);
+    color: var(--color-primary-default);
 
     &--single {
       width: 100%;
@@ -55,15 +78,10 @@
     &--rounded {
       border-radius: 8px;
     }
-
-    &-danger {
-      background: var(--Red-500);
-      color: #fff;
-    }
   }
 
   &__action-v2 {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
     background: none;
     border: none;
     font-size: 12px;
@@ -79,13 +97,11 @@
   }
 
   &--warning {
-    background: var(--Yellow-100);
+    border: 1px solid var(--color-warning-default);
-    border: 1px solid var(--Yellow-500);
     justify-content: center;
 
-    .actionable-message__message,
+    &::before {
-    .actionable-message__action {
+      background: var(--color-warning-muted);
-      color: var(--Black-100);
     }
 
     .actionable-message__action--secondary {
@@ -94,22 +110,23 @@
   }
 
   &--danger {
-    background: var(--Red-000);
+    border: 1px solid var(--color-error-default);
-    border: 1px solid var(--Red-300);
     justify-content: flex-start;
 
+    &::before {
+      background: var(--color-error-muted);
+    }
+
     .actionable-message__message {
-      color: var(--Black-100);
       text-align: left;
     }
   }
 
-  &--info {
+  &--success {
-    background: var(--Green-000);
+    border: 1px solid var(--color-success-default);
-    border: 1px solid var(--Green-200);
 
-    .actionable-message__message {
+    &::before {
-      color: var(--Black-100);
+      background: var(--color-success-muted);
     }
   }
 
@@ -150,6 +167,8 @@
 
 .actionable-message--warning.actionable-message--with-right-button {
   .actionable-message__action {
-    background: var(--Yellow-500);
+    &::before {
+      background: var(--color-warning-muted);
+    }
   }
 }

ui/pages/home/home.component.js

@@ -305,7 +305,7 @@ export default class Home extends PureComponent {
         }
         {newCollectibleAddedMessage === 'success' ? (
           <ActionableMessage
-            type="info"
+            type="success"
             className="home__new-network-notification"
             message={
               <div className="home__new-network-notification-message">
@@ -330,7 +330,7 @@ export default class Home extends PureComponent {
         ) : null}
         {newNetworkAdded ? (
           <ActionableMessage
-            type="info"
+            type="success"
             className="home__new-network-notification"
             message={
               <div className="home__new-network-notification-message">