Add ability to highlight a Settings Row

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

View file

@ -8,16 +8,18 @@ type Props = {
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.
disabled?: boolean,
highlighted?: boolean,
children?: React$Node,
};
export default function SettingsRow(props: Props) {
const { title, subtitle, multirow, useVerticalSeparator, disabled, children } = props;
const { title, subtitle, multirow, useVerticalSeparator, disabled, highlighted, children } = props;
return (
<div
className={classnames('card__main-actions settings__row', {
'section__actions--between': !multirow,
'opacity-30': disabled,
'card--highlightedActive': highlighted,
})}
>
<div className="settings__row--title">

View file

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