From a499d0f04501d89605e478fdc89934f02d571b05 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 1 Apr 2022 06:59:46 -0700
Subject: [PATCH] Fix/14303 show private keys (#14314)

---
 .../export-private-key-modal.stories.js       | 37 +++++++++++++++++++
 .../export-private-key-modal/index.scss       |  3 +-
 .../modals/qr-scanner/qr-scanner.component.js |  2 +-
 .../qr-hardware-popover/enhanced-reader.js    |  2 +-
 .../transaction-decoding.component.js         |  2 +-
 .../loading-screen.component.js               |  2 +-
 6 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 ui/components/app/modals/export-private-key-modal/export-private-key-modal.stories.js

diff --git a/ui/components/app/modals/export-private-key-modal/export-private-key-modal.stories.js b/ui/components/app/modals/export-private-key-modal/export-private-key-modal.stories.js
new file mode 100644
index 000000000..74901533b
--- /dev/null
+++ b/ui/components/app/modals/export-private-key-modal/export-private-key-modal.stories.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import ExportPrivateKeyModal from '.';
+
+export default {
+  title: 'Components/App/Modals/ExportPrivateKeyModal',
+  id: __filename,
+  argTypes: {
+    exportAccount: {
+      action: 'exportAccount',
+    },
+    selectedIdentity: {
+      control: 'object',
+    },
+    warning: {
+      control: 'node',
+    },
+    showAccountDetailModal: {
+      action: 'showAccountDetailModal',
+    },
+    hideModal: {
+      action: 'hideModal',
+    },
+    hideWarning: {
+      action: 'hideWarning',
+    },
+    clearAccountDetails: {
+      action: 'clearAccountDetails',
+    },
+    previousModalState: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <ExportPrivateKeyModal {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/modals/export-private-key-modal/index.scss b/ui/components/app/modals/export-private-key-modal/index.scss
index 27b7c55f2..3734d04a4 100644
--- a/ui/components/app/modals/export-private-key-modal/index.scss
+++ b/ui/components/app/modals/export-private-key-modal/index.scss
@@ -28,7 +28,7 @@
   &__password--error {
     @include H6;
 
-    color: var(--color-text-muted);
+    color: var(--color-text-default);
     margin-bottom: 10px;
   }
 
@@ -76,6 +76,7 @@
     @include Paragraph;
 
     color: var(--color-error-default);
+    background-color: var(--color-background-default);
     border: none;
     height: 75px;
     width: 100%;
diff --git a/ui/components/app/modals/qr-scanner/qr-scanner.component.js b/ui/components/app/modals/qr-scanner/qr-scanner.component.js
index cab88a139..68cd8444f 100644
--- a/ui/components/app/modals/qr-scanner/qr-scanner.component.js
+++ b/ui/components/app/modals/qr-scanner/qr-scanner.component.js
@@ -251,7 +251,7 @@ export default class QrScanner extends Component {
               }}
             />
             {ready === READY_STATE.READY ? null : (
-              <Spinner color="var(--color-secondary-muted)" />
+              <Spinner color="var(--color-secondary-default)" />
             )}
           </div>
         </div>
diff --git a/ui/components/app/qr-hardware-popover/enhanced-reader.js b/ui/components/app/qr-hardware-popover/enhanced-reader.js
index c9aa354b4..ae753145e 100644
--- a/ui/components/app/qr-hardware-popover/enhanced-reader.js
+++ b/ui/components/app/qr-hardware-popover/enhanced-reader.js
@@ -55,7 +55,7 @@ const EnhancedReader = ({ handleScan }) => {
           filter: 'blur(4px)',
         }}
       />
-      {canplay ? null : <Spinner color="var(--color-secondary-muted)" />}
+      {canplay ? null : <Spinner color="var(--color-secondary-default)" />}
     </div>
   );
 };
diff --git a/ui/components/app/transaction-decoding/transaction-decoding.component.js b/ui/components/app/transaction-decoding/transaction-decoding.component.js
index 04e80eb2e..00b858d4f 100644
--- a/ui/components/app/transaction-decoding/transaction-decoding.component.js
+++ b/ui/components/app/transaction-decoding/transaction-decoding.component.js
@@ -202,7 +202,7 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) {
     if (loading) {
       return (
         <div className="tx-insight-loading">
-          <Spinner color="var(--color-secondary-muted)" />
+          <Spinner color="var(--color-secondary-default)" />
         </div>
       );
     }
diff --git a/ui/components/ui/loading-screen/loading-screen.component.js b/ui/components/ui/loading-screen/loading-screen.component.js
index 85cb16c05..3d8ad9298 100644
--- a/ui/components/ui/loading-screen/loading-screen.component.js
+++ b/ui/components/ui/loading-screen/loading-screen.component.js
@@ -35,7 +35,7 @@ class LoadingScreen extends Component {
         <div className="loading-overlay__container">
           {this.props.showLoadingSpinner && (
             <Spinner
-              color="var(--color-secondary-muted)"
+              color="var(--color-secondary-default)"
               className="loading-overlay__spinner"
             />
           )}