From 0a0040842c7fefd1cf04d6f29db18a6a41fe161d Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 26 Feb 2020 09:34:39 -0400
Subject: [PATCH] Fix display of identicon on Connect page (#8107)

The identicon was showing as a white circle on the connect page. This
was a CSS error introduced when `jazzicon` was updated in #7898.

The white circle shown was the white border around the identicon. This
circle is an adjacent `div` in the DOM, and was rendered _underneath_
the identicon itself because it was placed first in the DOM.
Unfortunately the new version of `jazzicon` is no longer explicitly
positioned (it used to have `position: relative` set internally), so
now it's lower in the stack order regardless of DOM position.

Rather than placing the border adjacent and relying upon both elements
being positioned, the border has been changed into a wrapping `div`
instead. Now the stack order is more explicit.
---
 .../app/permission-page-container/index.scss  | 37 ++++++++++++-------
 ...ission-page-container-content.component.js | 13 ++++---
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss
index 7979867fa..c3a6a65a0 100644
--- a/ui/app/components/app/permission-page-container/index.scss
+++ b/ui/app/components/app/permission-page-container/index.scss
@@ -173,23 +173,32 @@
       }
 
       &__identicon-container, .icon-with-fallback__identicon-container {
-          padding: 1rem;
-          flex: 1;
-          position: relative;
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
+        padding: 1rem;
+        flex: 1;
+        position: relative;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
       &__identicon-border, .icon-with-fallback__identicon-border {
-          height: 64px;
-          width: 64px;
-          border-radius: 50%;
-          border: 1px solid white;
-          position: absolute;
-          background: #FFFFFF;
-          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+        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;
       }
 
       &:before {
diff --git a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
index d6a62dbbf..69b14226e 100644
--- a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
@@ -59,12 +59,13 @@ export default class PermissionPageContainerContent extends PureComponent {
         <img className="permission-approval-visual__broken-line" src="/images/broken-line.svg" />
         <section>
           <div className="permission-approval-visual__identicon-container">
-            <div className="permission-approval-visual__identicon-border" />
-            <Identicon
-              className="permission-approval-visual__identicon"
-              address={selectedAccount.address}
-              diameter={54}
-            />
+            <div className="permission-approval-visual__identicon-border">
+              <Identicon
+                className="permission-approval-visual__identicon"
+                address={selectedAccount.address}
+                diameter={54}
+              />
+            </div>
           </div>
           { redirect ? null : this.renderAccountInfo(selectedAccount) }
         </section>