From b769f724ae0a96f1a32f895de6e2c73d967bf589 Mon Sep 17 00:00:00 2001
From: Adam Mashrique <amashrique@gmail.com>
Date: Thu, 30 Aug 2018 18:02:01 +0800
Subject: [PATCH] fix(qrcode): invert colors and add 2 px border

Fix for a more standard QR code color scheme for compatibility with QR
scanners, particularly Android ones.
---
 app/components/Activity/InvoiceModal.js   | 4 ++--
 app/components/Activity/InvoiceModal.scss | 5 ++++-
 app/components/Onboarding/Syncing.js      | 4 ++--
 app/components/Onboarding/Syncing.scss    | 6 ++++++
 app/components/Wallet/ReceiveModal.js     | 5 +++--
 app/components/Wallet/ReceiveModal.scss   | 6 ++++++
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/components/Activity/InvoiceModal.js b/app/components/Activity/InvoiceModal.js
index e898f7ce..f464f502 100644
--- a/app/components/Activity/InvoiceModal.js
+++ b/app/components/Activity/InvoiceModal.js
@@ -43,8 +43,8 @@ const InvoiceModal = ({
             value={invoice.payment_request}
             renderAs="svg"
             size={150}
-            bgColor="transparent"
-            fgColor="white"
+            bgColor="white"
+            fgColor="#252832"
             level="L"
             className={styles.qrcode}
           />
diff --git a/app/components/Activity/InvoiceModal.scss b/app/components/Activity/InvoiceModal.scss
index 566a24fa..67a00683 100644
--- a/app/components/Activity/InvoiceModal.scss
+++ b/app/components/Activity/InvoiceModal.scss
@@ -16,13 +16,16 @@
   .left {
     width: 25%;
     padding: 0 60px;
+    text-align: center;
 
     h2 {
-      text-align: center;
       margin-bottom: 20px;
     }
 
     .qrcode {
+      border-style: solid;
+      border-color: white;
+      border-width: 2px;
       margin-bottom: 20px;
     }
   }
diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js
index a25d529b..1f52f08c 100644
--- a/app/components/Onboarding/Syncing.js
+++ b/app/components/Onboarding/Syncing.js
@@ -108,8 +108,8 @@ class Syncing extends Component {
                       value={address}
                       renderAs="svg"
                       size={100}
-                      bgColor="transparent"
-                      fgColor="white"
+                      bgColor="white"
+                      fgColor="#252832"
                       level="L"
                       className={styles.qrcode}
                     />
diff --git a/app/components/Onboarding/Syncing.scss b/app/components/Onboarding/Syncing.scss
index a22d2979..83710ab3 100644
--- a/app/components/Onboarding/Syncing.scss
+++ b/app/components/Onboarding/Syncing.scss
@@ -70,6 +70,12 @@
       }
     }
   }
+
+  .qrcode {
+    border-style: solid;
+    border-color: white;
+    border-width: 2px;
+  }
 }
 
 .progressContainer {
diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal.js
index 753ac588..28ca4a18 100644
--- a/app/components/Wallet/ReceiveModal.js
+++ b/app/components/Wallet/ReceiveModal.js
@@ -76,9 +76,10 @@ class ReceiveModal extends React.Component {
                 value={qrCodeType === 1 ? pubkey : address}
                 renderAs="svg"
                 size={150}
-                bgColor="transparent"
-                fgColor="white"
+                bgColor="white"
+                fgColor="#252832"
                 level="L"
+                className={styles.qrcode}
               />
             </div>
           </section>
diff --git a/app/components/Wallet/ReceiveModal.scss b/app/components/Wallet/ReceiveModal.scss
index 77f104d0..8bb54533 100644
--- a/app/components/Wallet/ReceiveModal.scss
+++ b/app/components/Wallet/ReceiveModal.scss
@@ -69,6 +69,12 @@
     .qrCodeContainer {
       text-align: center;
     }
+
+    .qrcode {
+      border-style: solid;
+      border-color: white;
+      border-width: 2px;
+    }
   }
 
   .right {