Clean Up And Fix Minor Issues

packages/app/src/components/Hero.tsx

@@ -33,7 +33,6 @@ const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 				<Button
 					containerCss={css`
 						width: 116px;
-						height: 48px;
 					`}
 				>
 					Play
@@ -42,7 +41,6 @@ const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 					type="secondary"
 					containerCss={css`
 						width: 96px;
-						height: 48px;
 					`}
 				>
 					Share
@@ -52,38 +50,3 @@ const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 	);
 };
 export default Hero;
-// export default function Hero({ backgroundImg }: Partial<HeroProps>) {
-// 	return (
-// 		<div
-// 			css={css`
-// 				background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${backgroundImg});
-// 				background-size: cover;
-// 				background-position: center;
-// 			`}
-// 		>
-// 			<Header
-// 				text="A user governed video platform"
-// 				subtext="Lorem ipsum sit amet, consectetur adipiscing elit. Proin non nisl sollicitudin, tempor diam."
-// 				cssTitle={css`
-// 					font-size: 72px;
-// 					line-height: 0.94;
-// 				`}
-// 				cssSubtitle={css`
-// 					font-size: 18px;
-// 					line-height: 1.33;
-// 				`}
-// 			>
-// 				<Button>
-// 					<span
-// 						css={css`
-// 							padding: 0 1rem;
-// 						`}
-// 					>
-// 						Play
-// 					</span>
-// 				</Button>
-// 				<Button type="secondary">Share</Button>
-// 			</Header>
-// 		</div>
-// 	);
-// }

packages/components/.storybook/theme.js

@@ -1,8 +1,6 @@
 import { create } from "@storybook/theming/create";
-/* Can't import the theme directly here because it is written in TS.
-Any workaround?
+
 import { colors } from "../src/theme";
-*/
 
 export default create({
 	base: "dark",
@@ -11,7 +9,7 @@ export default create({
 	colorSecondary: "deepskyblue",
 
 	// UI
-	appBg: "black",
+	appBg: colors.black,
 	appContentBg: "#272D33",
 	inputBg: "black",
 	appBorderColor: "#424E57",

packages/components/src/components/Carousel/Carousel.tsx

@@ -20,9 +20,6 @@ const Carousel: React.FC<Partial<CarouselProps>> = ({
 	rightControlCss,
 	onScroll = () => {},
 }) => {
-	if (!Array.isArray(children)) {
-		return <>{children}</>;
-	}
 	const [scroll, setScroll] = useSpring(() => ({
 		transform: `translateX(0px)`,
 	}));
@@ -31,14 +28,15 @@ const Carousel: React.FC<Partial<CarouselProps>> = ({
 	const elementsRefs = useRef<(HTMLDivElement | null)[]>([]);
 	const [childrensWidth, setChildrensWidth] = useState(0);
 	useEffect(() => {
-		elementsRefs.current = elementsRefs.current.slice(0, children.length);
-		const childrensWidth = elementsRefs.current.reduce(
-			(accWidth, el) => (el != null ? accWidth + el.clientWidth : accWidth),
-			0
-		);
-		setChildrensWidth(childrensWidth);
-	}, [children.length]);
-
+		if (Array.isArray(children)) {
+			elementsRefs.current = elementsRefs.current.slice(0, children.length);
+			const childrensWidth = elementsRefs.current.reduce(
+				(accWidth, el) => (el != null ? accWidth + el.clientWidth : accWidth),
+				0
+			);
+			setChildrensWidth(childrensWidth);
+		}
+	}, [children]);
 	const styles = useCSS({});
 
 	function handleScroll(direction: "left" | "right") {
@@ -69,6 +67,9 @@ const Carousel: React.FC<Partial<CarouselProps>> = ({
 		});
 	}
 
+	if (!Array.isArray(children)) {
+		return <>{children}</>;
+	}
 	return (
 		<div css={[styles.container, containerCss]}>
 			<div css={styles.outerItemsContainer} ref={containerRef}>

packages/components/src/components/Dropdown/Dropdown.tsx

@@ -29,7 +29,7 @@ export default function Dropdown({
 	const inputRef = useRef(null);
 	const [isActive, setIsActive] = useState(!!value);
 	const [inputTextValue, setInputTextValue] = useState(
-		!!value ? options.find(({ value: optionValue = NaN }) => optionValue === value)?.text : ""
+		!!value ? options.find(({ value: optionValue = "" }) => optionValue === value)?.text : ""
 	);
 	const [showOptions, setShowOptions] = useState(false);
 	const styles = useCSS({ isActive, disabled, ...styleProps });

packages/components/src/components/Header/Header.style.ts

@@ -42,26 +42,3 @@ export const useCSS = (props: HeaderStyleProps) => ({
 	title: makeStyles([title])(props),
 	subtitle: makeStyles([subtitle])(props)
 })
-// export let makeStyles = ({
-//   background = ""
-// }: HeaderStyleProps) => {
-//   return css`
-//     background-color: ${colors.black};
-//     text-align: left;
-//     cursor: default;
-//     color: ${colors.white};
-//     font-family: ${typography.fonts.base};
-//     height: 600px;
-//     display: flex;
-//     align-content: center;
-//     align-items: center;
-//     background-image: url(${background});
-//     background-repeat: no-repeat;
-//     background-position: center right;
-//     background-size: contain;
-
-//     div#content {
-//       margin: 0 100px;
-//     }
-//   `
-// }

packages/components/src/components/RadioButton/RadioButton.tsx

@@ -16,7 +16,7 @@ export default function RadioButton({
 	const styles = useCSS({ disabled, position, ...styleProps });
 
 	return (
-		<div css={styles.container} onClick={onClick}>
+		<div css={styles.container} onClick={disabled ? () => {} : onClick}>
 			{(position === "start" || position === "top") && <label css={styles.label}>{label}</label>}
 			<div css={styles.outterDot}>
 				<div css={styles.dot}></div>