From 4c009d5ae5311122ae497bcf9d56ca596603688e Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Fri, 25 Mar 2022 00:26:49 +0100
Subject: [PATCH] Dark Mode : Permission flow (#14071)

---
 .../app/permissions-connect-footer/index.scss |  2 +-
 ui/components/ui/icon-border/icon-border.scss |  4 ++--
 .../permissions-connect/redirect/index.scss   |  7 ++++++-
 .../redirect/permission-redirect.stories.js   | 21 +++++++++++++++++++
 .../permissions-redirect.component.js         |  2 +-
 5 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 ui/pages/permissions-connect/redirect/permission-redirect.stories.js

diff --git a/ui/components/app/permissions-connect-footer/index.scss b/ui/components/app/permissions-connect-footer/index.scss
index 8d720d259..a07e29573 100644
--- a/ui/components/app/permissions-connect-footer/index.scss
+++ b/ui/components/app/permissions-connect-footer/index.scss
@@ -7,7 +7,7 @@
   &__text {
     @include H7;
 
-    color: var(--ui-4);
+    color: var(--color-text-alternative);
     display: flex;
     margin-top: 10px;
 
diff --git a/ui/components/ui/icon-border/icon-border.scss b/ui/components/ui/icon-border/icon-border.scss
index a262f56c9..21911ab87 100644
--- a/ui/components/ui/icon-border/icon-border.scss
+++ b/ui/components/ui/icon-border/icon-border.scss
@@ -1,7 +1,7 @@
 .icon-border {
   border-radius: 50%;
-  border: 1px solid var(--ui-1);
-  background: var(--ui-1);
+  border: 1px solid var(--color-background-alternative);
+  background: var(--color-background-alternative);
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/ui/pages/permissions-connect/redirect/index.scss b/ui/pages/permissions-connect/redirect/index.scss
index 84e9007f3..d7f90930d 100644
--- a/ui/pages/permissions-connect/redirect/index.scss
+++ b/ui/pages/permissions-connect/redirect/index.scss
@@ -29,9 +29,14 @@
   }
 
   &__check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
     width: 40px;
     height: 40px;
-    background: white url("/images/permissions-check.svg") no-repeat;
+    color: var(--color-success-inverse);
+    background-color: var(--color-success-default);
     position: absolute;
   }
 }
diff --git a/ui/pages/permissions-connect/redirect/permission-redirect.stories.js b/ui/pages/permissions-connect/redirect/permission-redirect.stories.js
new file mode 100644
index 000000000..331c05ea3
--- /dev/null
+++ b/ui/pages/permissions-connect/redirect/permission-redirect.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PermissionsRedirect from './permissions-redirect.component';
+
+export default {
+  title: 'Pages/PermissionsRedirect',
+  id: __filename,
+};
+
+export const PermissionRedirectComponent = () => {
+  return (
+    <PermissionsRedirect
+      subjectMetadata={{
+        extensionId: '1',
+        iconUrl: '/images/logo/metamask-fox.svg',
+        subjectType: 'subjectType',
+        name: 'test',
+        origin: 'test',
+      }}
+    />
+  );
+};
diff --git a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js
index c433e3674..d50a8631d 100644
--- a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js
+++ b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js
@@ -17,7 +17,7 @@ export default function PermissionsRedirect({ subjectMetadata }) {
             size={64}
           />
           <div className="permissions-redirect__center-icon">
-            <span className="permissions-redirect__check" />
+            <i className="fa fa-check fa-lg permissions-redirect__check" />
             {renderBrokenLine()}
           </div>
           <SiteIcon icon="/images/logo/metamask-fox.svg" size={64} />