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

Gray out label when disabled #12455

Merged
merged 1 commit into from
Jan 3, 2018
Merged

Gray out label when disabled #12455

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions app/renderer/components/common/switchControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ class SwitchControl extends ImmutableComponent {
styles.switchControl__text__label,
styles.switchControl__text__label_right,
this.props.small && styles.switchControl__text__label_small,
this.props.disabled && styles.switchControl__text_disabled,
Copy link
Contributor Author

@user512 user512 Jan 2, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

@luixxiul, thank you for the feedback, just fixed as you recommended.
I am not very familiar with styling in this app or styling in React, would you mind telling me how does order affect styling? I tried reading https://github.com/brave/browser-laptop/blob/master/docs/style.md but can't find how order affect styling.

Would be great if you can suggested some reading about styling in React, thanks 😄

Copy link
Contributor

Choose a reason for hiding this comment

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

hey @user512. The order affects styles the same way as CSS cascading works. The last rule overrides the previous so in your changes, the disabled interface would override other styles, which is the correct and expected behavior. Nice work!

Copy link
Contributor

Choose a reason for hiding this comment

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

maybe this could be the last conditional but I think it's ok as-is. Thanks!

this.props.customStyleTextRight
)}
data-l10n-id={this.props.rightl10nId}
Expand Down