added styled Checkbox and SegmentedButtons

packages/fakeyou.com/src/components/common/Check/Check.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { a, useSpring } from "@react-spring/web";
+
+interface Props {
+  checked?: boolean;
+}
+
+export default function Check({ checked }: Props) {
+  const style = useSpring({
+    config: { tension: 280, friction: 60 },
+    strokeDasharray: checked ? '28, 0' : '0,28'
+  });
+  return <a.polyline {...{
+    fill: "none",
+    points: "9.5 18 14.5 22 22.5 12",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4",
+    strokeDashoffset: 4,
+    // ...rest,
+    style
+  }}/>;
+};

packages/fakeyou.com/src/components/common/Check/index.ts

@@ -0,0 +1 @@
+export { default } from './Check';

packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss

@@ -0,0 +1,12 @@
+@import "scss/colours.scss";
+
+.fy-checkbox {
+  background-color: $primary;
+  border-radius: .5rem;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+  stroke: white;
+}

packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
-import { useId } from "hooks";
+import { a, useSpring } from "@react-spring/web";
+import { Check } from "components/common";
+import { useHover, useId } from "hooks";
 import makeClass from "resources/makeClass";
+import "./Checkbox.scss";
 
 interface Props {
   checked?: boolean;
@@ -10,10 +13,18 @@ interface Props {
   onChange?: any;
 }
 
-export default function Checkbox({ checked = false, className = "", label = "", name = "", onChange }: Props) {
+export default function Checkbox({ checked, className = "", label = "", name = "", onChange }: Props) {
+  const [hover, hoverEvents = {}] = useHover({});
+  const style = useSpring({
+    config: { tension: 120, friction: 14 },
+    backgroundColor: checked ? hover ? "#bb5a5d" : "#e66462" : hover ? "#bb5a5d" : "#39394c"
+  });
+  const onClick = ({ target }: any) => onChange({ target: { checked: !checked, name, type: 'checkbox' } });
   const id = "checkbox-" + useId();
-  return <div {...makeClass("form-check",className) }>
-    <input {...{ className: "form-check-input", id, type: "checkbox", name, onChange, checked }} />
-    { label && <label {...{ className: "form-check-label", for: id, }}>{ label }</label> } 
+  return <div {...{ ...makeClass("form-check",className),  }}>
+    <a.svg {...{ className: "fy-checkbox", onClick, style, ...hoverEvents }}>
+      <Check {...{ checked }}/>
+    </a.svg>
+    { label && <label {...{ className: "form-check-label", for: id, onClick }}>{ label }</label> } 
   </div>
 };

packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss

@@ -0,0 +1,30 @@
+@import "scss/colours.scss";
+
+.fy-segment-buttons {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: 1fr;
+	gap: 2px;
+
+	li {
+		background-color: $secondary;
+		border-radius: .125rem;
+		cursor: pointer;
+		display: inline-flex;
+		flex: 1;
+		white-space: nowrap;
+		justify-content: center;
+		align-items: center;
+		height: 2rem;
+		padding: 0 .75rem;
+		transition: .25s background-color ease-in-out;
+
+		&:hover { background-color: lighten($secondary, 5%) !important; }
+		&:first-of-type { border-radius: .5rem .125rem .125rem .5rem; }
+		&:last-of-type { border-radius: .125rem .5rem .5rem .125rem; }
+		&.fy-selected-segment { 
+			background-color: $primary;
+			&:hover { background-color: lighten($primary, 5%) !important; }
+		}
+	}
+}

packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import "./SegmentButtons.scss";
+
+interface Props {
+  name?: string;
+  onChange?: any;
+  options?: any;
+  value?: string;
+}
+
+export default function SegmentButtons({ name, onChange, options = [], value: inValue = "" }: Props) {
+  // const onClick = ({ target }: any) => onChange();
+  return <ul {...{ className: "fy-segment-buttons" }}>
+    { options.map(({ label = "", value = "" },i: number) => <li {...{
+      ...value === inValue && { className: "fy-selected-segment" },
+      onClick: ({ target }: any) => onChange({ target: { name, type: "option", value } })
+    }}>{ label }</li>) }
+  </ul>;
+};

packages/fakeyou.com/src/components/common/SegmentButtons/index.ts

@@ -0,0 +1 @@
+export { default } from './SegmentButtons';

packages/fakeyou.com/src/components/common/index.tsx

@@ -1,4 +1,5 @@
 import AudioInput from './AudioInput';
+import Check from './Check';
 import Checkbox from './Checkbox';
 import FileActions from './FileActions';
 import FileDetails from './FileDetails';
@@ -7,11 +8,13 @@ import FileLabel from './FileLabel';
 import ImageInput from './ImageInput';
 import NumberSlider from './NumberSlider';
 import Radio from './Radio';
+import SegmentButtons from './SegmentButtons';
 import Slider from './Slider';
 import Spinner from './Spinner';
 
 export {
 	AudioInput,
+	Check,
 	Checkbox,
 	FileActions,
 	FileDetails,
@@ -20,6 +23,7 @@ export {
 	ImageInput,
 	NumberSlider,
 	Radio,
+	SegmentButtons,
 	Slider,
 	Spinner
 };

packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { animated, useTransition } from "@react-spring/web";
 import { v4 as uuidv4 } from "uuid";
 import { useFile, useLocalize } from "hooks";
-import { AudioInput, Checkbox, ImageInput, NumberSlider, Radio, Spinner } from "components/common";
+import { AudioInput, Checkbox, ImageInput, NumberSlider, SegmentButtons, Spinner } from "components/common";
 import { springs } from "resources";
 import {
   UploadAudio,
@@ -97,9 +97,11 @@ const InputPage = ({
       <Checkbox {...{ checked: highQuality, label: "High Quality", onChange: highQualityChange}}/>
 
       <label {...{ class: "sub-title", }}>Cropping</label>
-      <Radio {...{ label: "Full", name: "full", onChange: cropChange, value: cropping }}/>
-      <Radio {...{ label: "Crop", name: "crop", onChange: cropChange, value: cropping }}/>
-      <Radio {...{ label: "Close Crop", name: "close_crop", onChange: cropChange, value: cropping }}/>
+      <SegmentButtons {...{
+        onChange: cropChange,
+        options: [{ label: "Full", value: "full" },{ label: "Crop", value: "crop" },{ label: "Close crop", value: "close_crop" }],
+        value: cropping
+      }}/>
 
       <label {...{ class: "sub-title", }}>Make Animation More Still</label>
       <Checkbox {...{ checked: still, label: "Still", onChange: stillChange}}/>