Mobile: Player: Change slider color + add shadow to image (#1922)

Author: Arthi-chaud

front/apps/mobile/src/components/illustration.tsx

@@ -34,7 +34,7 @@ import { animations } from "~/theme";
 type Props = {
 	illustration: IllustrationModel | undefined | null;
 	fallbackIcon?: IconType;
-	dropShadow?: boolean;
+	shadowStyle?: Pick<ViewStyle, "boxShadow">;
 	quality: IllustrationQuality;
 	normalizedThumbnail?: boolean;
 	variant?: "fill" | "circle" | "center";
@@ -46,7 +46,7 @@ export const Illustration = ({
 	fallbackIcon,
 	quality,
 	variant,
-	dropShadow = false,
+	shadowStyle,
 	normalizedThumbnail,
 	style,
 }: Props) => {
@@ -61,7 +61,6 @@ export const Illustration = ({
 		[illustration],
 	);
 	styles.useVariants({
-		hasShadow: dropShadow,
 		imageType: innerAspectRatio > 1 ? "wide" : "tall",
 		shape: variant === "circle" ? "circle" : undefined,
 		align: variant === "center" ? "center" : "bottom",
@@ -92,7 +91,7 @@ export const Illustration = ({
 						aspectRatio: innerAspectRatio,
 					},
 					styles.innerContainer,
-					styles.shadow,
+					shadowStyle,
 				]}
 			>
 				{illustration && loadStatus !== "error" && (
@@ -186,16 +185,6 @@ const styles = StyleSheet.create((theme) => ({
 	slotContent: {
 		flex: 1,
 	},
-	shadow: {
-		variants: {
-			hasShadow: {
-				true: {
-					boxShadow: theme.illustrationShadow,
-				},
-				false: {},
-			},
-		},
-	},
 	fallbackContainer: {
 		flex: 1,
 		display: "flex",

front/apps/mobile/src/components/player/expanded/main.tsx

@@ -29,7 +29,6 @@ import { Illustration } from "~/components/illustration";
 import { LoadableText } from "~/components/loadable_text";
 import { usePickArtistModal } from "~/components/pick-artist";
 import * as Haptics from "~/haptics";
-import { useAccentColor } from "~/hooks/accent-color";
 import { Button } from "~/primitives/button";
 import { Icon } from "~/primitives/icon";
 import { Pressable } from "~/primitives/pressable";
@@ -113,7 +112,6 @@ const PlayControls = () => {
 
 const ProgressControls = () => {
 	const currentTrack = useAtomValue(currentTrackAtom);
-	const accentColor = useAccentColor(currentTrack?.track.illustration);
 	const progress = useAtomValue(progressAtom);
 	const duration = useAtomValue(durationAtom);
 	const { theme } = useUnistyles();
@@ -136,10 +134,8 @@ const ProgressControls = () => {
 				/>
 			</View>
 			<Slider
-				sliderColor={accentColor ?? theme.colors.text.primary}
-				trackColor={
-					accentColor ? `${accentColor}30` : theme.colors.skeleton
-				}
+				sliderColor={theme.colors.text.primary}
+				trackColor={theme.colors.skeleton}
 			/>
 		</View>
 	);
@@ -345,6 +341,7 @@ const IllustrationOrVideo = () => {
 	return (
 		<Illustration
 			illustration={currentTrack?.track.illustration}
+			shadowStyle={styles.illustrationShadow}
 			quality="original"
 			variant="center"
 		/>
@@ -366,6 +363,12 @@ const styles = StyleSheet.create((theme, _rt) => ({
 		maxHeight: "60%",
 		maxWidth: breakpoints.sm,
 	},
+	illustrationShadow: {
+		boxShadow:
+			theme.name === "light"
+				? `0px 0px 20px 0px grey`
+				: `0px 0px 20px 0px #303030`,
+	},
 	illustration: {
 		aspectRatio: 1,
 		width: "100%",

front/apps/mobile/src/pages/release/header.tsx

@@ -71,7 +71,7 @@ export const Header = ({
 							illustration={release?.illustration}
 							quality="original"
 							variant="center"
-							dropShadow
+							shadowStyle={styles.illustrationShadow}
 						/>
 					</View>
 				</View>
@@ -261,6 +261,12 @@ const styles = StyleSheet.create((theme, _rt) => ({
 		flex: { xs: undefined, [HalfHorizontalLayout]: 1 },
 		width: { xs: "100%", [HalfHorizontalLayout]: undefined },
 	},
+	illustrationShadow: {
+		boxShadow:
+			theme.name === "light"
+				? `0px 5px 15px 1px grey`
+				: `0px 5px 15px 1px #212121`,
+	},
 	illustration: {
 		width: { xs: "60%", [HalfHorizontalLayout]: "100%" },
 		maxWidth: { xs: breakpoints.sm, [HalfHorizontalLayout]: undefined },

front/apps/mobile/src/theme/index.ts

@@ -63,7 +63,6 @@ const baseTheme = {
 export const lightTheme = {
 	name: "light" as const,
 	...baseTheme,
-	illustrationShadow: `0px 5px 15px 1px grey`,
 	colors: {
 		text: {
 			primary: "#242120",
@@ -83,7 +82,6 @@ export const lightTheme = {
 export const darkTheme = {
 	name: "dark" as const,
 	...baseTheme,
-	illustrationShadow: `0px 5px 15px 1px #212121`,
 	colors: {
 		text: {
 			primary: "#ffffff",