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>
     )