refactor: refactor some code

src/components/appbar/AppBar.vue

@@ -7,7 +7,7 @@
       </v-toolbar-title>
       <v-spacer/>
 
-      <v-btn to="/login" class="bg-blue-darken-1 mx-5">
+      <v-btn variant="elevated" elevation="1" to="/login" color="paletteBlue mx-5">
         <strong>GET STARTED</strong>
       </v-btn>
     </v-app-bar>

src/components/signup/Signup.vue

@@ -1,5 +1,5 @@
 <template>
-  <h2 class="text-center text-decoration-underline">Sign Up for an Account</h2>
+  <h2 class="text-center text-decoration-underline">Sign up for an account</h2>
   <v-row align="center" justify="center" class="text-center" no-gutters>
     <v-col cols="12" sm="6">
       <v-form v-model="formValid" fast-fail @submit.prevent="handleSignup">
@@ -24,11 +24,11 @@
               v-model="user.confirmPassword" :rules="confirmPasswordRule"
               :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" required />
           </v-col>
-          <v-row no-gutters>
-            <v-col cols="12">
-              <v-checkbox color="success" label="I agree to site terms and conditions" />
+        </v-row>
+        <v-row no-gutters class="text-center" justify="center">
+            <v-col cols="12" class="text-center">
+              <v-checkbox class="text-center" color="success" label="I agree to site terms and conditions" />
             </v-col>
-          </v-row>
         </v-row>
         <v-btn type="submit" color="blue" elevation="6" class="mt-5" tile>Sign up</v-btn>
       </v-form>

src/pages/dashboard/Dashboard.scss

@@ -1,6 +1,5 @@
 .profileImage {
-  border: 1px solid #000;
-  width: 80%;
+  width: 200px;
 }
 
 .stat-card {

src/pages/dashboard/Dashboard.vue

@@ -203,7 +203,7 @@
                 </template>
               </v-text-field>
             </v-col>
-            <v-col cols="12" md="6" class="mt-5">
+            <v-col cols="12" md="6">
               <pie-chart
                   :series="Object.values(this.exercisesOccurences)"
                   :labels="exercisesLabels"
@@ -312,14 +312,14 @@
       </v-card>
     </v-col>
     <v-col cols="12" md="6">
-      <v-card variant="text" elevation="10">
+      <v-card variant="text" elevation="10" class="fill-height">
         <v-card-title class="text-center">
           <h2><i>Stats</i></h2>
         </v-card-title>
-        <v-card-text class="mt-14">
-          <v-row justify="center">
-            <v-col v-for="(stat, index) in stats" :key="index">
-              <v-card variant="elevated" elevation="10" width="150" height="130" class="stat-card" :color="stat.color">
+        <v-card-text class="mt-14 text-center">
+          <v-row class="text-center" align="center" justify="center" dense>
+            <v-col v-for="(stat, index) in stats" :key="index" class="d-flex flex-column justify-center align-center">
+              <v-card variant="elevated" elevation="10" width="150" height="130" class="stat-card text-center" :color="stat.color">
                 <v-card-title class="stat-title">{{ stat.title }}</v-card-title>
                 <v-divider color="black"/>
                 <v-card-text class="stat-value">{{ stat.value }}</v-card-text>
@@ -365,7 +365,7 @@ export default {
         bio: '',
         profilePic: '',
       },
-      profilePicPath: null,
+      profilePicPath: require('@/assets/img/default_profile_pic.png'),
       improvement: {
         timeStamp: null,
         bodyWeight: null,
@@ -375,7 +375,7 @@ export default {
         quadriceps: null
       },
       stats: [
-        {title: 'Workouts', value: 10, color: 'cyan'},
+        {title: 'Workouts', value: 5, color: 'cyan'},
         {title: 'Messages', value: 6, color: 'orange'},
         {title: 'Notifications', value: 2, color: 'green'},
       ],
@@ -423,7 +423,10 @@ export default {
           res => {
             if (res != null) {
               this.user = res
-              this.profilePicPath = process.env.VUE_APP_BASE_URL + this.user.profilePic
+              if(this.user.profilePic) {
+                console.log(this.user.profilePic)
+                this.profilePicPath = process.env.VUE_APP_BASE_URL + this.user.profilePic
+              }
             }
           })
     },

src/pages/home/HomePage.scss

@@ -2,22 +2,31 @@
   padding-top: 70pt;
   align-items: center;
   justify-content: center;
+  @media screen and (max-width: 767px) {
+    padding-top: 40pt;
+  }
 }
 
 .title {
   font-size: 80px;
   font-style: italic;
   text-align: center;
+  @media screen and (max-width: 767px) {
+    font-size: 60px;
+  }
 }
 
 .last-char {
   color: #127cd2
 }
 
 .subtitle {
-  font-size: 40px;
+  font-size: 45px;
   font-style: italic;
   text-align: center;
+  @media screen and (max-width: 767px) {
+    font-size: 30px;
+  }
 }
 
 .image-container {
@@ -29,6 +38,9 @@
 .background-image {
   max-width: 35%;
   animation: slideX 1s ease-in-out forwards;
+  @media screen and (max-width: 767px) {
+    max-width: 60%;
+  }
 }
 
 .up {

src/pages/home/HomePage.vue

@@ -25,7 +25,10 @@
         <v-col cols="12" md="5" class="text-center">
           <div class="image-container mt-10">
             <v-scroll-x-transition>
-              <img src="@/assets/img/home_backgrounds/standing_man_weights.jpg" class="background-image" alt="athletx home page image">
+              <img src="@/assets/img/home_backgrounds/standing_man_weights.jpg"
+                   class="background-image"
+                   alt="athletx home page image"
+                  >
             </v-scroll-x-transition>
           </div>
         </v-col>
@@ -46,7 +49,7 @@
                       max-width="80px"
                       class="d-block ml-auto mr-auto mt-5"
                   ></v-img>
-                  <v-card-title><h4>{{ feature.title }}</h4></v-card-title>
+                  <v-card-title class="text-wrap"><h4>{{ feature.title }}</h4></v-card-title>
                   <v-card-text>
                     {{ feature.text }}
                   </v-card-text>

src/pages/profile/Profile.scss

@@ -1,4 +1,3 @@
 .profileImage {
-    border: 1px solid #000;
-    width: 80%;
+    width: 150px;
   }