Fix/14230 dark mode fixes (#14305)

* Dark mode fixes

* removing unused icon svg

app/images/warning.svg

@@ -1,8 +0,0 @@
-<svg height="32" width="33" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M19.132 2.854l12.44 22.748a3 3 0 01-2.632 4.44H4.06a3 3 0 01-2.632-4.44l12.44-22.748a3 3 0 015.264 0z" stroke="#ff001f" stroke-width="2"/>
-        <g fill="#ff001f">
-            <path d="M15 8h3v13h-3zM15 23h3v3h-3z"/>
-        </g>
-    </g>
-</svg>

ui/components/app/app-header/app-header.component.js

@@ -97,7 +97,6 @@ export default class AppHeader extends PureComponent {
   render() {
     const {
       history,
-      isUnlocked,
       hideNetworkIndicator,
       disableNetworkIndicator,
       disabled,
@@ -105,11 +104,7 @@ export default class AppHeader extends PureComponent {
     } = this.props;
 
     return (
-      <div
+      <div className="app-header">
-        className={classnames('app-header', {
-          'app-header--back-drop': isUnlocked,
-        })}
-      >
         <div className="app-header__contents">
           <MetaFoxLogo
             unsetIconHeight

ui/components/app/app-header/app-header.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import AppHeader from '.';
+
+export default {
+  title: 'Components/App/AppHeader',
+  id: __filename,
+  argTypes: {
+    history: {
+      control: 'object',
+    },
+    networkDropdownOpen: {
+      control: 'boolean',
+    },
+    showNetworkDropdown: {
+      action: 'showNetworkDropdown',
+    },
+    hideNetworkDropdown: {
+      action: 'hideNetworkDropdown',
+    },
+    toggleAccountMenu: {
+      action: 'toggleAccountMenu',
+    },
+    selectedAddress: {
+      control: 'text',
+    },
+    isUnlocked: {
+      control: 'boolean',
+    },
+    hideNetworkIndicator: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    disableNetworkIndicator: {
+      control: 'boolean',
+    },
+    isAccountMenuOpen: {
+      control: 'boolean',
+    },
+    onClick: {
+      action: 'onClick',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <AppHeader {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/app-header/index.scss

@@ -16,17 +16,6 @@
   @media screen and (min-width: $break-large) {
     height: 75px;
     justify-content: center;
-
-    &--back-drop {
-      &::after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 32px;
-        background: var(--color-background-alternative);
-        bottom: -32px;
-      }
-    }
   }
 
   &__metafox-logo {

ui/components/ui/page-container/index.scss

@@ -152,7 +152,7 @@
   }
 
   &__warning-container {
-    background: var(--color-warning-muted);
+    background: var(--color-error-muted);
     padding: 20px;
     display: flex;
     align-items: start;
@@ -168,6 +168,7 @@
 
   &__warning-icon {
     padding-top: 5px;
+    color: var(--color-error-default);
   }
 }
 

ui/css/base-styles.scss

@@ -89,29 +89,30 @@ input.form-control {
   padding-left: 10px;
   font-size: 14px;
   height: 40px;
-  border: 1px solid var(--color-border-muted);
+  border: 1px solid var(--color-border-default);
+  color: 1px solid var(--color-text-default);
   background: transparent;
   border-radius: 3px;
   width: 100%;
 
   &::-webkit-input-placeholder {
     font-weight: 100;
-    color: var(--color-text-alternative);
+    color: var(--color-text-muted);
   }
 
   &::-moz-placeholder {
     font-weight: 100;
-    color: var(--color-text-alternative);
+    color: var(--color-text-muted);
   }
 
   &:-ms-input-placeholder {
     font-weight: 100;
-    color: var(--color-text-alternative);
+    color: var(--color-text-muted);
   }
 
   &:-moz-placeholder {
     font-weight: 100;
-    color: var(--color-text-alternative);
+    color: var(--color-text-muted);
   }
 
   &--error {

ui/pages/keychains/reveal-seed.js

@@ -40,11 +40,7 @@ class RevealSeedPage extends Component {
   renderWarning() {
     return (
       <div className="page-container__warning-container">
-        <img
+        <i className="fa fa-exclamation-triangle fa-2x page-container__warning-icon" />
-          className="page-container__warning-icon"
-          src="images/warning.svg"
-          alt=""
-        />
         <div className="page-container__warning-message">
           <div className="page-container__warning-title">
             {this.context.t('revealSeedWordsWarningTitle')}

ui/pages/keychains/reveal-seed.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import RevealSeedPage from './reveal-seed';
+
+export default {
+  title: 'Pages/Keychains/RevealSeedPage',
+  id: __filename,
+  argTypes: {
+    requestRevealSeedWords: {
+      action: 'requestRevealSeedWords',
+    },
+    history: {
+      control: 'object',
+    },
+    mostRecentOverviewPage: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <RevealSeedPage {...args} />;
+
+DefaultStory.storyName = 'Default';