diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss index 309e3bffc1..58baffbcc6 100644 --- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss +++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss @@ -94,15 +94,24 @@ font-weight: 500; color: rgba($white, 0.75); white-space: nowrap; -} -.bubble-button:hover { - background-color: $secondary; - border-color: $secondary; -} + &:hover { + background-color: $secondary; + border-color: $secondary; -.bubble-button.selected { - color: $white; - border-color: $primary; - background-color: lighten($secondary, 6%); + &.fill { + border-color: $primary; + background-color: $primary; + } + } + + &.selected { + color: $white; + border-color: $primary; + background-color: lighten($secondary, 6%); + + &.fill { + background-color: $primary; + } + } } diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx index 32097e5a59..0d80aac545 100644 --- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx +++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx @@ -9,13 +9,15 @@ import { interface SelectionBubbleProps { options: string[]; onSelect: (selected: string) => void; + selectedStyle?: "outline" | "fill"; } export default function SelectionBubbles({ options, onSelect, + selectedStyle = "outline", }: SelectionBubbleProps) { - //Select first one as defaults + //Select first one as default on mount const [selectedOption, setSelectedOption] = useState( options.length > 0 ? options[0] : null ); @@ -84,8 +86,10 @@ export default function SelectionBubbles({