Merge pull request #3381 from brave/ledger-welcome-page

update ledger welcome page and partner logos

app/extensions/brave/locales/en-US/preferences.properties

@@ -13,12 +13,18 @@ publishers=Publishers
 payments=Payments
 paymentsWelcomeTitle=Welcome to Brave Payments!
 paymentsWelcomeText1=Brave has created a simple way to for you to contribute to the sites you use most.
-paymentsWelcomeText3=Brave Payments is currently in Beta. With your help, we can fine tune the system over the next several weeks before it rolls out to our release channel.
-paymentsWelcomeText2=Your funds are transferred to the site owner through an anonymous ledger system, which makes it impossible for you ever to be identified based on the sites you visit and support. This allows publishers to stay in business even though you may have blocked their advertisements with Brave. All of this works while keeping your browsing history private.
-paymentsWelcomeTextBold=To begin using Brave Payments, simply flip the switch at the top of this window. The rest is easy.
-paymentsWelcomeText4=Learn more...
-publisherPaymentsTitle=Brave Payments Beta
-paymentsFooterText=Transaction IP addresses anonymized using
+paymentsWelcomeText2=To begin using Brave Payments, simply flip the switch at the top of this window. The rest is easy.
+paymentsWelcomeText3=Brave Payments allows publishers to stay in business even though you may have blocked their advertisements with Brave. All of this works while keeping your browsing history private. Your funds are transferred to the site owner through an anonymous ledger sytem, which makes it impossible for you ever to be identified based on the sites you visit and support.
+paymentsWelcomeText4=Brave Payments is currently in Beta. With your help and feedback, we can fine tune the system through the beta period.
+paymentsWelcomeText5=Need more info?
+paymentsWelcomeText6=for Brave Payments...
+paymentsWelcomeLink=View the FAQ
+publisherPaymentsTitle=Brave Payments
+publisherPaymentsTitleBeta=beta
+paymentsSidebarText1=Our Partners
+paymentsSidebarText2=All transaction IP addresses are anonymized with technology from:
+paymentsSidebarText3=Brave Bitcoin Wallets are provided through a partnership with:
+paymentsSidebarText4=Your contributions in the form of credit cards and bank cards are handled by:
 accountBalance=account balance
 monthlyBudget=monthly budget
 status=status
@@ -45,7 +51,8 @@ bitcoinBalance=Please transfer: 
 bitcoinWalletNotAvailable=Wallet information not available. :(
 usd=$
 done=Done
-enable=Enable
+off=off
+on=on
 notifications=Notifications
 moneyAdd=Use your debit or credit card
 add=Buy with Coinbase

js/about/preferences.js

@@ -552,12 +552,15 @@ class PaymentsTab extends ImmutableComponent {
     return `${balance} BTC`
   }
 
-  get footerContent () {
-    return <div id='paymentsFooter'>
-      <div data-l10n-id='paymentsFooterText' />
-      <a href='https://www.privateinternetaccess.com/' target='_blank'><img className='largeImg' src='img/private_internet_access.png' /></a>
-      <a href='https://www.bitgo.com/' target='_blank'><img className='pull-right' src='img/bitgo.png' /></a>
-      <a href='https://www.coinbase.com/' target='_blank'><img className='pull-right' src='img/coinbase.png' /></a>
+  get sidebarContent () {
+    return <div id='paymentsSidebar'>
+      <h2 data-l10n-id='paymentsSidebarText1' />
+      <div data-l10n-id='paymentsSidebarText2' />
+      <a href='https://www.privateinternetaccess.com/' target='_blank'><div className='paymentsSidebarPIA'></div></a>
+      <div data-l10n-id='paymentsSidebarText3' />
+      <a href='https://www.bitgo.com/' target='_blank'><div className='paymentsSidebarBitgo'></div></a>
+      <div data-l10n-id='paymentsSidebarText4' />
+      <a href='https://www.coinbase.com/' target='_blank'><div className='paymentsSidebarCoinbase'></div></a>
     </div>
   }
 
@@ -616,9 +619,13 @@ class PaymentsTab extends ImmutableComponent {
           : null
         }
       <div className='titleBar'>
-        <div className='sectionTitle pull-left' data-l10n-id='publisherPaymentsTitle' value='publisherPaymentsTitle' />
+        <div className='sectionTitleWrapper pull-left'>
+          <span className='sectionTitle' data-l10n-id='publisherPaymentsTitle' />
+          <span className='sectionSubTitle' data-l10n-id='publisherPaymentsTitleBeta' />
+        </div>
         <div className='pull-left' id='enablePaymentsSwitch'>
-          <SettingCheckbox dataL10nId='enable' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+          <span data-l10n-id='off' />
+          <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
           {this.enabled ? <SettingCheckbox dataL10nId='notifications' prefKey={settings.PAYMENTS_NOTIFICATIONS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} /> : null}
         </div>
       </div>
@@ -628,13 +635,17 @@ class PaymentsTab extends ImmutableComponent {
           : <div className='paymentsMessage'>
             <h3 data-l10n-id='paymentsWelcomeTitle' />
             <div data-l10n-id='paymentsWelcomeText1' />
-            <div data-l10n-id='paymentsWelcomeText2' />
+            <div className='boldText' data-l10n-id='paymentsWelcomeText2' />
             <div data-l10n-id='paymentsWelcomeText3' />
-            <div className='boldText' data-l10n-id='paymentsWelcomeTextBold' />
-            <a href='https://github.com/brave/ledger/blob/master/documentation/Ledger-Principles.md' target='_blank' data-l10n-id='paymentsWelcomeText4' />
+            <div data-l10n-id='paymentsWelcomeText4' />
+            <div>
+              <span data-l10n-id='paymentsWelcomeText5' />&nbsp;
+              <a href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
+              <span data-l10n-id='paymentsWelcomeText6' />
+            </div>
           </div>
         }
-        {this.enabled ? null : this.footerContent}
+        {this.enabled ? null : this.sidebarContent}
     </div>
   }
 }

