diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss index 4a52dfb731..10a78b0c19 100644 --- a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss +++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss @@ -37,6 +37,15 @@ &:hover { background-color: $secondary-very-light !important; } + + &.fy-highlighted-segment { + background-color: rgba($primary, 80%); + color: $white; + + &:hover { + background-color: rgba($primary, 80%) !important; + } + } } p { diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx index b79428e8a7..31bad6c494 100644 --- a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx +++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx @@ -13,6 +13,7 @@ interface Props { value?: string | number; icon?: IconDefinition | undefined; disabled?: boolean; + highlight?: boolean; } export default function SegmentButtons({ @@ -24,6 +25,7 @@ export default function SegmentButtons({ options = [], value: inValue = "", disabled = false, + highlight = false, }: Props) { // const onClick = ({ target }: any) => onChange(); return ( @@ -37,9 +39,13 @@ export default function SegmentButtons({ ) => (