aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/components/modals/index.scss2
-rw-r--r--ui/app/components/modals/qr-scanner/index.scss42
-rw-r--r--ui/app/components/modals/qr-scanner/qr-scanner.component.js44
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>
)