m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

fix classes

Browse Source
This commit is contained in:
Erik Marks 2020-06-11 13:56:29 -07:00
parent 8bf1410f06
commit 14a5e77edd
2 changed files with 83 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
ui/app/pages/permissions-connect/redirect/index.scss
View File

@ -1,95 +1,83 @@
.permissions-redirect-container {
.permissions-redirect {
display: flex;
border: none;
box-shadow: none;
width: 100%;
margin-top: 2px;
height: 100%;
flex-direction: column;
&__content {
display: flex;
width: 100%;
height: 144px;
margin-top: 140px;
padding-top: 8px;
align-items: center;
justify-content: center;
}
}
.permission-result {
@extend %header--24;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
color: $Black-100;
justify-content: center;
&__icons {
display: flex;
}
&__result {
@extend %header--24;
&__center-icon {
display: flex;
position: relative;
justify-content: center;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
text-align: center;
color: $Black-100;
padding-bottom: 30%;
&__check {
width: 40px;
height: 40px;
background: white url("/images/permissions-check.svg") no-repeat;
position: absolute;
}
&__identicon, .icon-with-fallback__identicon {
width: 32px;
height: 32px;
&--default {
background-color: #777A87;
color: white;
width: 64px;
height: 64px;
border-radius: 32px;
&__icons {
display: flex;
align-items: center;
}
&__center-icon {
display: flex;
position: relative;
justify-content: center;
font-weight: bold;
align-items: center;
font-size: 12px;
}
&__check {
width: 40px;
height: 40px;
background: white url("/images/permissions-check.svg") no-repeat;
position: absolute;
}
&__identicon, .icon-with-fallback__identicon {
width: 32px;
height: 32px;
&--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-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;
}
}
&__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;
}
}
}

26
ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
View File

@ -8,20 +8,18 @@ export default function PermissionsRedirect ({ domainMetadata }) {
const t = useContext(I18nContext)
return (
<div className="page-container permissions-redirect-container">
<div className="permissions-redirect-container__content">
<div className="permission-result">
{ t('connecting') }
<div className="permission-result__icons">
<IconWithFallBack icon={domainMetadata.icon} name={domainMetadata.name} />
<div className="permission-result__center-icon">
<span className="permission-result__check" />
{ renderBrokenLine() }
</div>
<div className="permission-result__identicon-container">
<div className="permission-result__identicon-border">
<img src="/images/logo/metamask-fox.svg" />
</div>
<div className="permissions-redirect">
<div className="permissions-redirect__result">
{ t('connecting') }
<div className="permissions-redirect__result__icons">
<IconWithFallBack icon={domainMetadata.icon} name={domainMetadata.name} />
<div className="permissions-redirect__result__center-icon">
<span className="permissions-redirect__result__check" />
{ renderBrokenLine() }
</div>
<div className="permissions-redirect__result__identicon-container">
<div className="permissions-redirect__result__identicon-border">
<img src="/images/logo/metamask-fox.svg" />
</div>
</div>
</div>