From 6688117c7ebeec99f60a3e5d9f61168035b5cd8f Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 25 Mar 2022 06:37:42 -0700
Subject: [PATCH] Dark mode: Updating lock icon decrypt message (#14198)

---
 app/images/lock.svg                           |  3 --
 app/images/mm-info-icon.svg                   |  3 --
 .../confirm-decrypt-message.component.js      | 14 +++----
 .../confirm-decrypt-message.scss              | 40 ++++++++++---------
 4 files changed, 29 insertions(+), 31 deletions(-)
 delete mode 100644 app/images/lock.svg
 delete mode 100644 app/images/mm-info-icon.svg

diff --git a/app/images/lock.svg b/app/images/lock.svg
deleted file mode 100644
index 8ecb366ea..000000000
--- a/app/images/lock.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg height="24" viewBox="27.191 0 24.088 24" width="24.088" xmlns="http://www.w3.org/2000/svg">
-    <path d="M47.576 24H31.588a2 2 0 01-1.998-2.002V11.993c0-1.105.896-2.002 1.998-2.002h1V6.99c0-3.868 3.131-7.004 6.994-7.004s6.995 3.136 6.995 7.004v3.001h.999a2 2 0 011.998 2.002v10.005A2 2 0 0147.576 24zM43.579 6.99c0-2.21-1.79-4.002-3.997-4.002a4 4 0 00-3.997 4.002v3.001h7.994z"/>
-</svg>
diff --git a/app/images/mm-info-icon.svg b/app/images/mm-info-icon.svg
deleted file mode 100644
index c6d4a4ad4..000000000
--- a/app/images/mm-info-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z" fill="#b8b8b8"/>
-</svg>
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
index 950497837..04d5e1574 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
@@ -177,15 +177,13 @@ export default class ConfirmDecryptMessage extends Component {
             {hasError ? errorMessage : ''}
           </div>
           <div
-            className={classnames({
-              'request-decrypt-message__message-cover': true,
+            className={classnames('request-decrypt-message__message-cover', {
               'request-decrypt-message__message-lock--pressed':
                 hasDecrypted || hasError,
             })}
           />
           <div
-            className={classnames({
-              'request-decrypt-message__message-lock': true,
+            className={classnames('request-decrypt-message__message-lock', {
               'request-decrypt-message__message-lock--pressed':
                 hasDecrypted || hasError,
             })}
@@ -207,9 +205,11 @@ export default class ConfirmDecryptMessage extends Component {
               });
             }}
           >
-            <img src="images/lock.svg" alt="" />
-            <div className="request-decrypt-message__message-lock-text">
-              {t('decryptMetamask')}
+            <div className="request-decrypt-message__message-lock__container">
+              <i className="fa fa-lock fa-lg request-decrypt-message__message-lock__container__icon" />
+              <div className="request-decrypt-message__message-lock__container__text">
+                {t('decryptMetamask')}
+              </div>
             </div>
           </div>
         </div>
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
index 1210f81a6..a619e5837 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
@@ -92,7 +92,7 @@
   }
 
   &__account {
-    color: var(--color-text-muted);
+    color: var(--color-text-alternative);
     margin-left: 17px;
   }
 
@@ -124,7 +124,7 @@
   }
 
   &__balance {
-    color: var(--color-text-muted);
+    color: var(--color-text-alternative);
     margin-right: 17px;
     width: 124px;
   }
@@ -193,13 +193,29 @@
       top: 0;
       cursor: pointer;
 
-      img {
-        padding: 5px;
+      &__container {
+        padding: 16px;
         background-color: var(--color-background-default);
-        left: calc(50% - 24px);
         position: absolute;
-        top: calc(50% - 34px);
+        left: 50%;
+        top: 50%;
         border-radius: 3px;
+        transform: translate(-50%, calc(-50%));
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+
+        &__icon {
+          color: var(--color-icon-default);
+          display: flex;
+          margin-bottom: 16px;
+        }
+
+        &__text {
+          @include H7;
+        }
       }
 
       &--pressed {
@@ -207,18 +223,6 @@
       }
     }
 
-    &-lock-text {
-      @include H7;
-
-      width: 200px;
-      position: absolute;
-      top: calc(50% + 5px);
-      text-align: center;
-      left: calc(50% - 100px);
-      background-color: var(--color-background-default);
-      border-radius: 3px;
-    }
-
     &-copy {
       @include H7;