new dialog design for adding funds

brave · Sep 8, 2016 · 9354f3b · 9354f3b
1 parent 0303926
commit 9354f3b
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 42 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -38,14 +38,15 @@ tableEmptyText=No table data.
 notificationEmptyText=Top publisher visits
 syncEmptyText=Sync settings coming soon.
 bitcoin=Bitcoin
-bitcoinAdd=Use an existing Bitcoin wallet
+bitcoinAdd=Use your existing bitcoin wallet/account
+bitcoinAddDescription=Use any BTC wallet that can transfer bitcoin to your Brave wallet.
 bitcoinBuy=Buy Bitcoin
 viewPaymentHistory=View Payment History
 paymentHistoryTitle=Your Payment History
 paymentHistoryFooterText=Your next payment submission is {{reconcileDate}}.
 paymentHistoryOKText=OK
 bitcoinAddress=Your Brave wallet address is:
-bitcoinPaymentURL=Scan the QR code or transfer {{amount}} to:
+bitcoinPaymentURL=Your Brave wallet address
 bitcoinQR=Brave wallet QR code:
 paymentHistoryTitle=Your Payment History
 bitcoinCopyAddress=Copy Bitcoin address to clipboard
@@ -57,11 +58,16 @@ done=Done
 off=off
 on=on
 notifications=notifications
-moneyAdd=Use your debit or credit card
+moneyAdd=Use your debit/credit card
+moneyAddSubTitle=No bitcoin needed!
 coinbaseNotAvailable=Sorry! Adding funds with a credit/debit card is only available for contributions of $5/month at the moment.
 add=Buy with Coinbase
 addFundsTitle=Add funds...
-addFunds=Add funds to your Brave Payments Account
+addFunds=Three ways to add funds to your Brave Wallet
+copyToClipboard=Copy to clipboard
+smartphoneTitle=Use your smartphone app to transfer bitcoin
+displayQRCode=Display QR code
+coinbaseMessage=debit/credit funding powered by coinbase
 date=Date
 totalAmount=Total Amount
 receiptLink=Receipt Link

