From 9bc6422620f57c143100e4cf8e0bc1ec4a2525f7 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Tue, 5 Oct 2021 19:02:08 +0200
Subject: [PATCH] Client - remove useless Cards

---
 .../src/components/Common/Card.vue            |  12 +-
 .../src/components/Common/NoWorkouts.vue      |   6 +-
 .../Dashboard/Timeline/WorkoutCard.vue        | 240 +++++-----
 .../Dashboard/UserCalendar/index.vue          |  40 +-
 .../Dashboard/UserStatsCards/UserStatCard.vue |  27 +-
 .../components/Workouts/WorkoutsFilters.vue   | 437 +++++++++---------
 .../src/components/Workouts/WorkoutsList.vue  | 386 ++++++++--------
 fittrackee_client/src/scss/base.scss          |   7 +
 fittrackee_client/src/views/DashBoard.vue     | 103 ++---
 9 files changed, 609 insertions(+), 649 deletions(-)

diff --git a/fittrackee_client/src/components/Common/Card.vue b/fittrackee_client/src/components/Common/Card.vue
index badbcc7f..1728ec59 100644
--- a/fittrackee_client/src/components/Common/Card.vue
+++ b/fittrackee_client/src/components/Common/Card.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card">
-    <div class="card-title" :class="{ 'without-title': withoutTitle }">
+    <div class="card-title">
       <slot name="title"></slot>
     </div>
     <div class="card-content">
@@ -13,12 +13,6 @@
   import { defineComponent } from 'vue'
   export default defineComponent({
     name: 'Card',
-    props: {
-      withoutTitle: {
-        type: Boolean,
-        default: false,
-      },
-    },
   })
 </script>
 
@@ -30,10 +24,6 @@
     border-radius: $border-radius;
     margin: $default-margin;
 
