From 0cec119fc82a2d536ca8f856212c5512c8cbddac Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Fri, 12 Jun 2020 09:09:24 -0700
Subject: [PATCH] fix redirect alignment and css class names

---
 .../permissions-connect.component.js          |   2 +-
 .../permissions-connect/redirect/index.scss   | 113 +++++++++---------
 .../permissions-redirect.component.js         |  10 +-
 3 files changed, 62 insertions(+), 63 deletions(-)

diff --git a/ui/app/pages/permissions-connect/permissions-connect.component.js b/ui/app/pages/permissions-connect/permissions-connect.component.js
index b689da49a..8ba900b92 100644
--- a/ui/app/pages/permissions-connect/permissions-connect.component.js
+++ b/ui/app/pages/permissions-connect/permissions-connect.component.js
@@ -8,7 +8,7 @@ import PermissionPageContainer from '../../components/app/permission-page-contai
 import ChooseAccount from './choose-account'
 import PermissionsRedirect from './redirect'
 
-const APPROVE_TIMEOUT = 1200
+const APPROVE_TIMEOUT = 120000
 
 export default class PermissionConnect extends Component {
   static propTypes = {
diff --git a/ui/app/pages/permissions-connect/redirect/index.scss b/ui/app/pages/permissions-connect/redirect/index.scss
index 40bd432f4..57dbb0fe4 100644
--- a/ui/app/pages/permissions-connect/redirect/index.scss
+++ b/ui/app/pages/permissions-connect/redirect/index.scss
@@ -1,83 +1,82 @@
 .permissions-redirect {
   display: flex;
   height: 100%;
-  align-items: center;
   justify-content: center;
 
   &__result {
     @extend %header--24;
 
-    display: flex;
+    position: absolute;
+    top: 30%;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     text-align: center;
     color: $Black-100;
-    padding-bottom: 30%;
-
-    &__icons {
-      display: flex;
-    }
+  }
 
-    &__center-icon {
-      display: flex;
-      position: relative;
-      justify-content: center;
-      align-items: center;
-      font-size: 12px;
-    }
+  &__icons {
+    display: flex;
+  }
 
-    &__check {
-      width: 40px;
-      height: 40px;
-      background: white url("/images/permissions-check.svg") no-repeat;
-      position: absolute;
-    }
+  &__center-icon {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+  }
 
-    &__identicon, .icon-with-fallback__identicon {
-      width: 32px;
-      height: 32px;
+  &__check {
+    width: 40px;
+    height: 40px;
+    background: white url("/images/permissions-check.svg") no-repeat;
+    position: absolute;
+  }
 
-      &--default {
-        background-color: #777A87;
-        color: white;
-        width: 64px;
-        height: 64px;
-        border-radius: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: bold;
-      }
-    }
+  &__identicon, .icon-with-fallback__identicon {
+    width: 32px;
+    height: 32px;
 
-    &__identicon-container, .icon-with-fallback__identicon-container {
-      height: auto;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 64px;
+    &--default {
+      background-color: #777A87;
+      color: white;
       width: 64px;
-    }
-
-    &__identicon-border, .icon-with-fallback__identicon-border {
       height: 64px;
-      width: 64px;
-      border-radius: 50%;
-      border: 1px solid white;
-      background: #FFFFFF;
-      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
-    }
-
-    &__identicon-border {
+      border-radius: 32px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      font-weight: bold;
     }
+  }
 
-    .icon-with-fallback__identicon-border {
-      position: absolute;
-    }
+  &__identicon-container, .icon-with-fallback__identicon-container {
+    height: auto;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 64px;
+    width: 64px;
+  }
+
+  &__identicon-border, .icon-with-fallback__identicon-border {
+    height: 64px;
+    width: 64px;
+    border-radius: 50%;
+    border: 1px solid white;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  }
+
+  &__identicon-border {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-with-fallback__identicon-border {
+    position: absolute;
   }
 }
diff --git a/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js b/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
index a403b97b9..cbb23d6b1 100644
--- a/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
+++ b/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
@@ -11,14 +11,14 @@ export default function PermissionsRedirect ({ domainMetadata }) {
     <div className="permissions-redirect">
       <div className="permissions-redirect__result">
         { t('connecting') }
-        <div className="permissions-redirect__result__icons">
+        <div className="permissions-redirect__icons">
           <IconWithFallBack icon={domainMetadata.icon} name={domainMetadata.name} />
-          <div className="permissions-redirect__result__center-icon">
-            <span className="permissions-redirect__result__check" />
+          <div className="permissions-redirect__center-icon">
+            <span className="permissions-redirect__check" />
             { renderBrokenLine() }
           </div>
-          <div className="permissions-redirect__result__identicon-container">
-            <div className="permissions-redirect__result__identicon-border">
+          <div className="permissions-redirect__identicon-container">
+            <div className="permissions-redirect__identicon-border">
               <img src="/images/logo/metamask-fox.svg" />
             </div>
           </div>