less/about/preferences.less

@@ -14,9 +14,21 @@ body {
 }
 
 #enablePaymentsSwitch {
+  margin: 15px 0 0 100px;
+
+  span {
+    font-weight: bold;
+    color: @gray;
+  }
+
+  label {
+    font-weight: bold;
+    color: @braveOrange;
+  }
+
   .settingItem {
-    margin-left: 100px;
     display: inline;
+    margin-right: 30px;
   }
 }
 
@@ -26,10 +38,27 @@ body {
 }
 
 .prefTabContainer {
-  .sectionTitle {
-    color: @braveOrange;
-    font-size: 1.2em;
-    margin-bottom: 0.7em;
+  .sectionTitleWrapper {
+    position: relative;
+    margin-left: 20px;
+    min-height: 40px;
+    min-width: 240px;
+
+    .sectionTitle {
+      color: @braveOrange;
+      font-size: 28px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+
+    .sectionSubTitle {
+      color: @braveOrange;
+      font-size: 15px;
+      position: absolute;
+      bottom: 25px;
+      right: 18px;
+    }
   }
 
   flex-grow: 1;
@@ -434,20 +463,24 @@ table.sortableTable {
   background-color: @lightGray;
   margin: 1em 0;
   padding: 40px;
-  font-size: 1.1em;
+  font-size: 1.3em;
+  line-height: 1.3em;
   color: @mediumGray;
+  min-width: 440px;
+  max-width: 600px;
+  float: left;
   > div {
     padding: 0.5em 0;
+    font-size: 14px;
   }
   > h3 {
+    font-weight: 200;
+    font-size: 18px;
     padding-bottom: 0.5em;
   }
   .boldText {
     font-weight: bold;
-    padding-bottom: 1.5em;
   }
-  height: ~"-webkit-calc(100vh - 270px)";
-  overflow-y: scroll;
 }
 
 #ledgerTable {
@@ -475,7 +508,7 @@ table.sortableTable {
     padding: 20px;
     padding-bottom: 0px;
     background: @lightGray;
-    border-radius: @bigBorderRadius;
+    border-radius: @borderRadiusUIbox;
     margin: 30px 0px;
     th {
       text-align: left;
@@ -735,20 +768,63 @@ table.sortableTable {
   }
 }
 
-#paymentsFooter {
+#fundsSelectBox {
+  margin: 0 auto;
+}
+
+#paymentsSidebar {
   opacity: 0.8;
-  img {
-    max-height: 30px;
-    padding: 10px;
+  width: 200px;
+  float: left;
+  margin-left: 23px;
+
+  .paymentsSidebarPIA {
+    background-image: -webkit-image-set(url(../../app/extensions/brave/img/private_internet_access.png) 1x,
+                                        url(../../app/extensions/brave/img/private_internet_access_2x.png) 2x);
+    width: 195px;
+    height: 20px;
+  }
+
+  .paymentsSidebarBitgo {
+    background-image: -webkit-image-set(url(../../app/extensions/brave/img/bitgo.png) 1x,
+                                        url(../../app/extensions/brave/img/bitgo_2x.png) 2x);
+    width: 100px;
+    height: 25px;
   }
-  .largeImg {
-    max-height: 40px;
-    padding-top: 5px;
+
+  .paymentsSidebarCoinbase {
+    background-image: -webkit-image-set(url(../../app/extensions/brave/img/coinbase.png) 1x,
+                                        url(../../app/extensions/brave/img/coinbase_2x.png) 2x);
+    width: 100px;
+    height: 35px;
   }
   div {
     font-size: 12px;
-    margin-top: 15px;
-    margin-left: 15px;
+    margin: 50px 0 20px 12px;
+  }
+
+  a {
+    div {
+      margin-top: 0;
+    }
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: 200;
+    margin: 70px 0 -15px 12px;
+  }
+
+  a {
+    div {
+      margin-top: 0;
+    }
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: 200;
+    margin: 70px 0 -15px 12px;
   }
 }
 

less/variables.less

@@ -7,7 +7,8 @@
 @borderRadius: 4px;
 @borderRadiusTabs: 4px;
 @borderRadiusURL: 4px;
-@bigBorderRadius: 16px;
+@borderRadiusUIbox: 8px;
+@bigBorderRadius: 14px;
 @privateTabBackground: #392e54;
 
 @chromePrimary: #F3F3F3;
@@ -75,8 +76,8 @@
 @carotRadius: 8px;
 @sideBarWidth: 190px;
 
-@veryLightGray: rgb(250, 250, 248);
-@lightGray: rgb(238, 236, 236);
+@veryLightGray: rgb(250, 250, 250);
+@lightGray: rgb(236, 236, 236);
 @gray: rgb(153, 153, 153);
 @mediumGray: rgb(101, 101, 101);
 @darkGray: rgb(68, 68, 68);