Integrate old QR component with new modal layout

ui/app/components/modals/account-details-modal.js

@@ -52,22 +52,26 @@ AccountDetailsModal.prototype.render = function () {
       h('div', {}, [
       ]),
 
-      h('div', {}, [
-        h(QrView, {
-          Qr: {
-            message: this.props.selectedIdentity.name,
-            data: this.props.selectedIdentity.address,
-          }
-        }, []),
-      ]),
+      h(QrView, {
+        Qr: {
+          message: this.props.selectedIdentity.name,
+          data: this.props.selectedIdentity.address,
+        }
+      }, []),
 
       h('div', {}, [
         'Account Display',
       ]),
 
-      h('div', {}, [
-        'divider',
-      ]),
+      // divider
+      h('div', {
+        style: {
+          width: '100%',
+          height: '1px',
+          margin: '10px 0px',
+          backgroundColor: '#D8D8D8',
+        }
+      }, []),
 
       h('div', {}, [
         'View aCcount on etherscan',

ui/app/components/qr-code.js

@@ -29,28 +29,28 @@ QrCodeView.prototype.render = function () {
   const qrImage = qrCode(4, 'M')
   qrImage.addData(address)
   qrImage.make()
-  return h('.main-container.flex-column', {
-    key: 'qr',
+  return h('.div.flex-column.flex-center', {
+    // key: 'qr',
     style: {
-      justifyContent: 'center',
-      paddingBottom: '45px',
-      paddingLeft: '45px',
-      paddingRight: '45px',
-      alignItems: 'center',
+      // justifyContent: 'center',
+      // paddingBottom: '45px',
+      // paddingLeft: '45px',
+      // paddingRight: '45px',
+      // alignItems: 'center',
     },
   }, [
     Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
 
     this.props.warning ? this.props.warning && h('span.error.flex-center', {
       style: {
-        textAlign: 'center',
-        width: '229px',
-        height: '82px',
+        // textAlign: 'center',
+        // width: '229px',
+        // height: '82px',
       },
     },
     this.props.warning) : null,
 
-    h('#qr-container.flex-column', {
+    h('.div', {
       style: {
         marginTop: '25px',
         marginBottom: '15px',
@@ -59,15 +59,15 @@ QrCodeView.prototype.render = function () {
         __html: qrImage.createTableTag(4),
       },
     }),
-    h('.flex-row', [
-      h('h3.ellip-address', {
+    h('.div', [
+      h('span.qr-ellip-address', {
         style: {
           width: '247px',
         },
       }, Qr.data),
-      h(CopyButton, {
-        value: Qr.data,
-      }),
+      // h(CopyButton, {
+      //   value: Qr.data,
+      // }),
     ]),
   ])
 }

ui/app/css/itcss/components/modal.scss

@@ -181,4 +181,5 @@
   justify-content: flex-start;
   align-items: center;
   position: relative;
+  border: 1px solid #d8d8d8;
 }

ui/app/css/itcss/components/sections.scss

@@ -457,13 +457,13 @@ textarea.twelve-word-phrase {
   color: $white;
 }
 
-.ellip-address {
+.qr-ellip-address {
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 5em;
-  font-size: 14px;
-  font-family: "Montserrat Light";
-  margin-left: 5px;
+  // width: 5em;
+  // font-size: 14px;
+  // font-family: "Montserrat Light";
+  // margin-left: 5px;
 }
 
 .qr-header {