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.

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 {

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>