Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Refactor of paymentTab
Browse files Browse the repository at this point in the history
Resolves #7501 #7380 #6364

Auditors: @bsclifton @cezaraugusto

Test plan:
- everything should work the same as was before the chage

Refactor of disabled content
  • Loading branch information
NejcZdovc committed Mar 11, 2017
1 parent 790caa2 commit f375451
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 111 deletions.
115 changes: 115 additions & 0 deletions app/renderer/components/preferences/payment/disabledContent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
const React = require('react')
const ImmutableComponent = require('../../../../../js/components/immutableComponent')
const globalStyles = require('../../styles/global')
const {StyleSheet, css} = require('aphrodite/no-important')

// icons
const PIA = require('../../../../extensions/brave/img/private_internet_access.png')
const PIA2 = require('../../../../extensions/brave/img/private_internet_access_2x.png')
const BitGo = require('../../../../extensions/brave/img/bitgo.png')
const BitGo2 = require('../../../../extensions/brave/img/bitgo_2x.png')
const CoinBase = require('../../../../extensions/brave/img/coinbase.png')
const CoinBase2 = require('../../../../extensions/brave/img/coinbase_2x.png')

class DisabledContent extends ImmutableComponent {
render () {
return <div className='disabledContent'>
<div className={css(styles.paymentsMessage, styles.walletBarMargin)}>
<h3 className={css(styles.h3)} data-l10n-id='paymentsWelcomeTitle' />
<div className={css(styles.text)} data-l10n-id='paymentsWelcomeText1' />
<div className={css(styles.boldText, styles.text)} data-l10n-id='paymentsWelcomeText2' />
<div className={css(styles.text)} data-l10n-id='paymentsWelcomeText3' />
<div className={css(styles.text)} data-l10n-id='paymentsWelcomeText4' />
<div className={css(styles.text)}data-l10n-id='paymentsWelcomeText5' />
<div className={css(styles.text)}>
<span data-l10n-id='paymentsWelcomeText6' />&nbsp;
<a href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
<span data-l10n-id='paymentsWelcomeText7' />
</div>
</div>
<div className={css(styles.paymentsSidebar)}>
<h2 className={css(styles.sideH2)} data-l10n-id='paymentsSidebarText1' />
<div className={css(styles.textSide)} data-l10n-id='paymentsSidebarText2' />
<a href='https://www.privateinternetaccess.com/' target='_blank'><span className={css(styles.paymentsSidebarPIA)} /></a>
<div className={css(styles.textSide)} data-l10n-id='paymentsSidebarText3' />
<a href='https://www.bitgo.com/' target='_blank'><span className={css(styles.paymentsSidebarBitgo)} /></a>
<div className={css(styles.textSide)} data-l10n-id='paymentsSidebarText4' />
<a href='https://www.coinbase.com/' target='_blank'><span className={css(styles.paymentsSidebarCoinbase)} /></a>
</div>
</div>
}
}

const styles = StyleSheet.create({
paymentsMessage: {
backgroundColor: globalStyles.color.lightGray,
borderRadius: globalStyles.radius.borderRadiusUIbox,
padding: '40px',
fontSize: globalStyles.fontSize.paymentsContent,
lineHeight: '1.8em',
color: globalStyles.color.mediumGray,
width: '500px',
float: 'left'
},

text: {
padding: '0.5em 0'
},

textSide: {
fontSize: '12px',
margin: '50px 0 20px 12px'
},

h3: {
fontSize: '18px',
paddingBottom: '0.5em'
},

sideH2: {
fontSize: '18px',
margin: '70px 0 -15px 12px'
},

boldText: {
fontWeight: 'bold'
},

walletBarMargin: {
marginTop: '15px'
},

paymentsSidebar: {
opacity: 0.8,
width: '200px',
float: 'left',
marginLeft: '23px'
},

paymentsSidebarPIA: {
backgroundImage: `-webkit-image-set(url(${PIA}) 1x, url(${PIA2}) 2x)`,
width: '195px',
height: '20px',
margin: '0 0 20px 12px',
display: 'block'
},

paymentsSidebarBitgo: {
backgroundImage: `-webkit-image-set(url(${BitGo}) 1x, url(${BitGo2}) 2x)`,
width: '100px',
height: '25px',
margin: '0 0 20px 12px',
display: 'block'
},

paymentsSidebarCoinbase: {
backgroundImage: `-webkit-image-set(url(${CoinBase}) 1x,
url(${CoinBase2}) 2x)`,
width: '100px',
height: '35px',
margin: '0 0 20px 12px',
display: 'block'
}
})

module.exports = DisabledContent
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const ImmutableComponent = require('../../../../js/components/immutableComponent')
const ImmutableComponent = require('../../../../../js/components/immutableComponent')
const {StyleSheet, css} = require('aphrodite')
const globalStyles = require('../styles/global')
const globalStyles = require('../../styles/global')

