Client - add user sports preferences

+ minor refactor

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue

@@ -5,7 +5,11 @@
       $router.push({ name: 'Workout', params: { workoutId: workout.id } })
     "
   >
-    <SportImage :sport-label="sportLabel" :title="workout.title" />
+    <SportImage
+      :sport-label="sportLabel"
+      :title="workout.title"
+      :color="sportColor"
+    />
     <sup>
       <i
         v-if="workout.records.length > 0"
@@ -28,6 +32,7 @@
   interface Props {
     workout: IWorkout
     sportLabel: string
+    sportColor: string | null
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkouts.vue

@@ -10,6 +10,7 @@
           :key="index"
           :workout="workout"
           :sportLabel="getSportLabel(workout, sports)"
+          :sportColor="getSportColor(workout, sports)"
         />
       </div>
       <div v-else class="donut-display">
@@ -41,7 +42,7 @@
   import CalendarWorkoutsChart from '@/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue'
   import { ISport } from '@/types/sports'
   import { IWorkout } from '@/types/workouts'
-  import { getSportLabel, sportIdColors } from '@/utils/sports'
+  import { getSportColor, getSportLabel, sportIdColors } from '@/utils/sports'
   import { getDonutDatasets } from '@/utils/workouts'
 
   interface Props {

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -2,7 +2,7 @@
   <div class="records-card">
     <Card>
       <template #title>
-        <SportImage :sport-label="records.label" />
+        <SportImage :sport-label="records.label" :color="records.color" />
         {{ sportTranslatedLabel }}
       </template>
       <template #content>