clean up css

ui/app/components/modals/index.scss

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

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;
+  }
+}
+

ui/app/components/modals/qr-scanner/qr-scanner.component.js

@@ -93,38 +93,22 @@ export default class QrScanner extends Component {
     const { t } = this.context
 
     return (
-      <div className="modal-container">
+      <div className="qr-scanner">
-       <div className="modal-container__content">
+        <div className="qr-scanner__title">
-          <div className="modal-container__title">
           { `${t('scanQrCode')}?` }
         </div>
-          <div className="modal-container__description">
+        <div className="qr-scanner__content">
-            <div
+          <div className={'qr-scanner__content__video-wrapper'}>
-              className={'qr-code-video-wrapper'}
-              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>
         </div>
-        </div>
+        <div className="qr-scanner__status">
-        <div className="modal-container__footer">
           {this.state.msg}
         </div>
       </div>