Front: Define and apply Image's border radius constant

front/packages/primitives/src/constants/image-border-radius.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 ImageBorderRadius = 10;

front/packages/primitives/src/constants/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 * from './image-border-radius';

front/packages/primitives/src/image/image.web.tsx

@@ -25,6 +25,7 @@ import { Props, ImageLayout } from "./base-image";
 import { BlurhashContainer } from "./blurhash.web";
 import { Skeleton } from "../skeleton";
 import NextImage from "next/image";
+import { ImageBorderRadius } from "../constants";
 
 export const Image = ({
 	src,
@@ -40,7 +41,7 @@ export const Image = ({
 		typeof window === "undefined" ? "finished" : "loading",
 	);
 
-	const border = { borderRadius: 6 } satisfies ViewStyle;
+	const border = { borderRadius: ImageBorderRadius } satisfies ViewStyle;
 
 	if (forcedLoading) return <Skeleton variant="custom" {...css([layout, border], props)} />;
 	if (!src || state === "errored") {

front/packages/primitives/src/image/index.tsx

@@ -25,6 +25,7 @@ import { ComponentProps, ComponentType, ReactNode } from "react";
 import { LinearGradient, LinearGradientProps } from "expo-linear-gradient";
 import { ContrastArea } from "../themes";
 import { percent } from "yoshiki/native";
+import { ImageBorderRadius } from "../constants";
 
 export { BlurhashContainer } from "./blurhash";
 export { type Props as ImageProps, Image };
@@ -84,7 +85,7 @@ export const ImageBackground = <AsProps = ViewProps,>({
 			{({ css, theme }) => (
 				<Container
 					{...(css(
-						[layout, !hideLoad && { borderRadius: 6, overflow: "hidden" }],
+						[layout, !hideLoad && { borderRadius: ImageBorderRadius, overflow: "hidden" }],
 						asProps,
 					) as AsProps)}
 				>

front/packages/primitives/src/index.ts

@@ -38,3 +38,4 @@ export * from "./button";
 export * from "./chip";
 
 export * from "./utils";
+export * from "./constants";

front/packages/ui/src/browse/list.tsx

@@ -29,6 +29,7 @@ import {
 	Heading,
 	Icon,
 	PosterBackground,
+	ImageBorderRadius
 } from "@kyoo/primitives";
 import { useState } from "react";
 import { View } from "react-native";
@@ -71,10 +72,10 @@ export const ItemList = ({
 			onPressIn={() => setHovered((i) => i + 1)}
 			onPressOut={() => setHovered((i) => i - 1)}
 			containerStyle={{
-				borderRadius: px(6),
+				borderRadius: px(ImageBorderRadius),
 			}}
 			imageStyle={{
-				borderRadius: px(6),
+				borderRadius: px(ImageBorderRadius),
 			}}
 			{...css(
 				{
@@ -82,7 +83,7 @@ export const ItemList = ({
 					justifyContent: "space-evenly",
 					flexDirection: "row",
 					height: ItemList.layout.size,
-					borderRadius: px(6),
+					borderRadius: px(ImageBorderRadius),
 					marginX: ItemList.layout.gap,
 				},
 				props,

front/packages/ui/src/home/recommanded.tsx

@@ -33,6 +33,7 @@ import {
 	H3,
 	Icon,
 	IconFab,
+	ImageBorderRadius,
 	Link,
 	P,
 	PosterBackground,
@@ -89,7 +90,7 @@ export const ItemDetails = ({
 					height: ItemDetails.layout.size,
 					flexDirection: "row",
 					bg: (theme) => theme.variant.background,
-					borderRadius: 6,
+					borderRadius: 12, // to make the border stick to the poster
 					overflow: "hidden",
 					borderColor: (theme) => theme.background,
 					borderWidth: ts(0.25),