Client - replace sports PNG images with SVG

fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue

@@ -61,12 +61,7 @@
           "
         >
           <div>
-            <img
-              v-if="sport"
-              class="sport-img"
-              alt="workout sport logo"
-              :src="sport.img"
-            />
+            <SportImage v-if="sport" :sport-label="sport.label" />
           </div>
           <div>
             <i class="fa fa-clock-o" aria-hidden="true" />
@@ -88,6 +83,7 @@
   import { useI18n } from 'vue-i18n'
 
   import Card from '@/components/Common/Card.vue'
+  import SportImage from '@/components/Common/Sports/SportImage.vue'
   import StaticMap from '@/components/Common/StaticMap.vue'
   import { ROOT_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
@@ -102,6 +98,7 @@
     components: {
       Card,
       StaticMap,
+      SportImage,
     },
     props: {
       workout: {
@@ -196,8 +193,10 @@
             width: 28px;
           }
           div {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             width: 33%;
-            text-align: center;
           }
         }
         .workout-map,

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>

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

@@ -2,14 +2,8 @@
   <div class="records-card">
     <Card :without-title="false">
       <template #title>
-        <div>
-          <img
-            class="sport-img"
-            :alt="`${sportLabel} logo`"
-            :src="records.img"
-          />
-        </div>
-        {{ sportLabel }}
+        <SportImage :sport-label="records.label" />
+        {{ sportTranslatedLabel }}
       </template>
       <template #content>
         <div class="record" v-for="record in records.records" :key="record.id">
@@ -37,19 +31,21 @@
   import { useI18n } from 'vue-i18n'
 
   import Card from '@/components/Common/Card.vue'
+  import SportImage from '@/components/Common/Sports/SportImage.vue'
   import { IRecord } from '@/types/workouts'
 
   export default defineComponent({
     name: 'RecordsCard',
     components: {
       Card,
+      SportImage,
     },
     props: {
       records: {
         type: Object as PropType<IRecord[]>,
         required: true,
       },
-      sportLabel: {
+      sportTranslatedLabel: {
         type: String,
         required: true,
       },

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

@@ -9,10 +9,10 @@
         {{ t('workouts.NO_RECORDS') }}
       </div>
       <RecordsCard
-        v-for="sportLabel in Object.keys(recordsBySport).sort()"
-        :sportLabel="sportLabel"
-        :records="recordsBySport[sportLabel]"
-        :key="sportLabel"
+        v-for="sportTranslatedLabel in Object.keys(recordsBySport).sort()"
+        :sportTranslatedLabel="sportTranslatedLabel"
+        :records="recordsBySport[sportTranslatedLabel]"
+        :key="sportTranslatedLabel"
       />
     </div>
   </div>
@@ -52,7 +52,10 @@
           props.user.timezone
         )
       )
-      return { recordsBySport, t }
+      return {
+        recordsBySport,
+        t,
+      }
     },
   })
 </script>