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

Update disabledContent.js to the modified BEM style #10337

Merged
merged 1 commit into from
Aug 23, 2017
Merged

Update disabledContent.js to the modified BEM style #10337

merged 1 commit into from
Aug 23, 2017

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Aug 8, 2017

Closes #10336

Auditors: @cezaraugusto

Test Plan:

  1. Open about:preferences#payments
  2. Disable Payments
  3. Make sure the left and right rows are displayed properly
  4. Enable Payments
  5. Make sure the left margin of the gray block does not change
    Updated screenshot for reference
    disablepayments

Old screenshots
screenshot 2017-08-09 0 48 01
width

This PR only intends to convert the stuff into the BEM style, so if those look familiar, then it should be fine :-)

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

Closes #10336

Auditors: @cezaraugusto

Test Plan:
1. Open about:preferences#payments
2. Disable Payments
3. Make sure the left and right rows are displayed properly
4. Enable Payments
5. Make sure the left margin of the gray block does not change
@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
@luixxiul luixxiul requested a review from cezaraugusto August 8, 2017 15:58
backgroundColor: globalStyles.color.lightGray,
borderRadius: globalStyles.radius.borderRadiusUIbox,
boxSizing: 'border-box',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This one, removing the width below, does the trick.

fontSize: '18px',
margin: '70px 0 -15px 12px'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

minus value is not so intuitive so it was replaced

},

paymentsSidebar: {
opacity: 0.8,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this one was removed, applying it to disabledContent__sidebar__header and disabledContent__sidebar__text, to display the logos without opacity.

paddingBottom: '0.5em'
disabledContent__sidebar: {
minWidth: '200px',
marginLeft: '35px'
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 number

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.

++

@cezaraugusto cezaraugusto merged commit 23c7d96 into brave:master Aug 23, 2017
@cezaraugusto cezaraugusto deleted the polish-bem-disabledContent branch August 23, 2017 02:51
@bbondy bbondy modified the milestones: 0.21.x (Developer Channel), 0.20.x (Beta Channel) 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.

3 participants