Explorar o código

fix(locales): correct French translations for workout-related phrases to ensure proper grammar and consistency
style(Header.tsx): enhance button styling for better visibility in dark mode
style(workout-session-header.tsx): improve background and text colors for dark mode compatibility
style(workout-session-set.tsx): update input and select elements for dark mode support and improve overall UI consistency

Mathias hai 1 mes
pai
achega
4d5d394138

+ 3 - 3
locales/fr.ts

@@ -210,7 +210,7 @@ export default {
       set_number_plural_singular: "Séries {number}",
       workout_in_progress: "Entraînement en cours",
       started_at: "Débuté à",
-      quit_workout: "Quitter l'Entraînement",
+      quit_workout: "Quitter l'entraînement",
       elapsed_time: "Temps écoulé",
       chronometer: "Chronomètre",
       total_workout_time: "Temps total d'entraînement",
@@ -219,12 +219,12 @@ export default {
       complete: "Terminé",
       active: "Actif",
       no_exercise_selected: "Aucun exercice sélectionné",
-      quit_workout_title: "Quitter l'Entraînement ?",
+      quit_workout_title: "Quitter l'entraînement ?",
       progress: "Progression",
       quit_warning: "Êtes-vous sûr de vouloir quitter ? Vous pouvez sauvegarder votre progression ou la perdre complètement.",
       save_and_quit: "Sauvegarder & Quitter",
       quit_without_save: "Quitter Sans Sauvegarder",
-      continue_workout: "Continuer l'Entraînement",
+      continue_workout: "Continuer l'entraînement",
       history: "Historique des séances [{count}]",
       no_workout_yet: "Aucune séance enregistrée.",
       start: "début",

+ 1 - 1
src/features/layout/Header.tsx

@@ -100,7 +100,7 @@ export const Header = () => {
             ) : (
               <li>
                 <button
-                  className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-100  rounded-lg px-3 py-2 transition-colors"
+                  className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-100 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
                   onClick={handleSignOut}
                 >
                   <LogOut className="w-4 h-4" />

+ 5 - 5
src/features/workout-session/ui/workout-session-header.tsx

@@ -53,7 +53,7 @@ export function WorkoutSessionHeader({
   return (
     <>
       <div className="w-full mb-8">
-        <div className="rounded-xl p-3 bg-slate-50">
+        <div className="rounded-xl p-3 bg-slate-50 dark:bg-slate-900/80">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-2">
               <div className="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></div>
@@ -64,7 +64,7 @@ export function WorkoutSessionHeader({
             </div>
 
             <Button
-              className="border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500 px-2 py-1 text-xs"
+              className="border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500 px-2 py-1 text-xs dark:border-red-700/40 dark:text-red-300 dark:hover:bg-red-700/10"
               onClick={handleQuitClick}
               variant="outline"
             >
@@ -128,18 +128,18 @@ export function WorkoutSessionHeader({
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <span className="text-lg font-bold text-slate-900 dark:text-white">{exercisesCompleted}</span>
-                  <span className="text-slate-400">/ {totalExercises}</span>
+                  <span className="text-slate-400 dark:text-slate-400">/ {totalExercises}</span>
                 </div>
 
                 <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2 overflow-hidden">
                   <div
                     className="h-full bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-500 ease-out"
-                    style={{ width: `${((currentExerciseIndex + 1) / totalExercises) * 100}%` }}
+                    style={{ width: `${(exercisesCompleted / totalExercises) * 100}%` }}
                   />
                 </div>
 
                 <div className="text-center">
-                  <span className="text-xs text-slate-400">
+                  <span className="text-xs text-slate-400 dark:text-slate-400">
                     {Math.round((exercisesCompleted / totalExercises) * 100)}% {t("workout_builder.session.complete")}
                   </span>
                 </div>

+ 16 - 14
src/features/workout-session/ui/workout-session-set.tsx

@@ -67,16 +67,16 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
   };
 
   const renderInputForType = (type: WorkoutSetType, columnIndex: number) => {
-    const valuesInt = Array.isArray(set.valuesInt) ? set.valuesInt : [set.valueInt];
-    const valuesSec = Array.isArray(set.valuesSec) ? set.valuesSec : [set.valueSec];
-    const units = Array.isArray(set.units) ? set.units : [set.unit];
+    const valuesInt = set.valuesInt || [];
+    const valuesSec = set.valuesSec || [];
+    const units = set.units || [];
 
     switch (type) {
       case "TIME":
         return (
           <div className="flex gap-1 w-full">
             <input
-              className="border border-black rounded px-1 py-1 w-1/2 text-sm text-center font-bold"
+              className="border border-black rounded px-1 py-1 w-1/2 text-sm text-center font-bold dark:bg-slate-800 dark:placeholder:text-slate-500"
               disabled={set.completed}
               min={0}
               onChange={handleValueIntChange(columnIndex)}
@@ -85,7 +85,7 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
               value={valuesInt[columnIndex] ?? ""}
             />
             <input
-              className="border border-black rounded px-1 py-1 w-1/2 text-sm text-center font-bold"
+              className="border border-black rounded px-1 py-1 w-1/2 text-sm text-center font-bold dark:bg-slate-800 dark:placeholder:text-slate-500"
               disabled={set.completed}
               max={59}
               min={0}
@@ -100,7 +100,7 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
         return (
           <div className="flex gap-1 w-full items-center">
             <input
-              className="border border-black rounded px-1 py-1 w-1/2 text-sm text-center font-bold"
+              className="border border-black rounded px-1 py-1 w-1/2 text-sm text-center font-bold dark:bg-slate-800"
               disabled={set.completed}
               min={0}
               onChange={handleValueIntChange(columnIndex)}
@@ -109,7 +109,7 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
               value={valuesInt[columnIndex] ?? ""}
             />
             <select
-              className="border border-black rounded px-1 py-1 w-1/2 text-sm font-bold bg-white"
+              className="border border-black rounded px-1 py-1 w-1/2 text-sm font-bold bg-white dark:bg-slate-800 dark:text-gray-200"
               disabled={set.completed}
               onChange={handleUnitChange(columnIndex)}
               value={units[columnIndex] ?? "kg"}
@@ -122,7 +122,7 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
       case "REPS":
         return (
           <input
-            className="border border-black rounded px-1 py-1 w-full text-sm text-center font-bold"
+            className="border border-black rounded px-1 py-1 w-full text-sm text-center font-bold dark:bg-slate-800"
             disabled={set.completed}
             min={0}
             onChange={handleValueIntChange(columnIndex)}
@@ -134,7 +134,7 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
       case "BODYWEIGHT":
         return (
           <input
-            className="border border-black rounded px-1 py-1 w-full text-sm text-center font-bold"
+            className="border border-black rounded px-1 py-1 w-full text-sm text-center font-bold dark:bg-slate-800"
             disabled={set.completed}
             placeholder=""
             readOnly
@@ -147,12 +147,14 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
   };
 
   return (
-    <div className="w-full py-4 flex flex-col gap-2 bg-slate-50 border border-slate-200 rounded-xl shadow-sm mb-3 relative px-2 sm:px-4">
+    <div className="w-full py-4 flex flex-col gap-2 bg-slate-50 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-700/50 rounded-xl shadow-sm mb-3 relative px-2 sm:px-4">
       <div className="flex items-center justify-between mb-2">
-        <div className="bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow">SET {setIndex + 1}</div>
+        <div className="bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow dark:bg-blue-900 dark:text-blue-300">
+          SET {setIndex + 1}
+        </div>
         <Button
           aria-label="Supprimer la série"
-          className="bg-red-100 hover:bg-red-200 text-red-600 rounded-full p-1 h-8 w-8 flex items-center justify-center shadow transition"
+          className="bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-900/60 text-red-600 dark:text-red-300 rounded-full p-1 h-8 w-8 flex items-center justify-center shadow transition"
           disabled={set.completed}
           onClick={onRemove}
           type="button"
@@ -167,7 +169,7 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
           <div className="flex flex-col w-full md:w-auto" key={columnIndex}>
             <div className="flex items-center w-full gap-1 mb-1">
               <select
-                className="border border-black rounded font-bold px-1 py-1 text-sm w-full bg-white min-w-0"
+                className="border border-black dark:border-slate-700 rounded font-bold px-1 py-1 text-sm w-full bg-white dark:bg-slate-800 dark:text-gray-200 min-w-0"
                 disabled={set.completed}
                 onChange={handleTypeChange(columnIndex)}
                 value={type}
@@ -179,7 +181,7 @@ export function WorkoutSessionSet({ set, setIndex, onChange, onFinish, onRemove
               </select>
               {types.length > 1 && (
                 <Button
-                  className="p-1 h-auto bg-red-500 hover:bg-red-600 flex-shrink-0"
+                  className="p-1 h-auto bg-red-500 hover:bg-red-600 dark:bg-red-900 dark:hover:bg-red-800 flex-shrink-0"
                   onClick={() => removeColumn(columnIndex)}
                   size="small"
                   variant="destructive"