Browse Source

style(muscle-selection.tsx): enhance muscle illustration styles with transition effects and focus-visible outlines for better accessibility and user experience

Mathias 1 month ago
parent
commit
3f792dc7d1
1 changed files with 5 additions and 1 deletions
  1. 5 1
      src/features/workout-builder/ui/muscle-selection.tsx

+ 5 - 1
src/features/workout-builder/ui/muscle-selection.tsx

@@ -35,7 +35,11 @@ const MuscleIllustration = ({
 }) => {
   const getMuscleClasses = (muscle: ExerciseAttributeValueEnum) => {
     const isSelected = selectedMuscles.includes(muscle);
-    return cn("cursor-pointer group-hover:fill-primary/80", isSelected ? "fill-primary" : "fill-[#757575]");
+    return cn(
+      "cursor-pointer transition-colors",
+      isSelected ? "fill-primary" : "fill-[#757575]",
+      "md:group-hover:fill-primary/80 group-active:fill-primary/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary",
+    );
   };
 
   return (