Cleanup settings page

front/packages/primitives/src/icons.tsx

@@ -33,8 +33,10 @@ declare module "react" {
 	): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 
+export type Icon =ComponentType<SvgProps>;
+
 type IconProps = {
-	icon: ComponentType<SvgProps>;
+	icon: Icon;
 	color?: Breakpoint<string>;
 	size?: YoshikiStyle<number | string>;
 };

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

@@ -19,14 +19,27 @@
  */
 
 import { QueryIdentifier, QueryPage, User, UserP, setUserTheme, useUserTheme } from "@kyoo/models";
-import { Container, P, Select, ts } from "@kyoo/primitives";
+import { Container, H1, Icon, P, Select, SubP, imageBorderRadius, ts } from "@kyoo/primitives";
 import { DefaultLayout } from "../layout";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, View } from "react-native";
-import { useYoshiki } from "yoshiki/native";
+import { px, rem, useYoshiki } from "yoshiki/native";
 
-const Preference = ({ label, children, ...props }: { label: string; children: ReactNode }) => {
+import Theme from "@material-symbols/svg-400/outlined/dark_mode.svg";
+
+const Preference = ({
+	icon,
+	label,
+	description,
+	children,
+	...props
+}: {
+	icon: Icon;
+	label: string;
+	description: string;
+	children: ReactNode;
+}) => {
 	const { css } = useYoshiki();
 
 	return (
@@ -42,12 +55,32 @@ const Preference = ({ label, children, ...props }: { label: string; children: Re
 				props,
 			)}
 		>
-			<P>{label}</P>
-			{children}
+			<View {...css({ flexDirection: "row", alignItems: "center" })}>
+				<Icon icon={icon} {...css({ marginX: ts(2) })} />
+				<View>
+					<P {...css({ marginBottom: 0 })}>{label}</P>
+					<SubP>{description}</SubP>
+				</View>
+			</View>
+			<View {...css({ marginX: ts(2) })}>{children}</View>
 		</View>
 	);
 };
 
+const SettingsContainer = ({ children, title }: { children: ReactElement; title: string }) => {
+	const { css } = useYoshiki();
+	return (
+		<Container>
+			<H1 {...css({ fontSize: rem(2) })}>{title}</H1>
+			<View
+				{...css({ bg: (theme) => theme.variant.background, borderRadius: px(imageBorderRadius) })}
+			>
+				{children}
+			</View>
+		</Container>
+	);
+};
+
 const query: QueryIdentifier<User> = {
 	parser: UserP,
 	path: ["auth", "me"],
@@ -59,17 +92,21 @@ export const SettingsPage: QueryPage = () => {
 	const theme = useUserTheme("auto");
 	return (
 		<ScrollView>
-			<Container>
-				<Preference label={t("settings.theme.label")}>
+			<SettingsContainer title={t("settings.general.label")}>
+				<Preference
+					icon={Theme}
+					label={t("settings.general.theme.label")}
+					description={t("settings.general.theme.description")}
+				>
 					<Select
-						label={t("settings.theme.label")}
+						label={t("settings.general.theme.label")}
 						value={theme}
 						onValueChange={(value) => setUserTheme(value)}
 						values={["auto", "light", "dark"]}
-						getLabel={(key) => t(`settings.theme.${key}`)}
+						getLabel={(key) => t(`settings.general.theme.${key}`)}
 					/>
 				</Preference>
-			</Container>
+			</SettingsContainer>
 		</ScrollView>
 	);
 };

front/translations/en.json

@@ -75,11 +75,15 @@
 		"login": "Login"
 	},
 	"settings": {
-		"theme": {
-			"label": "Theme",
-			"auto": "System",
-			"light": "Light",
-			"dark": "Dark"
+		"general": {
+			"label": "General",
+			"theme": {
+				"label": "Theme",
+				"description": "Set the theme of your application",
+				"auto": "System",
+				"light": "Light",
+				"dark": "Dark"
+			}
 		}
 	},
 	"player": {

front/translations/fr.json

@@ -75,11 +75,15 @@
 		"login": "Connexion"
 	},
 	"settings": {
-		"theme": {
-			"label": "Thème",
-			"auto": "Système",
-			"light": "Clair",
-			"dark": "Sombre"
+		"general": {
+			"label": "General",
+			"theme": {
+				"label": "Thème",
+				"description": "Définissez le thème de votre application",
+				"auto": "Système",
+				"light": "Clair",
+				"dark": "Sombre"
+			}
 		}
 	},
 	"player": {