LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add ability to highlight a Settings Row

Browse source
This commit is contained in:
infinite-persistence 2022-02-25 18:34:53 +08:00 committed by Thomas Zarebczan
parent 1777397f07
commit 9665f7f4c2
2 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/settingsRow/view.jsx
View file

@ -8,16 +8,18 @@ type Props = {
multirow?: boolean, // Displays the Value widget(s) below the Label instead of on the right. multirow?: boolean, // Displays the Value widget(s) below the Label instead of on the right.
useVerticalSeparator?: boolean, // Show a separator line between Label and Value. Useful when there are multiple Values. useVerticalSeparator?: boolean, // Show a separator line between Label and Value. Useful when there are multiple Values.
disabled?: boolean, disabled?: boolean,
highlighted?: boolean,
children?: React$Node, children?: React$Node,
}; };
export default function SettingsRow(props: Props) { export default function SettingsRow(props: Props) {
const { title, subtitle, multirow, useVerticalSeparator, disabled, children } = props; const { title, subtitle, multirow, useVerticalSeparator, disabled, highlighted, children } = props;
return ( return (
<div <div
className={classnames('card__main-actions settings__row', { className={classnames('card__main-actions settings__row', {
'section__actions--between': !multirow, 'section__actions--between': !multirow,
'opacity-30': disabled, 'opacity-30': disabled,
'card--highlightedActive': highlighted,
})} })}
> >
<div className="settings__row--title"> <div className="settings__row--title">

4
ui/scss/component/_card.scss
View file

@ -107,6 +107,10 @@
background-color: var(--color-card-background-highlighted); background-color: var(--color-card-background-highlighted);
} }
.card--highlightedActive {
background-color: var(--color-fire-outside);
}
.card--claim-preview-wrap { .card--claim-preview-wrap {
@extend .card; @extend .card;
margin: var(--spacing-xl) 0; margin: var(--spacing-xl) 0;