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({ ) => (
  • onChange({ target: { name, type: "option", value } }), diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss index a999ea5f4e..bf84367a7b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss +++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss @@ -108,8 +108,8 @@ position: absolute; right: 6px; top: 6px; - height: 18px; - width: 18px; + height: 20px; + width: 20px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx index 72985c6e5f..0282c2d9d4 100644 --- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx @@ -377,6 +377,7 @@ export default function StyleVideo() { }, options: lengthOptions, value: length, + highlight: true, }} />