TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix classes

Browse Source
feature/default_network_editable
Erik Marks 5 years ago
parent 8bf1410f06
commit 14a5e77edd
2 changed files with 77 additions and 91 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 140
      ui/app/pages/permissions-connect/redirect/index.scss
  2. 26
      ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js

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

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

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

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

Write Preview
Loading…
Cancel
Save