From 7e902f73703c6bf8f261fa2f64a9a59b1434731c Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 4 May 2026 15:03:06 +0200
Subject: [PATCH] Fix skip intro contrast

---
 front/src/ui/player/controls/skip-chapter.tsx | 14 +++++++++++---
 front/src/ui/settings/general.tsx             |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/front/src/ui/player/controls/skip-chapter.tsx b/front/src/ui/player/controls/skip-chapter.tsx
index a316f075..b5e414f0 100644
--- a/front/src/ui/player/controls/skip-chapter.tsx
+++ b/front/src/ui/player/controls/skip-chapter.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEvent, type VideoPlayer } from "react-native-video";
 import type { Chapter } from "~/models";
-import { Button } from "~/primitives";
+import { Button, P } from "~/primitives";
 import { useAccount } from "~/providers/account-context";
 import { useFetch } from "~/query";
 import { Info } from "~/ui/info";
@@ -76,12 +76,20 @@ export const SkipChapterButton = ({
 
 	return (
 		<Button
-			text={t(`player.chapters.skip`, { type: chapter.type })}
 			onPress={skipChapter}
 			className={cn(
 				"absolute right-safe bottom-2/10 m-8",
 				"z-20 bg-slate-900/70 px-4 py-2",
 			)}
-		/>
+		>
+			<P
+				className={cn(
+					"text-center text-slate-300 dark:text-slate-300",
+					"group-focus-within:text-slate-200 group-hover:text-slate-200",
+				)}
+			>
+				{t(`player.chapters.skip`, { type: chapter.type })}
+			</P>
+		</Button>
 	);
 };
diff --git a/front/src/ui/settings/general.tsx b/front/src/ui/settings/general.tsx
index ae50a9f7..f7967182 100644
--- a/front/src/ui/settings/general.tsx
+++ b/front/src/ui/settings/general.tsx
@@ -2,6 +2,7 @@ import Theme from "@material-symbols/svg-400/outlined/dark_mode.svg";
 import Language from "@material-symbols/svg-400/outlined/language.svg";
 import Android from "@material-symbols/svg-400/rounded/android.svg";
 import Public from "@material-symbols/svg-400/rounded/public.svg";
+import { useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { Uniwind, useUniwind } from "uniwind";
 import { Link, Select } from "~/primitives";