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

Commit

Permalink
Fix BEM naming and align elements correctly on paymentsTab.js and led…
Browse files Browse the repository at this point in the history 
…gerTable.js (#10913)
  • Loading branch information
@luixxiul @cezaraugusto
luixxiul authored and cezaraugusto committed Nov 24, 2017
1 parent ce4acd0 commit 624869d
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 210 deletions.
80 changes: 43 additions & 37 deletions app/renderer/components/preferences/payment/enabledContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class EnabledContent extends ImmutableComponent {
/>
<a className={cx({
[globalStyles.appIcons.question]: true,
[css(styles.balance__iconLink)]: true
[css(styles.iconLink)]: true
})}
href='https://brave.com/faq-payments/#brave-payments'
target='_blank' rel='noopener'
Expand Down Expand Up @@ -86,16 +86,11 @@ class EnabledContent extends ImmutableComponent {
fundsAmount () {
const ledgerData = this.props.ledgerData

return <section className={css(styles.balance)}>
<FormTextbox data-test-id='fundsAmount' readOnly value={formatCurrentBalance(ledgerData)} />
<a className={cx({
[globalStyles.appIcons.question]: true,
[css(styles.balance__iconLink)]: true
})}
href='https://brave.com/Payments_FAQ.html'
target='_blank' rel='noopener'
/>
</section>
return <FormTextbox
readOnly
data-test-id='fundsAmount'
value={formatCurrentBalance(ledgerData)}
/>
}

lastReconcileMessage () {
Expand Down Expand Up @@ -254,57 +249,84 @@ class EnabledContent extends ImmutableComponent {
const gridStyles = StyleSheet.create({
row1col1: {
gridRow: 1,
gridColumn: 1
gridColumn: 1,
marginTop: globalStyles.spacing.panelPadding,
marginLeft: globalStyles.spacing.panelPadding
},

row1col2: {
gridRow: 1,
gridColumn: 2
gridColumn: 2,
marginTop: globalStyles.spacing.panelPadding,
marginRight: `calc(${globalStyles.spacing.panelPadding} / 2)`,
marginLeft: `calc(${globalStyles.spacing.panelPadding} / 2)`
},

row1col3: {
gridRow: 1,
gridColumn: 3
gridColumn: 3,
marginRight: globalStyles.spacing.panelPadding
},

row2col1: {
gridRow: 2,
gridColumn: 1
gridColumn: 1,
marginLeft: globalStyles.spacing.panelPadding
},

row2col2: {
gridRow: 2,
gridColumn: 2
gridColumn: 2,
marginRight: `calc(${globalStyles.spacing.panelPadding} / 2)`,
marginLeft: `calc(${globalStyles.spacing.panelPadding} / 2)`
},

row2col3: {
gridRow: 2,
gridColumn: 3
gridColumn: 3,
marginRight: globalStyles.spacing.panelPadding
},

row3col1: {
gridRow: 3,
gridColumn: 1
gridColumn: 1,
marginBottom: globalStyles.spacing.panelPadding,
marginLeft: globalStyles.spacing.panelPadding
},

row3col2: {
gridRow: 3,
gridColumn: 2
gridColumn: 2,
marginRight: `calc(${globalStyles.spacing.panelPadding} / 2)`,
marginBottom: globalStyles.spacing.panelPadding,
marginLeft: `calc(${globalStyles.spacing.panelPadding} / 2)`
},

row3col3: {
gridRow: 3,
gridColumn: 3
gridColumn: 3,
marginRight: globalStyles.spacing.panelPadding,
marginBottom: globalStyles.spacing.panelPadding
}
})

const styles = StyleSheet.create({
iconLink: {
color: globalStyles.color.mediumGray,
fontSize: globalStyles.payments.fontSize.regular,
marginLeft: '10px',
textDecoration: 'none',

':hover': {
textDecoration: 'none !important'
}
},

enabledContent__walletBar: {
display: 'grid',
gridTemplateColumns: '1fr 1fr 1fr',
background: globalStyles.color.lightGray,
borderRadius: globalStyles.radius.borderRadiusUIbox,
padding: globalStyles.spacing.panelPadding,
margin: `${globalStyles.spacing.panelMargin} 0`
},

Expand All @@ -320,22 +342,6 @@ const styles = StyleSheet.create({
marginTop: globalStyles.spacing.panelPadding
},

balance: {
display: 'flex',
alignItems: 'center'
},

balance__iconLink: {
color: globalStyles.color.mediumGray,
fontSize: globalStyles.payments.fontSize.regular,
marginLeft: '5px',
textDecoration: 'none',

':hover': {
textDecoration: 'none !important'
}
},

enabledContent: {
position: 'relative',
zIndex: 2
Expand Down
50 changes: 27 additions & 23 deletions app/renderer/components/preferences/payment/ledgerTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,14 +166,14 @@ class LedgerTable extends ImmutableComponent {
value: ''
},
{
html: <div>
<a className={css(styles.siteData)} href={publisherURL} rel='noopener' target='_blank' tabIndex={-1}>
html: <div className={css(styles.siteData)}>
<a className={css(styles.siteData__anchor)} href={publisherURL} rel='noopener' target='_blank' tabIndex={-1}>
{
faviconURL
? <img className={css(styles.siteData__icon_favicon)} src={faviconURL} alt={siteName} />
: <span className={css(styles.siteData__icon_default)}><span className={globalStyles.appIcons.defaultIcon} /></span>
? <img className={css(styles.siteData__anchor__icon_favicon)} src={faviconURL} alt={siteName} />
: <span className={css(styles.siteData__anchor__icon_default)}><span className={globalStyles.appIcons.defaultIcon} /></span>
}
<span className={css(styles.siteData__url)} data-test-id='siteName'>{siteName}</span>
<span className={css(styles.siteData__anchor__url)} data-test-id='siteName'>{siteName}</span>
</a>
</div>,
value: publisherKey
Expand All @@ -184,7 +184,7 @@ class LedgerTable extends ImmutableComponent {
small
disabled
checkedOn
switchClassName={css(styles.switchControl_center)}
customWrapperClassName={css(styles.switchControl_center)}
indicatorClassName={css(styles.pinnedToggle)}
testId='pinnedDisabled'
onClick={() => {}}
Expand Down Expand Up @@ -276,16 +276,17 @@ class LedgerTable extends ImmutableComponent {
return <section data-test-id='ledgerTable'>
<div className={css(styles.hideExcludedSites)}>
<div className={css(gridStyles.row1col1)} />
<div className={css(gridStyles.row1col2)}>
<SettingCheckbox
small
dataL10nId='hideExcluded'
prefKey={settings.PAYMENTS_SITES_HIDE_EXCLUDED}
settings={this.props.settings}
onChangeSetting={this.props.onChangeSetting}
switchClassName={css(styles.hideExcludedSites__switchWrap__switchControl)}
/>
</div>
<SettingCheckbox
small
dataL10nId='hideExcluded'
prefKey={settings.PAYMENTS_SITES_HIDE_EXCLUDED}
settings={this.props.settings}
onChangeSetting={this.props.onChangeSetting}
switchClassName={css(
gridStyles.row1col2,
styles.hideExcludedSites__settingCheckbox
)}
/>
</div>
<SortableTable
fillAvailable
Expand Down Expand Up @@ -401,19 +402,20 @@ const styles = StyleSheet.create({
alignItems: 'center'
},

siteData__icon_favicon: {
siteData__anchor__icon_favicon: {
width: globalStyles.spacing.iconSize,
height: globalStyles.spacing.iconSize
},

siteData__icon_default: {
siteData__anchor__icon_default: {
fontSize: '15px',
width: globalStyles.spacing.iconSize,
textAlign: 'center'
},

siteData__url: {
padding: '0 6px'
siteData__anchor__url: {
// See table__tbody__tr_smallRow__td on sortableTable.js
paddingLeft: globalStyles.sortableTable.cell.small.padding
},

switchControl_center: {
Expand All @@ -424,12 +426,14 @@ const styles = StyleSheet.create({
display: 'grid',
alignItems: 'center',
gridTemplateColumns: '2fr 1fr',
width: `calc(100% - calc(${globalStyles.spacing.panelPadding} / 2))`,
width: '100%',
marginBottom: globalStyles.spacing.panelMargin
},

hideExcludedSites__switchWrap__switchControl: {
padding: '0 5px 0 0'
hideExcludedSites__settingCheckbox: {
padding: '0 !important',
position: 'relative',
whiteSpace: 'nowrap' // Disable line wrap
},

alignRight: {
Expand Down
Loading

0 comments on commit 624869d

Please sign in to comment.