From 8c28df95176be874980d83708d5b4a9126ea8f72 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Tue, 13 Dec 2022 15:14:50 +0900
Subject: [PATCH] Clean up movie's skeleton

---
 front/packages/primitives/src/skeleton.tsx    | 23 +++++++++++++------
 .../packages/primitives/src/themes/theme.tsx  |  3 +++
 front/packages/ui/src/details/header.tsx      | 13 +++++++----
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/front/packages/primitives/src/skeleton.tsx b/front/packages/primitives/src/skeleton.tsx
index 7d019b93..aeac5926 100644
--- a/front/packages/primitives/src/skeleton.tsx
+++ b/front/packages/primitives/src/skeleton.tsx
@@ -53,7 +53,7 @@ export const Skeleton = ({
 	children?: JSX.Element | JSX.Element[] | boolean | null;
 	show?: boolean;
 	lines?: number;
-	variant?: "text" | "round" | "custom";
+	variant?: "text" | "header" | "round" | "custom";
 }) => {
 	const { css, theme } = useYoshiki();
 	const [width, setWidth] = useState<number | undefined>(undefined);
@@ -69,12 +69,21 @@ export const Skeleton = ({
 						position: "relative",
 					},
 					lines === 1 && { overflow: "hidden", borderRadius: px(6) },
-					variant === "text" &&
-						lines === 1 && {
-							width: percent(75),
-							height: rem(1.2),
-							marginBottom: rem(0.5),
-						},
+					(variant === "text" || variant === "header") &&
+						lines === 1 && [
+							{
+								width: percent(75),
+								height: rem(1.2),
+								margin: px(2),
+							},
+							variant === "text" && {
+								margin: px(2),
+							},
+							variant === "header" && {
+								marginBottom: rem(0.5),
+							},
+						],
+
 					variant === "round" && {
 						borderRadius: 9999999,
 					},
diff --git a/front/packages/primitives/src/themes/theme.tsx b/front/packages/primitives/src/themes/theme.tsx
index a7c3ab51..f0b5fd49 100644
--- a/front/packages/primitives/src/themes/theme.tsx
+++ b/front/packages/primitives/src/themes/theme.tsx
@@ -147,6 +147,9 @@ export const ContrastArea = ({
 				contrastText
 					? {
 							...theme,
+							// Keep the same skeletons, it looks weird otherwise.
+							overlay0: theme.user.overlay0,
+							overlay1: theme.user.overlay1,
 							heading: mode === "light" ? theme.colors.black : theme.colors.white,
 							paragraph: theme.heading,
 					  }
diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx
index 00e76cab..630142ff 100644
--- a/front/packages/ui/src/details/header.tsx
+++ b/front/packages/ui/src/details/header.tsx
@@ -111,7 +111,10 @@ const TitleLine = ({
 						flexGrow: 1,
 					})}
 				>
-					<Skeleton {...css({ width: rem(15), height: rem(3) })}>
+					<Skeleton
+						variant="header"
+						{...css({ width: rem(15), height: rem(2.5), marginBottom: rem(1) })}
+					>
 						{isLoading || (
 							<H1
 								{...css({
@@ -129,6 +132,7 @@ const TitleLine = ({
 							{...css({
 								width: rem(5),
 								height: rem(1.5),
+								marginBottom: rem(0.5),
 							})}
 						>
 							{isLoading || (
@@ -184,12 +188,13 @@ const TitleLine = ({
 			>
 				<P
 					{...css({
-						color: (theme) => theme.user.paragraph,
+						color: (theme: Theme) => theme.user.paragraph,
+						display: "flex",
 					})}
 				>
 					{t("show.studio")}:{" "}
 					{isLoading ? (
-						<Skeleton />
+						<Skeleton {...css({ width: rem(5) })} />
 					) : (
 						<A href={`/studio/${studio!.slug}`} {...css({ color: (theme) => theme.user.link })}>
 							{studio!.name}
@@ -227,7 +232,7 @@ const Description = ({
 					<>
 						{i !== 0 && ", "}
 						{isLoading ? (
-							<Skeleton key={i} />
+							<Skeleton key={i} {...css({ width: rem(5) })} />
 						) : (
 							<A key={genre.slug} href={`/genres/${genre.slug}`}>
 								{genre.name}