Client - init administration + refacto

fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="user-stat-card">
-    <div class="stat-content box">
-      <div class="stat-icon">
-        <i class="fa" :class="`fa-${icon}`" />
-      </div>
-      <div class="stat-details">
-        <div class="stat-huge">{{ value }}</div>
-        <div class="stat">{{ text }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue'
-
-  export default defineComponent({
-    name: 'UserStatCard',
-    props: {
-      icon: {
-        type: String,
-        required: true,
-      },
-      value: {
-        type: [String, Number],
-        required: true,
-      },
-      text: {
-        type: String,
-        required: true,
-      },
-    },
-  })
-</script>
-
-<style lang="scss">
-  @import '~@/scss/base';
-  .user-stat-card {
-    flex: 1;
-    max-width: 25%;
-    @media screen and (max-width: $small-limit) {
-      flex: 1 0 50%;
-      max-width: 49%;
-    }
-
-    .stat-content {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      padding: $default-padding $default-padding * 2;
-
-      .stat-icon {
-        width: 30%;
-        text-align: center;
-        vertical-align: center;
-        @media screen and (max-width: $medium-limit) {
-          width: 50%;
-          text-align: left;
-        }
-
-        .fa {
-          font-size: 3em;
-          @media screen and (max-width: $medium-limit) {
-            font-size: 2em;
-          }
-          @media screen and (max-width: $x-small-limit) {
-            font-size: 1.5em;
-          }
-        }
-      }
-      .stat-details {
-        width: 70%;
-        text-align: right;
-        @media screen and (max-width: $medium-limit) {
-          width: 100%;
-        }
-
-        .stat-huge {
-          font-size: 1.7em;
-          font-weight: bold;
-          @media screen and (max-width: $medium-limit) {
-            font-size: 1.3em;
-          }
-          @media screen and (max-width: $x-small-limit) {
-            font-size: 1em;
-          }
-        }
-        .stat {
-          font-size: 1em;
-          @media screen and (max-width: $medium-limit) {
-            font-size: 0.9em;
-          }
-          @media screen and (max-width: $x-small-limit) {
-            font-size: 0.8em;
-          }
-        }
-      }
-    }
-  }
-</style>

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

@@ -1,21 +1,21 @@
 <template>
   <div id="user-stats">
-    <UserStatCard
+    <StatCard
       icon="calendar"
       :value="user.nb_workouts"
       :text="$t('workouts.WORKOUT', user.nb_workouts)"
     />
-    <UserStatCard
+    <StatCard
       icon="road"
       :value="Number(user.total_distance).toFixed(2)"
       :text="$t('workouts.KM')"
     />
-    <UserStatCard
+    <StatCard
       icon="clock-o"
       :value="total_duration.days"
       :text="total_duration.duration"
     />
-    <UserStatCard
+    <StatCard
       icon="tags"
       :value="user.nb_sports"
       :text="$t('workouts.SPORT', user.nb_sports)"
@@ -27,13 +27,13 @@
   import { ComputedRef, PropType, defineComponent, computed } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import UserStatCard from '@/components/Dashboard/UserStatsCards/UserStatCard.vue'
+  import StatCard from '@/components/Common/StatCard.vue'
   import { IAuthUserProfile } from '@/types/user'
 
   export default defineComponent({
     name: 'UserStatsCards',
     components: {
-      UserStatCard,
+      StatCard,
     },
     props: {
       user: {