diff options
| -rw-r--r-- | ui/app/components/modals/index.scss | 2 | ||||
| -rw-r--r-- | ui/app/components/modals/qr-scanner/index.scss | 42 | ||||
| -rw-r--r-- | ui/app/components/modals/qr-scanner/qr-scanner.component.js | 44 |
3 files changed, 58 insertions, 30 deletions
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index e198cca44..0acccf172 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -1,5 +1,7 @@ @import './customize-gas/index'; +@import './qr-scanner/index'; + .modal-container { width: 100%; height: 100%; diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss new file mode 100644 index 000000000..f43830086 --- /dev/null +++ b/ui/app/components/modals/qr-scanner/index.scss @@ -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; + } +} + diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js index 0e7709332..998967776 100644 --- a/ui/app/components/modals/qr-scanner/qr-scanner.component.js +++ b/ui/app/components/modals/qr-scanner/qr-scanner.component.js @@ -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> ) |