Client - replace sports PNG images with SVG

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

@@ -5,7 +5,7 @@
       $router.push({ name: 'Workout', params: { workoutId: workout.id } })
     "
   >
-    <img alt="workout sport logo" :src="sportImg" :title="workout.title" />
+    <SportImage :sport-label="sportLabel" :title="workout.title" />
     <sup>
       <i
         v-if="workout.records.length > 0"
@@ -25,16 +25,20 @@
   import { defineComponent, PropType } from 'vue'
   import { useI18n } from 'vue-i18n'
 
+  import SportImage from '@/components/Common/Sports/SportImage.vue'
   import { IWorkout } from '@/types/workouts'
 
   export default defineComponent({
     name: 'CalendarWorkouts',
+    components: {
+      SportImage,
+    },
     props: {
       workout: {
         type: Object as PropType<IWorkout>,
         required: true,
       },
-      sportImg: {
+      sportLabel: {
         type: String,
         required: true,
       },
@@ -53,9 +57,9 @@
     display: flex;
     padding: 1px;
     cursor: pointer;
-    img {
-      max-width: 18px;
-      max-height: 18px;
+    .sport-img {
+      width: 18px;
+      height: 18px;
     }
     sup {
       position: relative;
@@ -68,9 +72,9 @@
     }
 
     @media screen and (max-width: $small-limit) {
-      img {
-        max-width: 14px;
-        max-height: 14px;
+      .sport-img {
+        width: 14px;
+        height: 14px;
       }
       sup {
         .custom-fa-small {

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

@@ -9,7 +9,7 @@
           v-for="(workout, index) in workouts.slice(0, displayedWorkoutCount)"
           :key="index"
           :workout="workout"
-          :sportImg="getSportImg(workout, sports)"
+          :sportLabel="getSportLabel(workout, sports)"
         />
       </div>
       <div v-else class="donut-display">
@@ -41,7 +41,7 @@
   import CalendarWorkoutsChart from '@/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue'
   import { ISport } from '@/types/sports'
   import { IWorkout } from '@/types/workouts'
-  import { getSportImg, sportIdColors } from '@/utils/sports'
+  import { getSportLabel, sportIdColors } from '@/utils/sports'
   import { getDonutDatasets } from '@/utils/workouts'
 
   export default defineComponent({
@@ -65,7 +65,7 @@
         chartDatasets: computed(() => getDonutDatasets(props.workouts)),
         colors: computed(() => sportIdColors(props.sports)),
         displayedWorkoutCount: 6,
-        getSportImg,
+        getSportLabel,
       }
     },
   })

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

@@ -11,12 +11,12 @@
           aria-hidden="true"
           @click="togglePane"
         />
-        <div v-for="(workout, index) in workouts" :key="index">
-          <CalendarWorkout
-            :workout="workout"
-            :sportImg="getSportImg(workout, sports)"
-          />
-        </div>
+        <CalendarWorkout
+          v-for="(workout, index) in workouts"
+          :key="index"
+          :workout="workout"
+          :sportLabel="getSportLabel(workout, sports)"
+        />
       </div>
     </div>
   </div>
@@ -29,7 +29,7 @@
   import DonutChart from '@/components/Dashboard/UserCalendar/DonutChart.vue'
   import { ISport } from '@/types/sports'
   import { IWorkout } from '@/types/workouts'
-  import { getSportImg } from '@/utils/sports'
+  import { getSportLabel } from '@/utils/sports'
 
   export default defineComponent({
     name: 'CalendarWorkoutsChart',
@@ -61,7 +61,7 @@
         event.stopPropagation()
         isHidden.value = !isHidden.value
       }
-      return { isHidden, getSportImg, togglePane }
+      return { isHidden, getSportLabel, togglePane }
     },
   })
 </script>