From 78faa7ea1cdc9b94183df32cd18f2fa5818e72e1 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 27 Feb 2024 18:14:17 +0700
Subject: [PATCH] selection bubbles update

---
 .../SelectionBubbles/SelectionBubbles.scss    | 27 ++++++++++++-------
 .../SelectionBubbles/SelectionBubbles.tsx     | 10 ++++---
 .../LandingDemo/FakeYouLandingDemo.tsx        |  4 ++-
 3 files changed, 28 insertions(+), 13 deletions(-)

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<string | null>(
     options.length > 0 ? options[0] : null
   );
@@ -84,8 +86,10 @@ export default function SelectionBubbles({
           <button
             key={option}
             className={`bubble-button ${
-              selectedOption === option ? "selected" : ""
-            }`}
+              selectedOption === option
+                ? `selected ${selectedStyle === "fill" ? "fill" : ""}`
+                : ""
+            }`.trim()}
             onClick={event => handleSelect(event, option)}
           >
             {option}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
index da3d456ed9..6ee90cbdd2 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
@@ -83,7 +83,9 @@ export default function LandingDemo({
     "Angry Male": "weight_hehgvegadf08mfp5rzd69dmh4",
   };
 
-  const [voiceToken, setVoiceToken] = useState(voiceModelTokenMap["Spongebob"]);
+  const [voiceToken, setVoiceToken] = useState(
+    voiceModelTokenMap[Object.keys(voiceModelTokenMap)[0]]
+  );
 
   const handleVoiceSelection = (selected: string) => {
     console.log(`Selected option: ${selected}`);