Dark mode: updating permissions redirect check icon (#14200)

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

app/images/permissions-check.svg

@@ -1,15 +0,0 @@
-<svg fill="none" height="40" width="40" xmlns="http://www.w3.org/2000/svg">
-    <filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="40" width="40" x="0" y="0">
-        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-        <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-        <feOffset dy="1"/>
-        <feGaussianBlur stdDeviation="2.5"/>
-        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
-        <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-    </filter>
-    <g filter="url(#a)">
-        <path d="M34.5 19c0 8.008-6.492 14.5-14.5 14.5S5.5 27.008 5.5 19 11.992 4.5 20 4.5 34.5 10.992 34.5 19z" fill="#61ba00" stroke="#61ba00"/>
-        <path d="M13.3 19.72l3.513 3.6 9.387-9.3" stroke="#fff" stroke-width="2"/>
-    </g>
-</svg>

ui/pages/permissions-connect/redirect/index.scss

@@ -4,39 +4,47 @@
   justify-content: center;
 
   &__result {
-    @include H3;
-
     position: absolute;
     top: 30%;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
     text-align: center;
     color: var(--color-text-default);
   }
 
   &__icons {
     display: flex;
+    position: relative;
+    max-width: 300px;
+    width: 100%;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 90%;
+      left: 5%;
+      top: 50%;
+      border: 1px solid var(--color-border-muted);
+      border-style: dashed;
+      z-index: -1;
+    }
   }
 
-  &__center-icon {
+  .icon-border {
-    @include H7;
+    max-width: 64px;
+    flex: 0 0 64px;
+  }
 
-    display: flex;
+  &__line {
     position: relative;
-    justify-content: center;
+    display: flex;
     align-items: center;
+    justify-content: center;
   }
 
   &__check {
-    display: flex;
+    color: var(--color-success-default);
-    align-items: center;
-    justify-content: center;
     border-radius: 50%;
-    width: 40px;
+    background-color: var(--color-background-default);
-    height: 40px;
+    margin-left: 40px;
-    color: var(--color-success-inverse);
+    margin-right: 40px;
-    background-color: var(--color-success-default);
-    position: absolute;
   }
 }

ui/pages/permissions-connect/redirect/permissions-redirect.component.js

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import SiteIcon from '../../../components/ui/site-icon';
+import Typography from '../../../components/ui/typography/typography';
+import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import { I18nContext } from '../../../contexts/i18n';
 
 export default function PermissionsRedirect({ subjectMetadata }) {
@@ -9,41 +11,28 @@ export default function PermissionsRedirect({ subjectMetadata }) {
   return (
     <div className="permissions-redirect">
       <div className="permissions-redirect__result">
+        <Typography boxProps={{ marginBottom: 4 }} variant={TYPOGRAPHY.H3}>
           {t('connecting')}
+        </Typography>
         <div className="permissions-redirect__icons">
           <SiteIcon
             icon={subjectMetadata.iconUrl}
             name={subjectMetadata.name}
             size={64}
+            className="permissions-redirect__site-icon"
           />
-          <div className="permissions-redirect__center-icon">
+          <div className="permissions-redirect__line">
-            <i className="fa fa-check fa-lg permissions-redirect__check" />
+            <i className="fa fa-check-circle fa-2x permissions-redirect__check" />
-            {renderBrokenLine()}
           </div>
-          <SiteIcon icon="/images/logo/metamask-fox.svg" size={64} />
+          <SiteIcon
+            icon="/images/logo/metamask-fox.svg"
+            size={64}
+            className="permissions-redirect__site-icon"
+          />
         </div>
       </div>
     </div>
   );
-
-  function renderBrokenLine() {
-    return (
-      <svg
-        width="131"
-        height="2"
-        viewBox="0 0 131 2"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0 1H134"
-          stroke="#CDD1E4"
-          strokeLinejoin="round"
-          strokeDasharray="8 7"
-        />
-      </svg>
-    );
-  }
 }
 
 PermissionsRedirect.propTypes = {

ui/pages/permissions-connect/redirect/permissions-redirect.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PermissionsRedirect from '.';
+
+export default {
+  title: 'Components/Pages/PermissionsConnect/Redirect/PermissionsRedirect',
+  id: __filename,
+  argTypes: {
+    subjectMetadata: {
+      control: 'object',
+    },
+  },
+  args: {
+    subjectMetadata: {
+      extensionId: 'extensionId',
+      iconUrl: 'https://airswap-token-images.s3.amazonaws.com/SNX.png',
+      subjectType: 'subjectType',
+      name: 'name',
+      origin: 'origin',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <PermissionsRedirect {...args} />;
+
+DefaultStory.storyName = 'Default';