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

Fix BEM naming and align elements correctly on paymentsTab.js and ledgerTable.js #10913

Merged
merged 2 commits into from
Nov 24, 2017
Merged

Fix BEM naming and align elements correctly on paymentsTab.js and ledgerTable.js #10913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4826b0
Improve ledgerTable.js
Sep 12, 2017
a013515
Fix paymentsTab.js
Oct 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 43 additions & 37 deletions app/renderer/components/preferences/payment/enabledContent.js
View file
Open in desktop
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
Open in desktop
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