selection bubbles update

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;
+    }
+  }
 }

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}

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}`);