Fix/14303 show private keys (#14314)

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';

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%;

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>

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>
   );
 };

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>
       );
     }

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"
             />
           )}