Merge branch 'dev' into improve-ui

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue

@@ -131,6 +131,7 @@
 
     .workout-arrow {
       cursor: pointer;
+      padding: $default-padding;
       &.inactive {
         color: var(--disabled-color);
         cursor: default;
@@ -168,12 +169,19 @@
         cursor: pointer;
         padding: 0 $default-padding * 0.3;
       }
+    }
 
-      @media screen and (max-width: $small-limit) {
-        .fa-download,
-        .fa-trash,
-        .fa-edit {
-          padding: 0 $default-padding * 0.7;
+    @media screen and (max-width: $small-limit) {
+      .workout-arrow {
+        padding: $default-padding * 0.5;
+      }
+      .workout-card-title {
+        @media screen and (max-width: $small-limit) {
+          .fa-download,
+          .fa-trash,
+          .fa-edit {
+            padding: 0 $default-padding * 0.7;
+          }
         }
       }
     }

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -184,6 +184,9 @@
     display: flex;
     ::v-deep(.card) {
       width: 100%;
+      .card-title {
+        padding: $default-padding $default-padding * 1.5;
+      }
       .card-content {
         display: flex;
         flex-direction: row;

fittrackee_client/src/scss/base.scss

@@ -4,6 +4,28 @@
 
 body {
   margin: 0;
+  overflow-y: scroll;
+  scrollbar-gutter: stable both-edges;
+
+  &::-webkit-scrollbar {
+    width: $scrollbar-width;
+    height: $scrollbar-height;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: $scrollbar-radius;
+  }
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background: var(--scroll-thumb-color);
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
 }
 
 #app {

fittrackee_client/src/scss/colors.scss

@@ -76,4 +76,6 @@
   --password-color-good: #acc578;
   --password-color-strong: #57c255;
 
+  --scroll-thumb-color: #b9bcbd;
+
 }

fittrackee_client/src/scss/vars.scss

@@ -19,3 +19,10 @@ $default-padding: 10px;
 $default-margin: $default-padding;
 
 $border-radius: 4px;
+
+/*
+* === SCROLLBAR ===
+*/
+$scrollbar-height : $default-padding * .5;
+$scrollbar-width : $scrollbar-height;
+$scrollbar-radius : $default-padding;