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 redirect alignment and css class names

Browse Source
This commit is contained in:
Erik Marks 2020-06-12 09:09:24 -07:00
parent d8e7fb4c42
commit 0cec119fc8
3 changed files with 63 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import PermissionPageContainer from '../../components/app/permission-page-contai
import ChooseAccount from './choose-account' import ChooseAccount from './choose-account'
import PermissionsRedirect from './redirect' import PermissionsRedirect from './redirect'
const APPROVE_TIMEOUT = 1200 const APPROVE_TIMEOUT = 120000
export default class PermissionConnect extends Component { export default class PermissionConnect extends Component {
static propTypes = { static propTypes = {

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

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

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

@ -11,14 +11,14 @@ export default function PermissionsRedirect ({ domainMetadata }) {
<div className="permissions-redirect"> <div className="permissions-redirect">
<div className="permissions-redirect__result"> <div className="permissions-redirect__result">
{ t('connecting') } { t('connecting') }
<div className="permissions-redirect__result__icons"> <div className="permissions-redirect__icons">
<IconWithFallBack icon={domainMetadata.icon} name={domainMetadata.name} /> <IconWithFallBack icon={domainMetadata.icon} name={domainMetadata.name} />
<div className="permissions-redirect__result__center-icon"> <div className="permissions-redirect__center-icon">
<span className="permissions-redirect__result__check" /> <span className="permissions-redirect__check" />
{ renderBrokenLine() } { renderBrokenLine() }
</div> </div>
<div className="permissions-redirect__result__identicon-container"> <div className="permissions-redirect__identicon-container">
<div className="permissions-redirect__result__identicon-border"> <div className="permissions-redirect__identicon-border">
<img src="/images/logo/metamask-fox.svg" /> <img src="/images/logo/metamask-fox.svg" />
</div> </div>
</div> </div>