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

clean up css

Browse Source
This commit is contained in:
brunobar79 2018-07-30 18:34:00 -04:00
parent 4339f04e80
commit d2368d6fe0
3 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/modals/index.scss
View File

@ -1,5 +1,7 @@
@import './customize-gas/index';
@import './qr-scanner/index';
.modal-container {
width: 100%;
height: 100%;

42
ui/app/components/modals/qr-scanner/index.scss Normal file
View File

@ -0,0 +1,42 @@
.qr-scanner {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-flow: column;
border-radius: 8px;
&__title {
font-size: 1.5rem;
font-weight: 500;
padding: 16px 0;
text-align: center;
}
&__content {
padding-left: 20px;
padding-right: 20px;
&__video-wrapper {
overflow: hidden;
width: 100%;
height: 275px;
display: flex;
align-items: center;
justify-content: center;
video {
transform: scaleX(-1);
width: auto;
height: 275px;
}
}
}
&__status {
text-align: center;
font-size: 12px;
padding: 15px;
}
}

44
ui/app/components/modals/qr-scanner/qr-scanner.component.js
View File

@ -93,39 +93,23 @@ export default class QrScanner extends Component {
const { t } = this.context
return (
<div className="modal-container">
<div className="modal-container__content">
<div className="modal-container__title">
{ `${t('scanQrCode')}?` }
</div>
<div className="modal-container__description">
<div
className={'qr-code-video-wrapper'}
<div className="qr-scanner">
<div className="qr-scanner__title">
{ `${t('scanQrCode')}?` }
</div>
<div className="qr-scanner__content">
<div className={'qr-scanner__content__video-wrapper'}>
<video
id="video"
style={{
overflow: 'hidden',
width: '100%',
height: '275px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}
}>
<video
id="video"
style={{
width: 'auto',
height: '275px',
marginLeft: '-15%',
display: this.state.ready ? 'block' : 'none',
transform: 'scaleX(-1)',
}}
/>
{ !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
</div>
display: this.state.ready ? 'block' : 'none',
}}
/>
{ !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
</div>
</div>
<div className="modal-container__footer">
{this.state.msg}
<div className="qr-scanner__status">
{this.state.msg}
</div>
</div>
)