Dark Mode: Info Box (#14161)

ui/components/app/info-box/index.scss

@@ -1,17 +1,17 @@
 .info-box {
   border-radius: 4px;
-  background-color: var(--alabaster);
+  background-color: var(--color-background-alternative);
   position: relative;
   padding: 16px;
   display: flex;
   flex-flow: column;
-  color: var(--mid-gray);
+  color: var(--color-text-alternative);
 
   &__close::after {
     content: '\00D7';
     font-size: 29px;
     font-weight: 200;
-    color: var(--dusty-gray);
+    color: var(--color-icon-default);
     position: absolute;
     right: 12px;
     top: 0;

ui/components/app/info-box/info-box.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import InfoBox from '.';
+
+export default {
+  title: 'Components/App/InfoBox',
+  id: __filename,
+  component: InfoBox,
+  argTypes: {
+    title: 'string',
+    description: 'string',
+  },
+};
+
+export const DefaultStory = (args) => <InfoBox {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  title: 'Hello Ether',
+  description: 'This is the description',
+};

ui/css/utilities/colors.scss

@@ -46,5 +46,4 @@
   --malibu-blue: #b8cbd8;
   --athens-grey: #e9edf0;
   --geyser: #d2d8dd;
-  --mid-gray: #5b5d67;
 }