-    .without-title {
-      display: none;
-    }
-
     .card-title {
       font-weight: bold;
       border-bottom: solid 1px var(--card-border-color);
diff --git a/fittrackee_client/src/components/Common/NoWorkouts.vue b/fittrackee_client/src/components/Common/NoWorkouts.vue
index 8a5966c2..b2720d7d 100644
--- a/fittrackee_client/src/components/Common/NoWorkouts.vue
+++ b/fittrackee_client/src/components/Common/NoWorkouts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="no-workouts">
+  <div class="no-workouts box">
     <div>
       {{ t('workouts.NO_WORKOUTS') }}
       <router-link to="/workouts/add">
@@ -27,9 +27,5 @@
   .no-workouts {
     display: flex;
     justify-content: center;
-    border: solid 1px var(--card-border-color);
-    border-radius: $border-radius;
-    padding: $default-padding;
-    margin: $default-margin;
   }
 </style>
diff --git a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
index 40b7af50..b719c0c4 100644
--- a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
@@ -1,79 +1,77 @@
 <template>
   <div class="timeline-workout">
-    <Card :without-title="true">
-      <template #content>
-        <div class="workout-user-date">
-          <div class="workout-user">
-            <img
-              class="profile-img"
-              v-if="userPictureUrl !== ''"
-              :alt="t('user.USER_PICTURE')"
-              :src="userPictureUrl"
-            />
-            <div v-else class="no-picture">
-              <i class="fa fa-user-circle-o" aria-hidden="true" />
-            </div>
-            <span v-if="user.username" class="workout-user-name">
-              {{ user.username }}
-            </span>
+    <div class="box">
+      <div class="workout-user-date">
+        <div class="workout-user">
+          <img
+            class="profile-img"
+            v-if="userPictureUrl !== ''"
+            :alt="t('user.USER_PICTURE')"
+            :src="userPictureUrl"
+          />
+          <div v-else class="no-picture">
+            <i class="fa fa-user-circle-o" aria-hidden="true" />
           </div>
-          <div
-            class="workout-date"
-            v-if="workout && user"
-            :title="
-              format(
-                getDateWithTZ(workout.workout_date, user.timezone),
-                'dd/MM/yyyy HH:mm'
-              )
-            "
-          >
-            {{
-              formatDistance(new Date(workout.workout_date), new Date(), {
-                addSuffix: true,
-                locale,
+          <span v-if="user.username" class="workout-user-name">
+            {{ user.username }}
+          </span>
+        </div>
+        <div
+          class="workout-date"
+          v-if="workout && user"
+          :title="
+            format(
+              getDateWithTZ(workout.workout_date, user.timezone),
+              'dd/MM/yyyy HH:mm'
+            )
+          "
+        >
+          {{
+            formatDistance(new Date(workout.workout_date), new Date(), {
+              addSuffix: true,
+              locale,
+            })
+          }}
+        </div>
+      </div>
+      <div
+        class="workout-map"
+        :class="{ 'no-cursor': !workout }"
+        @click="
+          workout
+            ? $router.push({
+                name: 'Workout',
+                params: { workoutId: workout.id },
               })
-            }}
+            : null
+        "
+      >
+        <div v-if="workout">
+          <StaticMap v-if="workout.with_gpx" :workout="workout" />
+          <div v-else class="no-map">
+            {{ t('workouts.NO_MAP') }}
           </div>
         </div>
-        <div
-          class="workout-map"
-          :class="{ 'no-cursor': !workout }"
-          @click="
-            workout
-              ? $router.push({
-                  name: 'Workout',
-                  params: { workoutId: workout.id },
-                })
-              : null
-          "
-        >
-          <div v-if="workout">
-            <StaticMap v-if="workout.with_gpx" :workout="workout" />
-            <div v-else class="no-map">
-              {{ t('workouts.NO_MAP') }}
-            </div>
-          </div>
+      </div>
+      <div
+        class="workout-data"
+        @click="
+          $router.push({ name: 'Workout', params: { workoutId: workout.id } })
+        "
+      >
+        <div>
+          <SportImage v-if="sport" :sport-label="sport.label" />
         </div>
-        <div
-          class="workout-data"
-          @click="
-            $router.push({ name: 'Workout', params: { workoutId: workout.id } })
-          "
-        >
-          <div>
-            <SportImage v-if="sport" :sport-label="sport.label" />
-          </div>
-          <div>
-            <i class="fa fa-clock-o" aria-hidden="true" />
-            <span v-if="workout">{{ workout.moving }}</span>
-          </div>
-          <div>
-            <i class="fa fa-road" aria-hidden="true" />
-            <span v-if="workout">{{ workout.distance }} km</span>
-          </div>
+        <div>
+          <i class="fa fa-clock-o" aria-hidden="true" />
+          <span v-if="workout">{{ workout.moving }}</span>
         </div>
-      </template>
-    </Card>
+        <div>
+          <i class="fa fa-road" aria-hidden="true" />
+          <span v-if="workout">{{ workout.distance }} km</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -82,7 +80,6 @@
   import { PropType, defineComponent, ComputedRef, computed } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import Card from '@/components/Common/Card.vue'
   import SportImage from '@/components/Common/SportImage/index.vue'
   import StaticMap from '@/components/Common/StaticMap.vue'
   import { ROOT_STORE } from '@/store/constants'
@@ -96,7 +93,6 @@
   export default defineComponent({
     name: 'WorkoutCard',
     components: {
-      Card,
       StaticMap,
       SportImage,
     },
@@ -145,71 +141,69 @@
   .timeline-workout {
     margin-bottom: $default-margin * 2;
 
-    ::v-deep(.card) {
-      .card-content {
+    .box {
+      flex-direction: column;
+      padding: 0;
+      .workout-user-date {
         display: flex;
-        flex-direction: column;
-        padding: 0;
-        .workout-user-date {
+        justify-content: space-between;
+        padding: $default-padding * 0.5 $default-padding;
+        .workout-user {
           display: flex;
-          justify-content: space-between;
-          padding: $default-padding * 0.5 $default-padding;
-          .workout-user {
-            display: flex;
-            .profile-img {
-              border-radius: 50%;
-              height: 25px;
-              width: 25px;
-            }
-            .fa-user-circle-o {
-              font-size: 1.5em;
-            }
-            .workout-user-name {
-              padding-left: 5px;
-            }
+          .profile-img {
+            border-radius: 50%;
+            height: 25px;
+            width: 25px;
           }
-          .workout-date {
-            font-size: 0.85em;
-            font-style: italic;
+          .fa-user-circle-o {
+            font-size: 1.5em;
+          }
+          .workout-user-name {
+            padding-left: 5px;
           }
         }
+        .workout-date {
+          font-size: 0.85em;
+          font-style: italic;
+        }
+      }
 
-        .workout-map {
-          background-color: var(--workout-no-map-bg-color);
+      .workout-map {
+        background-color: var(--workout-no-map-bg-color);
+        height: 150px;
+        .no-map {
+          line-height: 150px;
+        }
+        ::v-deep(.bg-map-image) {
           height: 150px;
-          .no-map {
-            line-height: 150px;
-          }
-          .bg-map-image {
-            height: 150px;
-          }
         }
+      }
 
-        .workout-data {
+      .workout-data {
+        display: flex;
+        padding-top: $default-padding * 0.5;
+        .sport-img {
+          height: 28px;
+          width: 28px;
+        }
+        div {
           display: flex;
-          padding-top: $default-padding * 0.5;
-          .sport-img {
-            height: 28px;
-            width: 28px;
-          }
-          div {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 33%;
-          }
-        }
-        .workout-map,
-        .workout-data {
-          cursor: pointer;
-        }
-        .no-cursor {
-          cursor: default;
-        }
-        .fa {
-          padding-right: $default-padding;
+          justify-content: center;
+          align-items: center;
+          width: 33%;
         }
       }
+
+      .workout-map,
+      .workout-data {
+        cursor: pointer;
+      }
+      .no-cursor {
+        cursor: default;
+      }
+      .fa {
+        padding-right: $default-padding;
+      }
     }
   }
 </style>
diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/index.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/index.vue
index 47b9a06c..21b2bf01 100644
--- a/fittrackee_client/src/components/Dashboard/UserCalendar/index.vue
+++ b/fittrackee_client/src/components/Dashboard/UserCalendar/index.vue
@@ -1,25 +1,23 @@
 <template>
   <div id="user-calendar">
-    <Card class="calendar-card" :without-title="true">
-      <template #content>
-        <CalendarHeader
-          :day="day"
-          locale-options="enGB"
-          @displayNextMonth="displayNextMonth"
-          @displayPreviousMonth="displayPreviousMonth"
-        />
-        <CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
-        <CalendarCells
-          :currentDay="day"
-          :end-date="calendarDates.end"
-          :sports="sports"
-          :start-date="calendarDates.start"
-          :timezone="user.timezone"
-          :workouts="calendarWorkouts"
-          :weekStartingMonday="user.weekm"
-        />
-      </template>
-    </Card>
+    <div class="calendar-card box">
+      <CalendarHeader
+        :day="day"
+        locale-options="enGB"
+        @displayNextMonth="displayNextMonth"
+        @displayPreviousMonth="displayPreviousMonth"
+      />
+      <CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
+      <CalendarCells
+        :currentDay="day"
+        :end-date="calendarDates.end"
+        :sports="sports"
+        :start-date="calendarDates.start"
+        :timezone="user.timezone"
+        :workouts="calendarWorkouts"
+        :weekStartingMonday="user.weekm"
+      />
+    </div>
   </div>
 </template>
 
@@ -34,7 +32,6 @@
     onBeforeMount,
   } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
   import CalendarCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue'
   import CalendarDays from '@/components/Dashboard/UserCalendar/CalendarDays.vue'
   import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue'
@@ -51,7 +48,6 @@
       CalendarCells,
       CalendarDays,
       CalendarHeader,
-      Card,
     },
     props: {
       sports: {
diff --git a/fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue b/fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue
index 03a0bf03..195b1e23 100644
--- a/fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue
+++ b/fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue
@@ -1,30 +1,22 @@
 <template>
   <div class="user-stat-card">
-    <Card :without-title="true">
-      <template #content>
-        <div class="stat-content">
-          <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>
-      </template>
-    </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'
 
-  import Card from '@/components/Common/Card.vue'
   export default defineComponent({
     name: 'UserStatCard',
-    components: {
-      Card,
-    },
     props: {
       icon: {
         type: String,
@@ -56,6 +48,7 @@
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      padding: $default-padding $default-padding * 2;
 
       .stat-icon {
         width: 30%;
diff --git a/fittrackee_client/src/components/Workouts/WorkoutsFilters.vue b/fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
index 6084db94..911f502b 100644
--- a/fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
+++ b/fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
@@ -1,136 +1,134 @@
 <template>
   <div class="workouts-filters">
-    <Card :without-title="true">
-      <template #content>
-        <div class="form">
-          <div class="form-items-group">
-            <div class="form-item">
-              <label> {{ t('workouts.FROM') }}: </label>
-              <input name="from" type="date" @change="handleFilterChange" />
-            </div>
-            <div class="form-item">
-              <label> {{ t('workouts.TO') }}: </label>
-              <input name="to" type="date" @change="handleFilterChange" />
-            </div>
+    <div class="box">
+      <div class="form">
+        <div class="form-items-group">
+          <div class="form-item">
+            <label> {{ t('workouts.FROM') }}: </label>
+            <input name="from" type="date" @change="handleFilterChange" />
           </div>
-
-          <div class="form-items-group">
-            <div class="form-item">
-              <label> {{ t('workouts.SPORT', 1) }}:</label>
-              <select name="sport_id" @change="handleFilterChange">
-                <option value="" />
-                <option
-                  v-for="sport in translatedSports"
-                  :value="sport.id"
-                  :key="sport.id"
-                >
-                  {{ sport.label }}
-                </option>
-              </select>
-            </div>
+          <div class="form-item">
+            <label> {{ t('workouts.TO') }}: </label>
+            <input name="to" type="date" @change="handleFilterChange" />
           </div>
+        </div>
 
-          <div class="form-items-group">
-            <div class="form-item">
-              <label> {{ t('workouts.DISTANCE') }} (km): </label>
-              <div class="form-inputs-group">
-                <input
-                  name="distance_from"
-                  type="number"
-                  min="0"
-                  step="1"
-                  @change="handleFilterChange"
-                />
-                <span>{{ t('workouts.TO') }}</span>
-                <input
-                  name="distance_to"
-                  type="number"
-                  min="0"
-                  step="1"
-                  @change="handleFilterChange"
-                />
-              </div>
-            </div>
+        <div class="form-items-group">
+          <div class="form-item">
+            <label> {{ t('workouts.SPORT', 1) }}:</label>
+            <select name="sport_id" @change="handleFilterChange">
+              <option value="" />
+              <option
+                v-for="sport in translatedSports"
+                :value="sport.id"
+                :key="sport.id"
+              >
+                {{ sport.label }}
+              </option>
+            </select>
           </div>
+        </div>
 
-          <div class="form-items-group">
-            <div class="form-item">
-              <label> {{ t('workouts.DURATION') }} (km): </label>
-              <div class="form-inputs-group">
-                <input
-                  name="duration_from"
-                  @change="handleFilterChange"
-                  pattern="^([0-9]*[0-9]):([0-5][0-9])$"
-                  placeholder="hh:mm"
-                  type="text"
-                />
-                <span>{{ t('workouts.TO') }}</span>
-                <input
-                  name="duration_to"
-                  @change="handleFilterChange"
-                  pattern="^([0-9]*[0-9]):([0-5][0-9])$"
-                  placeholder="hh:mm"
-                  type="text"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="form-items-group">
-            <div class="form-item">
-              <label> {{ t('workouts.AVE_SPEED') }} (km): </label>
-              <div class="form-inputs-group">
-                <input
-                  min="0"
-                  name="ave_speed_from"
-                  @change="handleFilterChange"
-                  step="1"
-                  type="number"
-                />
-                <span>{{ t('workouts.TO') }}</span>
-                <input
-                  min="0"
-                  name="ave_speed_to"
-                  @change="handleFilterChange"
-                  step="1"
-                  type="number"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="form-items-group">
-            <div class="form-item">
-              <label> {{ t('workouts.MAX_SPEED') }} (km): </label>
-
-              <div class="form-inputs-group">
-                <input
-                  min="0"
-                  name="max_speed_from"
-                  @change="handleFilterChange"
-                  step="1"
-                  type="number"
-                />
-                <span>{{ t('workouts.TO') }}</span>
-                <input
-                  min="0"
-                  name="max_speed_to"
-                  @change="handleFilterChange"
-                  step="1"
-                  type="number"
-                />
-              </div>
+        <div class="form-items-group">
+          <div class="form-item">
+            <label> {{ t('workouts.DISTANCE') }} (km): </label>
+            <div class="form-inputs-group">
+              <input
+                name="distance_from"
+                type="number"
+                min="0"
+                step="1"
+                @change="handleFilterChange"
+              />
+              <span>{{ t('workouts.TO') }}</span>
+              <input
+                name="distance_to"
+                type="number"
+                min="0"
+                step="1"
+                @change="handleFilterChange"
+              />
             </div>
           </div>
         </div>
 
-        <div class="form-button">
-          <button class="confirm" @click="onFilter">
-            {{ t('buttons.FILTER') }}
-          </button>
+        <div class="form-items-group">
+          <div class="form-item">
+            <label> {{ t('workouts.DURATION') }} (km): </label>
+            <div class="form-inputs-group">
+              <input
+                name="duration_from"
+                @change="handleFilterChange"
+                pattern="^([0-9]*[0-9]):([0-5][0-9])$"
+                placeholder="hh:mm"
+                type="text"
+              />
+              <span>{{ t('workouts.TO') }}</span>
+              <input
+                name="duration_to"
+                @change="handleFilterChange"
+                pattern="^([0-9]*[0-9]):([0-5][0-9])$"
+                placeholder="hh:mm"
+                type="text"
+              />
+            </div>
+          </div>
         </div>
-      </template>
-    </Card>
+
+        <div class="form-items-group">
+          <div class="form-item">
+            <label> {{ t('workouts.AVE_SPEED') }} (km): </label>
+            <div class="form-inputs-group">
+              <input
+                min="0"
+                name="ave_speed_from"
+                @change="handleFilterChange"
+                step="1"
+                type="number"
+              />
+              <span>{{ t('workouts.TO') }}</span>
+              <input
+                min="0"
+                name="ave_speed_to"
+                @change="handleFilterChange"
+                step="1"
+                type="number"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="form-items-group">
+          <div class="form-item">
+            <label> {{ t('workouts.MAX_SPEED') }} (km): </label>
+
+            <div class="form-inputs-group">
+              <input
+                min="0"
+                name="max_speed_from"
+                @change="handleFilterChange"
+                step="1"
+                type="number"
+              />
+              <span>{{ t('workouts.TO') }}</span>
+              <input
+                min="0"
+                name="max_speed_to"
+                @change="handleFilterChange"
+                step="1"
+                type="number"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-button">
+        <button class="confirm" @click="onFilter">
+          {{ t('buttons.FILTER') }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -138,15 +136,11 @@
   import { computed, ComputedRef, defineComponent, PropType } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import Card from '@/components/Common/Card.vue'
   import { ISport } from '@/types/sports'
   import { translateSports } from '@/utils/sports'
 
   export default defineComponent({
     name: 'WorkoutsFilters',
-    components: {
-      Card,
-    },
     props: {
       sports: {
         type: Object as PropType<ISport[]>,
@@ -181,126 +175,121 @@
   @import '~@/scss/base.scss';
 
   .workouts-filters {
-    ::v-deep(.card) {
-      .card-content {
-        padding: $default-padding;
-        .form {
+    .form {
+      display: flex;
+      flex-direction: column;
+      padding-top: 0;
+
+      .form-items-group {
+        display: flex;
+        flex-direction: column;
+        padding: $default-padding * 0.5;
+
+        .form-item {
           display: flex;
           flex-direction: column;
-          padding-top: 0;
 
-          .form-items-group {
+          .form-inputs-group {
             display: flex;
-            flex-direction: column;
-            padding: $default-padding * 0.5;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: center;
 
-            .form-item {
-              display: flex;
+            input {
+              width: 34%;
+            }
+            span {
+              padding: $default-padding * 0.5;
+            }
+          }
+
+          input {
+            height: 16px;
+          }
+
+          select {
+            height: 36px;
+            padding: 0 $default-padding * 0.5;
+          }
+        }
+      }
+    }
+
+    .form-button {
+      display: flex;
+      justify-content: center;
+
+      button {
+        margin: $default-padding * 2 $default-padding * 0.5 $default-padding
+          $default-padding * 0.5;
+        width: 100%;
+      }
+    }
+
+    @media screen and (max-width: $medium-limit) {
+      .form {
+        flex-direction: row;
+        padding-top: $default-padding * 0.5;
+
+        .form-items-group {
+          padding: 0 $default-padding * 0.5;
+          height: 100%;
+
+          .form-item {
+            label {
+              font-size: 0.9em;
+            }
+
+            .form-inputs-group {
               flex-direction: column;
-
-              .form-inputs-group {
-                display: flex;
-                flex-direction: row;
-                justify-content: space-around;
-                align-items: center;
-
-                input {
-                  width: 34%;
-                }
-                span {
-                  padding: $default-padding * 0.5;
-                }
-              }
+              justify-content: normal;
+              padding: 0;
 
               input {
-                height: 16px;
-              }
-
-              select {
-                height: 36px;
-                padding: 0 $default-padding * 0.5;
+                width: 75%;
               }
             }
           }
         }
+      }
 
-        .form-button {
-          display: flex;
-          justify-content: center;
-
-          button {
-            margin: $default-padding * 2 $default-padding * 0.5 $default-padding
-              $default-padding * 0.5;
-            width: 100%;
-          }
+      .form-button {
+        button {
+          margin: $default-padding $default-padding * 0.5;
+          width: 100%;
         }
+      }
+    }
+    @media screen and (max-width: $small-limit) {
+      .form {
+        flex-direction: column;
+        padding-top: 0;
 
-        @media screen and (max-width: $medium-limit) {
-          .form {
-            flex-direction: row;
-            padding-top: $default-padding * 0.5;
+        .form-items-group {
+          padding: $default-padding * 0.5;
 
-            .form-items-group {
-              padding: 0 $default-padding * 0.5;
-              height: 100%;
+          .form-item {
+            label {
+              font-size: 1em;
+            }
 
-              .form-item {
-                label {
-                  font-size: 0.9em;
-                }
-
-                .form-inputs-group {
-                  flex-direction: column;
-                  justify-content: normal;
-                  padding: 0;
-
-                  input {
-                    width: 75%;
-                  }
-                }
+            .form-inputs-group {
+              flex-direction: row;
+              justify-content: space-around;
+              align-items: center;
+              input {
+                width: 50%;
+              }
+              span {
+                padding: $default-padding * 0.5;
               }
             }
           }
-
-          .form-button {
-            button {
-              margin: $default-padding $default-padding * 0.5;
-              width: 100%;
-            }
-          }
         }
-        @media screen and (max-width: $small-limit) {
-          .form {
-            flex-direction: column;
-            padding-top: 0;
-
-            .form-items-group {
-              padding: $default-padding * 0.5;
-
-              .form-item {
-                label {
-                  font-size: 1em;
-                }
-
-                .form-inputs-group {
-                  flex-direction: row;
-                  justify-content: space-around;
-                  align-items: center;
-                  input {
-                    width: 50%;
-                  }
-                  span {
-                    padding: $default-padding * 0.5;
-                  }
-                }
-              }
-            }
-          }
-          .form-button {
-            button {
-              margin: $default-padding $default-padding * 0.5;
-            }
-          }
+      }
+      .form-button {
+        button {
+          margin: $default-padding $default-padding * 0.5;
         }
       }
     }
diff --git a/fittrackee_client/src/components/Workouts/WorkoutsList.vue b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
index 6507ca07..7dccf09e 100644
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
@@ -1,98 +1,96 @@
 <template>
   <div class="workouts-list">
-    <Card :without-title="true">
-      <template #content>
-        <div class="workouts-table">
-          <table>
-            <thead>
-              <tr>
-                <th class="sport-col" />
-                <th>{{ capitalize(t('workouts.WORKOUT', 1)) }}</th>
-                <th>{{ capitalize(t('workouts.DATE')) }}</th>
-                <th>{{ capitalize(t('workouts.DISTANCE')) }}</th>
-                <th>{{ capitalize(t('workouts.DURATION')) }}</th>
-                <th>{{ capitalize(t('workouts.AVE_SPEED')) }}</th>
-                <th>{{ capitalize(t('workouts.MAX_SPEED')) }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="workout in workouts" :key="workout.id">
-                <td class="sport-col">
-                  <span class="cell-heading">
-                    {{ t('workouts.SPORT', 1) }}
-                  </span>
-                  <SportImage
-                    :title="
-                      sports.filter((s) => s.id === workout.sport_id)[0]
-                        .translatedLabel
-                    "
-                    :sport-label="
-                      sports.filter((s) => s.id === workout.sport_id)[0].label
-                    "
-                  ></SportImage>
-                </td>
-                <td class="workout-title">
-                  <span class="cell-heading">
-                    {{ capitalize(t('workouts.WORKOUT', 1)) }}
-                  </span>
-                  <router-link
-                    class="nav-item"
-                    :to="{ name: 'Workout', params: { workoutId: workout.id } }"
-                  >
-                    <i
-                      v-if="workout.with_gpx"
-                      class="fa fa-map-o"
-                      aria-hidden="true"
-                    />
-                    {{ workout.title }}
-                  </router-link>
-                  <StaticMap
+    <div class="box" :class="{ 'empty-table': workouts.length === 0 }">
+      <div class="workouts-table">
+        <table>
+          <thead>
+            <tr>
+              <th class="sport-col" />
+              <th>{{ capitalize(t('workouts.WORKOUT', 1)) }}</th>
+              <th>{{ capitalize(t('workouts.DATE')) }}</th>
+              <th>{{ capitalize(t('workouts.DISTANCE')) }}</th>
+              <th>{{ capitalize(t('workouts.DURATION')) }}</th>
+              <th>{{ capitalize(t('workouts.AVE_SPEED')) }}</th>
+              <th>{{ capitalize(t('workouts.MAX_SPEED')) }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="workout in workouts" :key="workout.id">
+              <td class="sport-col">
+                <span class="cell-heading">
+                  {{ t('workouts.SPORT', 1) }}
+                </span>
+                <SportImage
+                  :title="
+                    sports.filter((s) => s.id === workout.sport_id)[0]
+                      .translatedLabel
+                  "
+                  :sport-label="
+                    sports.filter((s) => s.id === workout.sport_id)[0].label
+                  "
+                ></SportImage>
+              </td>
+              <td class="workout-title">
+                <span class="cell-heading">
+                  {{ capitalize(t('workouts.WORKOUT', 1)) }}
+                </span>
+                <router-link
+                  class="nav-item"
+                  :to="{ name: 'Workout', params: { workoutId: workout.id } }"
+                >
+                  <i
                     v-if="workout.with_gpx"
-                    :workout="workout"
-                    :display-hover="true"
+                    class="fa fa-map-o"
+                    aria-hidden="true"
                   />
-                </td>
-                <td>
-                  <span class="cell-heading">
-                    {{ t('workouts.DATE') }}
-                  </span>
-                  {{
-                    format(
-                      getDateWithTZ(workout.workout_date, user.timezone),
-                      'dd/MM/yyyy HH:mm'
-                    )
-                  }}
-                </td>
-                <td class="text-right">
-                  <span class="cell-heading">
-                    {{ t('workouts.DISTANCE') }}
-                  </span>
-                  {{ Number(workout.distance).toFixed(2) }} km
-                </td>
-                <td class="text-right">
-                  <span class="cell-heading">
-                    {{ t('workouts.DURATION') }}
-                  </span>
-                  {{ workout.moving }}
-                </td>
-                <td class="text-right">
-                  <span class="cell-heading">
-                    {{ t('workouts.AVE_SPEED') }}
-                  </span>
-                  {{ workout.ave_speed }} km/h
-                </td>
-                <td class="text-right">
-                  <span class="cell-heading">
-                    {{ t('workouts.MAX_SPEED') }}
-                  </span>
-                  {{ workout.max_speed }} km/h
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </template>
-    </Card>
+                  {{ workout.title }}
+                </router-link>
+                <StaticMap
+                  v-if="workout.with_gpx"
+                  :workout="workout"
+                  :display-hover="true"
+                />
+              </td>
+              <td>
+                <span class="cell-heading">
+                  {{ t('workouts.DATE') }}
+                </span>
+                {{
+                  format(
+                    getDateWithTZ(workout.workout_date, user.timezone),
+                    'dd/MM/yyyy HH:mm'
+                  )
+                }}
+              </td>
+              <td class="text-right">
+                <span class="cell-heading">
+                  {{ t('workouts.DISTANCE') }}
+                </span>
+                {{ Number(workout.distance).toFixed(2) }} km
+              </td>
+              <td class="text-right">
+                <span class="cell-heading">
+                  {{ t('workouts.DURATION') }}
+                </span>
+                {{ workout.moving }}
+              </td>
+              <td class="text-right">
+                <span class="cell-heading">
+                  {{ t('workouts.AVE_SPEED') }}
+                </span>
+                {{ workout.ave_speed }} km/h
+              </td>
+              <td class="text-right">
+                <span class="cell-heading">
+                  {{ t('workouts.MAX_SPEED') }}
+                </span>
+                {{ workout.max_speed }} km/h
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
     <NoWorkouts v-if="workouts.length === 0" />
     <div v-if="moreWorkoutsExist" class="more-workouts">
       <button @click="loadMoreWorkouts">
@@ -116,7 +114,6 @@
   } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import Card from '@/components/Common/Card.vue'
   import NoWorkouts from '@/components/Common/NoWorkouts.vue'
   import SportImage from '@/components/Common/SportImage/index.vue'
   import StaticMap from '@/components/Common/StaticMap.vue'
@@ -131,7 +128,6 @@
   export default defineComponent({
     name: 'WorkoutsList',
     components: {
-      Card,
       NoWorkouts,
       SportImage,
       StaticMap,
@@ -212,125 +208,127 @@
     margin-bottom: 50px;
     width: 100%;
 
-    ::v-deep(.card) {
-      .card-content {
+    .box {
+      @media screen and (max-width: $small-limit) {
+        &.empty-table {
+          display: none;
+        }
+      }
+      .workouts-table {
         margin-bottom: 15px;
+        /* responsive table, adapted from: */
+        /* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
+        table {
+          width: 100%;
+          padding: $default-padding;
+          font-size: 0.9em;
+          border-collapse: collapse;
 
-        .workouts-table {
-          /* responsive table, adapted from: */
-          /* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
-          table {
-            width: 100%;
+          thead th {
+            vertical-align: center;
             padding: $default-padding;
-            font-size: 0.9em;
-            border-collapse: collapse;
+            border-bottom: 2px solid var(--card-border-color);
+          }
 
-            thead th {
-              vertical-align: center;
+          tbody {
+            font-size: 0.95em;
+            td {
               padding: $default-padding;
-              border-bottom: 2px solid var(--card-border-color);
+              border-bottom: 1px solid var(--card-border-color);
+            }
+            tr:last-child td {
+              border: none;
+            }
+          }
+
+          .sport-col {
+            padding-right: 0;
+          }
+
+          .workout-title {
+            max-width: 90px;
+            position: relative;
+
+            .fa-map-o {
+              font-size: 0.75em;
+            }
+
+            .static-map {
+              display: none;
+            }
+          }
+
+          .workout-title:hover .static-map {
+            display: block;
+          }
+
+          .cell-heading {
+            background: var(--cell-heading-bg-color);
+            color: var(--cell-heading-color);
+            display: none;
+            font-size: 10px;
+            font-weight: bold;
+            padding: 5px;
+            position: absolute;
+            text-transform: uppercase;
+            top: 0;
+            left: 0;
+          }
+
+          .sport-img {
+            height: 20px;
+            width: 20px;
+          }
+        }
+
+        @media screen and (max-width: $small-limit) {
+          table {
+            thead {
+              left: -9999px;
+              position: absolute;
+              visibility: hidden;
+            }
+
+            tr {
+              border-bottom: 0;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: wrap;
+              margin-bottom: 40px;
+            }
+
+            td {
+              border: 1px solid var(--card-border-color);
+              margin: 0 -1px -1px 0;
+              padding-top: 25px !important;
+              position: relative;
+              text-align: center;
+              width: 45%;
             }
 
             tbody {
-              font-size: 0.95em;
-              td {
-                padding: $default-padding;
-                border-bottom: 1px solid var(--card-border-color);
-              }
               tr:last-child td {
-                border: none;
+                border: 1px solid var(--card-border-color);
               }
             }
 
             .sport-col {
-              padding-right: 0;
+              display: flex;
+              justify-content: center;
+              padding: $default-padding;
             }
-
-            .workout-title {
-              max-width: 90px;
-              position: relative;
-
-              .fa-map-o {
-                font-size: 0.75em;
-              }
-
-              .static-map {
-                display: none;
-              }
-            }
-
-            .workout-title:hover .static-map {
-              display: block;
-            }
-
             .cell-heading {
-              background: var(--cell-heading-bg-color);
-              color: var(--cell-heading-color);
-              display: none;
-              font-size: 10px;
-              font-weight: bold;
-              padding: 5px;
-              position: absolute;
-              text-transform: uppercase;
-              top: 0;
-              left: 0;
+              display: flex;
             }
-
-            .sport-img {
-              height: 20px;
-              width: 20px;
+            .workout-title {
+              max-width: initial;
             }
           }
-
-          @media screen and (max-width: $small-limit) {
-            table {
-              thead {
-                left: -9999px;
-                position: absolute;
-                visibility: hidden;
-              }
-
-              tr {
-                border-bottom: 0;
-                display: flex;
-                flex-direction: row;
-                flex-wrap: wrap;
-                margin-bottom: 40px;
-              }
-
-              td {
-                border: 1px solid var(--card-border-color);
-                margin: 0 -1px -1px 0;
-                padding-top: 25px !important;
-                position: relative;
-                text-align: center;
-                width: 45%;
-              }
-
-              tbody {
-                tr:last-child td {
-                  border: 1px solid var(--card-border-color);
-                }
-              }
-
-              .sport-col {
-                display: flex;
-                justify-content: center;
-                padding: $default-padding;
-              }
-              .cell-heading {
-                display: flex;
-              }
-              .workout-title {
-                max-width: initial;
-              }
-            }
-          }
-          @media screen and (max-width: $x-small-limit) {
-            table {
-              td {
-                width: 100%;
-              }
+        }
+        @media screen and (max-width: $x-small-limit) {
+          table {
+            td {
+              width: 100%;
             }
           }
         }
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
index 4d586a27..936c6b7b 100644
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@@ -86,6 +86,13 @@ button {
 
 }
 
+.box {
+  border: solid 1px var(--card-border-color);
+  border-radius: $border-radius;
+  padding: $default-padding;
+  margin: $default-margin;
+}
+
 .container {
   display: flex;
   margin-left: auto;
diff --git a/fittrackee_client/src/views/DashBoard.vue b/fittrackee_client/src/views/DashBoard.vue
index 359e5b0e..fc67bff5 100644
--- a/fittrackee_client/src/views/DashBoard.vue
+++ b/fittrackee_client/src/views/DashBoard.vue
@@ -1,38 +1,36 @@
 <template>
   <div id="dashboard" v-if="authUser.username && sports.length > 0">
     <div class="container mobile-menu">
-      <Card :without-title="true">
-        <template #content>
-          <button
-            class="mobile-menu-item"
-            :class="{ 'is-selected': isSelected === 'chart' }"
-            @click="updateDisplayColumn('chart')"
-          >
-            <i class="fa fa-bar-chart" aria-hidden="true" />
-          </button>
-          <button
-            class="mobile-menu-item"
-            :class="{ 'is-selected': isSelected === 'calendar' }"
-            @click="updateDisplayColumn('calendar')"
-          >
-            <i class="fa fa-calendar" aria-hidden="true" />
-          </button>
-          <button
-            class="mobile-menu-item"
-            :class="{ 'is-selected': isSelected === 'timeline' }"
-            @click="updateDisplayColumn('timeline')"
-          >
-            <i class="fa fa-map-o" aria-hidden="true" />
-          </button>
-          <button
-            class="mobile-menu-item"
-            :class="{ 'is-selected': isSelected === 'records' }"
-            @click="updateDisplayColumn('records')"
-          >
-            <i class="fa fa-trophy" aria-hidden="true" />
-          </button>
-        </template>
-      </Card>
+      <div class="box">
+        <div
+          class="mobile-menu-item"
+          :class="{ 'is-selected': isSelected === 'chart' }"
+          @click="updateDisplayColumn('chart')"
+        >
+          <i class="fa fa-bar-chart" aria-hidden="true" />
+        </div>
+        <div
+          class="mobile-menu-item"
+          :class="{ 'is-selected': isSelected === 'calendar' }"
+          @click="updateDisplayColumn('calendar')"
+        >
+          <i class="fa fa-calendar" aria-hidden="true" />
+        </div>
+        <div
+          class="mobile-menu-item"
+          :class="{ 'is-selected': isSelected === 'timeline' }"
+          @click="updateDisplayColumn('timeline')"
+        >
+          <i class="fa fa-map-o" aria-hidden="true" />
+        </div>
+        <div
+          class="mobile-menu-item"
+          :class="{ 'is-selected': isSelected === 'records' }"
+          @click="updateDisplayColumn('records')"
+        >
+          <i class="fa fa-trophy" aria-hidden="true" />
+        </div>
+      </div>
     </div>
     <div class="container">
       <UserStatsCards :user="authUser" />
@@ -77,7 +75,6 @@
     onUnmounted,
   } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
   import Timeline from '@/components/Dashboard/Timeline/index.vue'
   import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
   import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
@@ -91,7 +88,6 @@
   export default defineComponent({
     name: 'Dashboard',
     components: {
-      Card,
       Timeline,
       UserCalendar,
       UserMonthStats,
@@ -161,30 +157,31 @@
       }
       .mobile-menu {
         display: flex;
-        ::v-deep(.card) {
+        .box {
+          display: flex;
+          justify-content: space-between;
+          padding: 0;
           width: 100%;
-          .card-content {
-            display: flex;
-            justify-content: space-between;
-            padding: 0;
-            .mobile-menu-item {
-              display: flex;
-              justify-content: space-around;
-              border: none;
-              box-shadow: none;
-              padding: $default-padding;
-              width: 25%;
 
+          .mobile-menu-item {
+            display: flex;
+            justify-content: space-around;
+            border: none;
+            border-radius: $border-radius;
+            box-shadow: none;
+            font-size: 0.95em;
+            padding: $default-padding;
+            width: 25%;
+
+            .fa-trophy {
+              color: var(--app-color);
+            }
+            &.is-selected {
               .fa-trophy {
-                color: var(--app-color);
-              }
-              &.is-selected {
-                .fa-trophy {
-                  color: var(--mobile-menu-selected-color);
-                }
                 color: var(--mobile-menu-selected-color);
-                background-color: var(--mobile-menu-selected-bgcolor);
               }
+              color: var(--mobile-menu-selected-color);
+              background-color: var(--mobile-menu-selected-bgcolor);
             }
           }
         }