diff --git a/app/locale.js b/app/locale.js
@@ -177,6 +177,9 @@ var rendererIdentifiers = function () {
     'topSiteSuggestionTitle',
     'addFundsNotification',
     'addFunds',
+    'copyToClipboard',
+    'smartphoneTitle',
+    'displayQRCode',
     'updateLater',
     'updateHello',
     'notificationPasswordWithUserName',

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -260,9 +260,19 @@ class BitcoinDashboard extends ImmutableComponent {
   get ledgerData () {
     return this.props.ledgerData
   }
-  get overlayContent () {
+  get bitcoinOverlayContent () {
     return <iframe src={this.ledgerData.get('buyURL')} />
   }
+  get qrcodeOverlayContent () {
+    return <div>
+      <img src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
+    </div>
+  }
+  get qrcodeOverlayFooter () {
+    return <div>
+      <div id='coinbaseLogo' />
+    </div>
+  }
   get currency () {
     return this.props.ledgerData.get('currency') || 'USD'
   }
@@ -275,17 +285,46 @@ class BitcoinDashboard extends ImmutableComponent {
   get coinbasePanel () {
     if (this.canUseCoinbase) {
       return <div className='panel'>
-        <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-        <div id='coinbaseLogo' />
-        <Button l10nId='add' className='primaryButton' onClick={this.props.showOverlay.bind(this)} />
+        <div className='settingsPanelDivider'>
+          <span className='fa fa-credit-card' />
+          <div className='settingsListTitle' data-l10n-id='moneyAdd' />
+          <div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
+        </div>
+        <div className='settingsPanelDivider'>
+          <Button l10nId='add' className='primaryButton' onClick={this.props.showOverlay.bind(this)} />
+        </div>
       </div>
     } else {
       return <div className='panel disabledPanel'>
-        <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-        <div data-l10n-id='coinbaseNotAvailable' />
+        <div className='settingsPanelDivider'>
+          <span className='fa fa-credit-card' />
+          <div className='settingsListTitle' data-l10n-id='moneyAdd' />
+          <div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
+        </div>
+        <div className='settingsPanelDivider'>
+          <div data-l10n-id='coinbaseNotAvailable' />
+        </div>
       </div>
     }
   }
+  get smartphonePanel () {
+    return <div className='panel'>
+      <div className='settingsPanelDivider'>
+        <span className='fa fa-mobile' />
+        <div className='settingsListTitle' data-l10n-id='smartphoneTitle' />
+      </div>
+      <div className='settingsPanelDivider'>
+        <Button l10nId='displayQRCode' className='primaryButton' onClick={this.props.showQRcode.bind(this)} />
+      </div>
+    </div>
+  }
+  get panelFooter () {
+    return <div>
+      <div id='coinbaseLogo' />
+      <span data-l10n-id='coinbaseMessage' />
+      <Button l10nId='done' className='primaryButton' onClick={this.props.hideParentOverlay} />
+    </div>
+  }
   copyToClipboard (text) {
     aboutActions.setClipboard(text)
   }
@@ -310,17 +349,28 @@ class BitcoinDashboard extends ImmutableComponent {
     return <div id='bitcoinDashboard'>
       {
       this.props.bitcoinOverlayVisible
-        ? <ModalOverlay title={'bitcoinBuy'} content={this.overlayContent} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
+        ? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
+        : null
+      }
+      {
+        this.props.qrcodeOverlayVisible
+        ? <ModalOverlay title={'qrcodeShow'} content={this.qrcodeOverlayContent} customTitleClasses={'qrcodeOverlay'} footer={this.qrcodeOverlayFooter} onHide={this.props.hideQRcode.bind(this)} />
         : null
       }
       <div className='board'>
         {this.coinbasePanel}
         <div className='panel'>
-          <div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
+          <div className='settingsPanelDivider'>
+            <span className='bitcoinIcon fa-stack fa-lg'>
+              <span className='fa fa-circle fa-stack-2x' />
+              <span className='fa fa-bitcoin fa-stack-1x' />
+            </span>
+            <div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
+            <div className='settingsListSubtitle' data-l10n-id='bitcoinAddDescription' />
+          </div>
           {
             this.ledgerData.get('address')
-              ? <div>
-                <img src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
+              ? <div className='settingsPanelDivider'>
                 {
                   this.ledgerData.get('hasBitcoinHandler') && this.ledgerData.get('paymentURL')
                     ? <div>
@@ -330,16 +380,19 @@ class BitcoinDashboard extends ImmutableComponent {
                       <div data-l10n-id='bitcoinAddress' className='labelText' />
                     </div>
                     : <div>
-                      <div data-l10n-id='bitcoinPaymentURL'
-                        data-l10n-args={JSON.stringify({amount: `${this.amount} ${this.currency}`})} className='labelText' />
+                      <div data-l10n-id='bitcoinPaymentURL' className='labelText' />
                     </div>
                 }
-                <span className='fa fa-clipboard settingsListCopy alt' title='Copy to clipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))} />
                 <span className='smallText'>{this.ledgerData.get('address')}</span>
+                <Button className='primaryButton' l10nId='copyToClipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))} />
               </div>
-            : <div data-l10n-id='bitcoinWalletNotAvailable' />
+            : <div className='settingsPanelDivider'>
+              <div data-l10n-id='bitcoinWalletNotAvailable' />
+            </div>
           }
         </div>
+        {this.smartphonePanel}
+        {this.panelFooter}
       </div>
     </div>
   }
@@ -641,8 +694,11 @@ class PaymentsTab extends ImmutableComponent {
     return <BitcoinDashboard ledgerData={this.props.ledgerData}
       settings={this.props.settings}
       bitcoinOverlayVisible={this.props.bitcoinOverlayVisible}
+      qrcodeOverlayVisible={this.props.qrcodeOverlayVisible}
       showOverlay={this.props.showOverlay.bind(this, 'bitcoin')}
       hideOverlay={this.props.hideOverlay.bind(this, 'bitcoin')}
+      showQRcode={this.props.showOverlay.bind(this, 'qrcode')}
+      hideQRcode={this.props.hideOverlay.bind(this, 'qrcode')}
       hideParentOverlay={this.props.hideOverlay.bind(this, 'addFunds')} />
   }
 
@@ -1144,6 +1200,7 @@ class AboutPreferences extends React.Component {
     let hash = window.location.hash ? window.location.hash.slice(1) : ''
     this.state = {
       bitcoinOverlayVisible: false,
+      qrcodeOverlayVisible: false,
       paymentHistoryOverlayVisible: false,
       addFundsOverlayVisible: false,
       preferenceTab: hash.toUpperCase() in preferenceTabs ? hash : preferenceTabs.GENERAL,
@@ -1224,8 +1281,9 @@ class AboutPreferences extends React.Component {
     let stateDiff = {}
     stateDiff[`${overlayName}OverlayVisible`] = isVisible
     if (overlayName === 'addFunds' && isVisible === false) {
-      // Hide the child overlay when the parent is closed
+      // Hide the child overlays when the parent is closed
       stateDiff['bitcoinOverlayVisible'] = false
+      stateDiff['qrcodeOverlayVisible'] = false
     }
     this.setState(stateDiff)
   }
@@ -1258,6 +1316,7 @@ class AboutPreferences extends React.Component {
           braveryDefaults={braveryDefaults} ledgerData={ledgerData}
           onChangeSetting={this.onChangeSetting}
           bitcoinOverlayVisible={this.state.bitcoinOverlayVisible}
+          qrcodeOverlayVisible={this.state.qrcodeOverlayVisible}
           paymentHistoryOverlayVisible={this.state.paymentHistoryOverlayVisible}
           addFundsOverlayVisible={this.state.addFundsOverlayVisible}
           showOverlay={this.setOverlayVisible.bind(this, true)}

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -38,6 +38,11 @@ body {
   }
 }
 
+#coinbaseLogo {
+  width: 40px;
+  height: 40px;
+}
+
 #fundsAmount {
   margin-right: 10px;
 
@@ -713,22 +718,33 @@ div.nextPaymentSubmission {
 .board {
   overflow-x: hidden;
   clear: both;
-  display: flex;
 
   .panel {
-    flex: 1;
+    background: #FFFFFF;
     position: relative;
-    margin-top: 40px;
-    margin-bottom: 40px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    padding: 20px 20px 20px 70px;
 
-    * {
-      display: block;
-      text-align: center;
-      margin: 0 auto;
+    .settingsPanelDivider {
+      width: 50%;
+      display: inline-block;
+
+      &:nth-child(1) {
+        text-align: left;
+      }
+
+      &:nth-child(2) {
+        text-align: right;
+      }
+      .fa,
+      .bitcoinIcon {
+        position: absolute;
+        left: -30px;
+      }
     }
     #bitcoinPaymentURL {
       cursor: pointer;
-      text-align: left;
       background-color: @lightGray;
       &:hover {
         background-color: @gray;
@@ -749,27 +765,23 @@ div.nextPaymentSubmission {
     a {
       text-decoration: none;
     }
-    img,
-    #coinbaseLogo {
-      width: 150px;
-      height: 150px;
-      margin: 8px auto;
-      background-color: @lightGray;
-      border: none;
-    }
     .labelText {
       font-size: 1em;
       color: @braveOrange;
-      text-align: left;
       margin-bottom: 5px;
     }
-    .fa {
-      font-size: 1.1em;
-      margin: 5px;
+    .bitcoinIcon {
+      .fa-circle {
+        color: @bitcoinOrange;
+      }
+      .fa-bitcoin {
+        color: white;
+        transform: rotate(12deg);
+      }
     }
     .primaryButton {
-      margin: 1.5em auto;
       display: block;
+      float: right;
       width: 180px;
       padding: 4px 0px;
     }

diff --git a/less/modalOverlay.less b/less/modalOverlay.less
@@ -57,13 +57,23 @@
         overflow: hidden;
       }
     }
+
+    .qrcodeOverlay {
+      width: 275px;
+      height: auto;
+      background: white;
+
+      .dialog-footer {
+        background: @mediumGray;
+      }
+    }
   }
 
   .dialog {
     width: 700px;
     margin: 0 auto;
     margin-top: 100px;
-    background: white;
+    background: linear-gradient(#FFFFFF, #DEDEDE);
     border: solid 1px @lightGray;
     border-radius: @borderRadius;
     box-shadow: @boxShadow;

diff --git a/less/variables.less b/less/variables.less
@@ -11,6 +11,8 @@
 @bigBorderRadius: 14px;
 @privateTabBackground: #392e54;
 
+@bitcoinOrange: #f7931a;
+
 @chromePrimary: #F3F3F3;
 @chromeSecondary: #d3d3d3;
 @chromeTertiary: #c7c7c7;