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.
feature/default_network_editable
Mark Stacey 5 years ago committed by GitHub
parent 35941f34dd
commit 0a0040842c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 11
      ui/app/components/app/permission-page-container/index.scss
  2. 3
      ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js

@ -187,11 +187,20 @@
width: 64px;
border-radius: 50%;
border: 1px solid white;
position: absolute;
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 {
border-top: 2px dashed #CDD1E4;
content: "";

@ -59,13 +59,14 @@ 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" />
<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>
</div>

Loading…
Cancel
Save