Dark Mode : Permission flow (#14071)

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;
 

ui/components/ui/icon-border/icon-border.scss

@@ -1,7 +1,7 @@
 .icon-border {
   border-radius: 50%;
-  border: 1px solid var(--ui-1);
+  border: 1px solid var(--color-background-alternative);
-  background: var(--ui-1);
+  background: var(--color-background-alternative);
   display: flex;
   justify-content: center;
   align-items: center;

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

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',
+      }}
+    />
+  );
+};

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