const settings = require('../../../../js/constants/settings')
const getSetting = require('../../../../js/settings').getSetting
const aboutActions = require('../../../../js/about/aboutActions')
const {SettingCheckbox, SiteSettingCheckbox} = require('../settings')
const SortableTable = require('../../../../js/components/sortableTable')
const settings = require('../../../../../js/constants/settings')
const getSetting = require('../../../../../js/settings').getSetting
const aboutActions = require('../../../../../js/about/aboutActions')
const {SettingCheckbox, SiteSettingCheckbox} = require('../../settings')
const SortableTable = require('../../../../../js/components/sortableTable')

// icons
const verifiedGreenIcon = require('../../../extensions/brave/img/ledger/verified_green_icon.svg')
const verifiedWhiteIcon = require('../../../extensions/brave/img/ledger/verified_white_icon.svg')
const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')

class LedgerTable extends ImmutableComponent {
get synopsis () {
Expand Down
33 changes: 4 additions & 29 deletions app/renderer/components/preferences/paymentsTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ const Button = require('../../../../js/components/button')
const {FormTextbox, RecoveryKeyTextbox} = require('../textbox')
const {FormDropdown, SettingDropdown} = require('../dropdown')
const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
const LedgerTable = require('./ledgerTable')
const LedgerTable = require('./payment/ledgerTable')
const DisabledContent = require('./payment/disabledContent')
// const EnabledContent = require('./payment/enabledContent')
const PaymentHistory = require('./paymentHistory')

class PaymentsTab extends ImmutableComponent {
Expand Down Expand Up @@ -456,33 +458,6 @@ class PaymentsTab extends ImmutableComponent {
return `${balance} BTC`
}

get disabledContent () {
return <div className='disabledContent'>
<div className='paymentsMessage'>
<h3 data-l10n-id='paymentsWelcomeTitle' />
<div data-l10n-id='paymentsWelcomeText1' />
<div className='boldText' data-l10n-id='paymentsWelcomeText2' />
<div data-l10n-id='paymentsWelcomeText3' />
<div data-l10n-id='paymentsWelcomeText4' />
<div data-l10n-id='paymentsWelcomeText5' />
<div>
<span data-l10n-id='paymentsWelcomeText6' />&nbsp;
<a href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
<span data-l10n-id='paymentsWelcomeText7' />
</div>
</div>
<div className='paymentsSidebar'>
<h2 data-l10n-id='paymentsSidebarText1' />
<div data-l10n-id='paymentsSidebarText2' />
<a href='https://www.privateinternetaccess.com/' target='_blank'><div className='paymentsSidebarPIA' /></a>
<div data-l10n-id='paymentsSidebarText3' />
<a href='https://www.bitgo.com/' target='_blank'><div className='paymentsSidebarBitgo' /></a>
<div data-l10n-id='paymentsSidebarText4' />
<a href='https://www.coinbase.com/' target='_blank'><div className='paymentsSidebarCoinbase' /></a>
</div>
</div>
}

get enabledContent () {
// TODO: report when funds are too low
// TODO: support non-USD currency
Expand Down Expand Up @@ -607,7 +582,7 @@ class PaymentsTab extends ImmutableComponent {
{
this.enabled
? this.enabledContent
: this.disabledContent
: <DisabledContent />
}
</div>
}
Expand Down
3 changes: 2 additions & 1 deletion app/renderer/components/styles/global.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,8 @@ const globalStyles = {
},
fontSize: {
tabIcon: '14px',
tabTitle: '12px'
tabTitle: '12px',
paymentsContent: '14.5px'
},
appIcons: {
clipboard: 'fa fa-clipboard',
Expand Down
72 changes: 0 additions & 72 deletions less/about/preferences.less
Original file line number Diff line number Diff line change
Expand Up @@ -809,78 +809,6 @@ table.sortableTable {
}
}

// PR #6370
.disabledContent {
.paymentsMessage {
background-color: @lightGray;
border-radius: @borderRadiusUIbox;
margin-top: @walletBarMargin;
padding: 40px;
font-size: @fontSize;
line-height: 1.8em;
color: @mediumGray;
width: 500px;
float: left;

> div {
padding: 0.5em 0;
}

> h3 {
font-size: 18px;
padding-bottom: 0.5em;
}

.boldText {
font-weight: bold;
}
}

.paymentsSidebar {
opacity: 0.8;
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;
}

.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: 50px 0 20px 12px;
}

a {
div {
margin-top: 0;
}
}

h2 {
font-size: 18px;
margin: 70px 0 -15px 12px;
}
}
}

// This defines the styling of the control panel (2nd) on about:preferences#payments
.walletBar {

Expand Down

0 comments on commit f375451

Please sign in to comment.