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 PermissionsRedirect from './redirect'
const APPROVE_TIMEOUT = 1200
const APPROVE_TIMEOUT = 120000
export default class PermissionConnect extends Component {
static propTypes = {

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

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

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__result">
{ t('connecting') }
<div className="permissions-redirect__result__icons">
<div className="permissions-redirect__icons">
<IconWithFallBack icon={domainMetadata.icon} name={domainMetadata.name} />
<div className="permissions-redirect__result__center-icon">
<span className="permissions-redirect__result__check" />
<div className="permissions-redirect__center-icon">
<span className="permissions-redirect__check" />
{ renderBrokenLine() }
</div>
<div className="permissions-redirect__result__identicon-container">
<div className="permissions-redirect__result__identicon-border">
<div className="permissions-redirect__identicon-container">
<div className="permissions-redirect__identicon-border">
<img src="/images/logo/metamask-fox.svg" />
</div>
</div>