From ee3eed6c2379f9a303427ee03991b14b1e4c3925 Mon Sep 17 00:00:00 2001
From: Arthur Jamet <arthur.jamet@gmail.com>
Date: Thu, 7 Dec 2023 18:32:31 +0100
Subject: [PATCH] Front: Better padding + text color for chips

---
 front/packages/primitives/src/chip.tsx        |  4 +--
 .../primitives/src/utils/capitalize.ts        | 32 +++++++++++++++++++
 front/packages/primitives/src/utils/index.tsx |  1 +
 front/packages/ui/src/details/header.tsx      | 10 ++++--
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 front/packages/primitives/src/utils/capitalize.ts

diff --git a/front/packages/primitives/src/chip.tsx b/front/packages/primitives/src/chip.tsx
index 5a7be16db..a5a22bb14 100644
--- a/front/packages/primitives/src/chip.tsx
+++ b/front/packages/primitives/src/chip.tsx
@@ -50,12 +50,12 @@ export const Chip = <AsProps = { label: string },>({
 				[
 					{
 						pY: ts(1 * sizeMult),
-						pX: ts(1.5 * sizeMult),
+						pX: ts(2.5 * sizeMult),
 						borderRadius: ts(3),
 						fontSize: rem(0.8),
 					},
 					!outline && {
-						color: (theme: Theme) => theme.contrast,
+						color: (theme: Theme) => theme.alternate.contrast,
 						bg: color ?? ((theme: Theme) => theme.accent),
 					},
 					outline && {
diff --git a/front/packages/primitives/src/utils/capitalize.ts b/front/packages/primitives/src/utils/capitalize.ts
new file mode 100644
index 000000000..ed700a9ae
--- /dev/null
+++ b/front/packages/primitives/src/utils/capitalize.ts
@@ -0,0 +1,32 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export const capitalize = (str: string): string => {
+	return str
+		.split(" ")
+		.map((s) => s.trim())
+		.map((s) => {
+			if (s.length > 1) {
+				return s.charAt(0).toUpperCase() + s.slice(1);
+			}
+			return s;
+		})
+		.join(" ");
+};
diff --git a/front/packages/primitives/src/utils/index.tsx b/front/packages/primitives/src/utils/index.tsx
index fb9cd2209..e36a7e6e6 100644
--- a/front/packages/primitives/src/utils/index.tsx
+++ b/front/packages/primitives/src/utils/index.tsx
@@ -22,3 +22,4 @@ export * from "./breakpoints";
 export * from "./nojs";
 export * from "./head";
 export * from "./spacing";
+export * from "./capitalize";
diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx
index 9458de069..0843de04b 100644
--- a/front/packages/ui/src/details/header.tsx
+++ b/front/packages/ui/src/details/header.tsx
@@ -73,6 +73,7 @@ import { Rating } from "../components/rating";
 import { EpisodeLine, displayRuntime, episodeDisplayNumber } from "./episode";
 import { WatchListInfo } from "../components/watchlist-info";
 import { ShowWatchStatus, WatchStatusV } from "@kyoo/models/src/resources/watch-status";
+import { capitalize } from "@kyoo/primitives";
 
 export const TitleLine = ({
 	isLoading,
@@ -366,7 +367,12 @@ const Description = ({
 				>
 					<P {...css({ marginRight: ts(0.5) })}>{t("show.tags")}:</P>
 					{(isLoading ? [...Array<string>(3)] : tags!).map((tag, i) => (
-						<Chip key={tag ?? i} label={tag} size="small" {...css({ m: ts(0.5) })} />
+						<Chip
+							key={tag ?? i}
+							label={tag && capitalize(tag)}
+							size="small"
+							{...css({ m: ts(0.5) })}
+						/>
 					))}
 				</View>
 			</View>
@@ -472,7 +478,7 @@ export const Header = ({
 									},
 								}) as any)}
 							>
-								{data ? name : <Skeleton {...css({ width: rem(3) })} />}
+								{data ? capitalize(name) : <Skeleton {...css({ width: rem(3) })} />}
 							</Chip>
 						))}
 					</Container>