highlight segment buttons

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 {

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({
           ) => (
             <li
               {...{
-                className: `${value === inValue ? "fy-selected-segment" : ""} ${
-                  disabled ? "fy-disabled-segment" : ""
-                }`.trim(),
+                className: `${
+                  value === inValue
+                    ? `fy-selected-segment ${
+                        highlight && "fy-highlighted-segment"
+                      }`.trim()
+                    : ""
+                } ${disabled ? "fy-disabled-segment" : ""}`.trim(),
                 key,
                 onClick: ({ target }: any) =>
                   onChange({ target: { name, type: "option", value } }),

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

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,
                     }}
                   />
                 </div>