Fix build errors

front/packages/primitives/src/icons.tsx

@@ -41,19 +41,21 @@ type IconProps = {
 
 export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 	const { css, theme } = useYoshiki();
-	// eslint-disable-next-line react-hooks/rules-of-hooks
-	const colorValue = Platform.OS !== "web" ? useBreakpointValue(color) : null;
+	const computed = css(
+		{ width: size, height: size, fill: color ?? theme.contrast } as ViewStyle,
+		props,
+	);
 
 	return (
 		<Icon
 			{...Platform.select<SvgProps>({
-				web: css({ width: size, height: size, fill: color ?? theme.contrast } as ViewStyle, props),
+				web: computed,
 				default: {
-					height: size,
-					width: size,
+					height: computed.style?.height,
+					width: computed.style?.width,
 					// @ts-ignore
-					fill: colorValue ?? theme.contrast,
-					...props,
+					fill: computed.style?.fill,
+					...computed,
 				},
 			})}
 		/>

front/packages/ui/src/details/header.tsx

@@ -156,6 +156,7 @@ const TitleLine = ({
 						</Skeleton>
 					)}
 					<View {...css({ flexDirection: "row" })}>
+						{/* @ts-ignore */}
 						<IconFab
 							icon={PlayArrow}
 							as={Link}

front/packages/ui/src/player/index.tsx

@@ -116,7 +116,7 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 	if (error || playbackError)
 		return (
 			<>
-				<Back isLoading={false} {...css({ position: "relative", bg: (theme) => theme.appbar })} />
+				<Back isLoading={false} {...css({ position: "relative", bg: (theme) => theme.accent })} />
 				<ErrorView error={error ?? { errors: [playbackError!] }} />
 			</>
 		);