From 4d73caeb2c1cd4510775006bf8e7f74b27387152 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Thu, 13 Dec 2018 21:17:11 -0200
Subject: [PATCH] fix misalignment in view sync code modal

---
 .../ui/components/modals/viewSyncCode.tsx         | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/brave_sync/ui/components/modals/viewSyncCode.tsx b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
index c8f0b3e03808..15e59a27e3e0 100644
--- a/components/brave_sync/ui/components/modals/viewSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
@@ -37,10 +37,6 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
     return (
       <Modal id='viewSyncCodeModal' onClose={onClose} size='small'>
         <ViewSyncCodeGrid>
-          <div style={{ textAlign: 'center' }}>
-            <ModalTitle level={3}>{getLocale('qrCode')}</ModalTitle>
-            <QRCode size='small' src={syncData.seedQRImageSource} />
-          </div>
           <div>
             <ModalTitle level={3}>{getLocale('wordCode')}</ModalTitle>
             <TextAreaClipboard
@@ -50,6 +46,17 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
               defaultValue={syncData.syncWords}
             />
           </div>
+          <div>
+            <ModalTitle level={3}>{getLocale('qrCode')}</ModalTitle>
+            <QRCode
+              size='small'
+              src={syncData.seedQRImageSource}
+              style={{
+                // TODO: @cezaraugusto fix this in brave-ui
+                border: '1px solid #DFDFE8'
+              }}
+            />
+          </div>
         </ViewSyncCodeGrid>
         <TwoColumnButtonGrid>
           <div>{getLocale('privateKey')}</div>