From 8edeb9a2811854665441d11231fd1182ff38f9c1 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Thu, 31 Mar 2022 13:11:06 -0700
Subject: [PATCH] Fix/14230 dark mode fixes (#14305)

* Dark mode fixes

* removing unused icon svg
---
 app/images/warning.svg                        |  8 ---
 .../app/app-header/app-header.component.js    |  7 +--
 .../app/app-header/app-header.stories.js      | 49 +++++++++++++++++++
 ui/components/app/app-header/index.scss       | 11 -----
 ui/components/ui/page-container/index.scss    |  3 +-
 ui/css/base-styles.scss                       | 11 +++--
 ui/pages/keychains/reveal-seed.js             |  6 +--
 ui/pages/keychains/reveal-seed.stories.js     | 22 +++++++++
 8 files changed, 81 insertions(+), 36 deletions(-)
 delete mode 100644 app/images/warning.svg
 create mode 100644 ui/components/app/app-header/app-header.stories.js
 create mode 100644 ui/pages/keychains/reveal-seed.stories.js

diff --git a/app/images/warning.svg b/app/images/warning.svg
deleted file mode 100644
index bcccab618..000000000
--- a/app/images/warning.svg
+++ /dev/null
@@ -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>
diff --git a/ui/components/app/app-header/app-header.component.js b/ui/components/app/app-header/app-header.component.js
index 91ef1fc46..274c4ed2e 100644
--- a/ui/components/app/app-header/app-header.component.js
+++ b/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
-        className={classnames('app-header', {
-          'app-header--back-drop': isUnlocked,
-        })}
-      >
+      <div className="app-header">
         <div className="app-header__contents">
           <MetaFoxLogo
             unsetIconHeight
diff --git a/ui/components/app/app-header/app-header.stories.js b/ui/components/app/app-header/app-header.stories.js
new file mode 100644
index 000000000..f783fd3e2
--- /dev/null
+++ b/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';
diff --git a/ui/components/app/app-header/index.scss b/ui/components/app/app-header/index.scss
index 0277ea16c..a5906af7f 100644
--- a/ui/components/app/app-header/index.scss
+++ b/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 {
diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss
index 8f37ff560..0128b1d59 100644
--- a/ui/components/ui/page-container/index.scss
+++ b/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);
   }
 }
 
diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss
index c3bd9a106..3935c6dc1 100644
--- a/ui/css/base-styles.scss
+++ b/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 {
diff --git a/ui/pages/keychains/reveal-seed.js b/ui/pages/keychains/reveal-seed.js
index 8e9d991de..384b6e0a5 100644
--- a/ui/pages/keychains/reveal-seed.js
+++ b/ui/pages/keychains/reveal-seed.js
@@ -40,11 +40,7 @@ class RevealSeedPage extends Component {
   renderWarning() {
     return (
       <div className="page-container__warning-container">
-        <img
-          className="page-container__warning-icon"
-          src="images/warning.svg"
-          alt=""
-        />
+        <i className="fa fa-exclamation-triangle fa-2x page-container__warning-icon" />
         <div className="page-container__warning-message">
           <div className="page-container__warning-title">
             {this.context.t('revealSeedWordsWarningTitle')}
diff --git a/ui/pages/keychains/reveal-seed.stories.js b/ui/pages/keychains/reveal-seed.stories.js
new file mode 100644
index 000000000..e27a307f9
--- /dev/null
+++ b/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';