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

Update advancedSettings.js to the modified BEM style #10340

Merged
merged 1 commit into from
Sep 4, 2017
Merged

Update advancedSettings.js to the modified BEM style #10340

merged 1 commit into from
Sep 4, 2017

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Aug 8, 2017

Closes #10339

Also:

  • Replace flex with grid
  • aphrodite -> aphrodite/no-important

Test Plan:

  1. Open about:preferences#payments
  2. Enable Payments
  3. Click the advanced setting icon
  4. Make sure the things are placed in the way as it has been

Updated screenshot:
image
Old screenshot
screenshot 2017-08-16 19 32 04

Submitter Checklist:

  • Submitted a ticket for my issue if one did not already exist.
  • Used Github auto-closing keywords in the commit message.
  • Added/updated tests for this change (for new code or code which already has tests).
  • Ran git rebase -i to squash commits (if needed).
  • Tagged reviewers and labelled the pull request as needed.

Test Plan:

Reviewer Checklist:

Tests

  • Adequate test coverage exists to prevent regressions
  • Tests should be independent and work correctly when run individually or as a suite ref
  • New files have MPL2 license header

@luixxiul luixxiul added feature/about-pages polish Nice to have — usually related to front-end/visual tasks. refactoring/aphrodite labels Aug 8, 2017
@luixxiul luixxiul added this to the 0.21.x (Nightly Channel) milestone Aug 8, 2017
@luixxiul luixxiul self-assigned this Aug 8, 2017
@@ -56,29 +56,30 @@ class AdvancedSettingsContent extends ImmutableComponent {
</SettingItem>
</SettingsList>
</div>
<div className={css(styles.settingsPanelDivider, styles.lastDivider)}>
<SettingsList className={css(commonStyles.noMarginBottom)}
listClassName={css(styles.list)}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we just don't need that

flexWrap: 'nowrap'
display: 'grid',
gridTemplateColumns: '1fr .75fr',
gridColumnGap: '32px'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

magic numbers

@codecov-io
Copy link

codecov-io commented Aug 10, 2017

Codecov Report

Merging #10340 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master   #10340   +/-   ##
=======================================
  Coverage   54.33%   54.33%           
=======================================
  Files         245      245           
  Lines       21156    21156           
  Branches     3260     3260           
=======================================
  Hits        11495    11495           
  Misses       9661     9661
Flag Coverage Δ
#unittest 54.33% <100%> (ø) ⬆️
Impacted Files Coverage Δ
...components/preferences/payment/advancedSettings.js 100% <100%> (ø) ⬆️

Closes #10339

Also:
- Replace flex with grid
- aphrodite -> aphrodite/no-important

Auditors: @cezaraugusto

Test Plan:
1. Open about:preferences#payments
2. Enable Payments
3. Click the advanced setting icon
4. Make sure the things are properly placed
@@ -3,7 +3,7 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const {StyleSheet, css} = require('aphrodite')
const {StyleSheet, css} = require('aphrodite/no-important')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<3

settingsPanelDivider: {
width: '100%'
display: 'grid',
gridTemplateColumns: '1fr .75fr',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cutting-edge!

Copy link
Contributor

@cezaraugusto cezaraugusto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++ looks great. Please check this on Windows too with 125% DPI if you didn't already just to check it looks good. Nice job!

@cezaraugusto cezaraugusto merged commit cf82722 into brave:master Sep 4, 2017
@cezaraugusto cezaraugusto deleted the polish-bem-advancedSettings branch September 4, 2017 22:52
@bbondy bbondy removed this from the 0.21.x (Developer Channel) milestone Oct 25, 2017
@luixxiul luixxiul added this to the 0.20.x (Beta Channel) milestone Oct 25, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature/about-pages polish Nice to have — usually related to front-end/visual tasks. refactoring/aphrodite
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants