m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 20:39:08 +01:00
Code

Fix display of identicon on Connect page (#8107)

Browse Source 
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.
This commit is contained in:
Mark Stacey 2020-02-26 09:34:39 -04:00 committed by GitHub
parent 35941f34dd
commit 0a0040842c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/app/components/app/permission-page-container/index.scss
View File

@ -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 {

13
ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
View File

@ -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>