Profile -> Calendar: fix event position/color/ size. Fix current date color.

Profile -> Files: add divider, add text capitalize, fix text position;

Author: Blari

src/pages/User/Profile/Profile.scss

@@ -89,6 +89,19 @@
           color: $grey-medium;
         }
       }
+
+      .v-btn.v-date-picker-table__current.v-btn--active {
+        height: 28px;
+        width: 28px;
+      }
+
+      .v-date-picker-table__events {
+        top: -6px;
+        & > div {
+          height: 6px;
+          width: 6px;
+        }
+      }
     }
     .v-date-picker-header__value {
       button {
@@ -153,24 +166,9 @@
 
     }
   }
-  .v-image {
-    position: relative;
-    p {
-      position: absolute;
-      left: 5px;
-      color: white;
-      font-weight: 600;
-      &.folder-title {
-        font-size: 18px;
-        bottom: 15px;
 
-      }
-      &.folder-subtitle-1 {
-        bottom: -5px;
-        font-size: 13px;
-      }
-    }
-  }
+
+
   .view-card {
     .views-value {
       font-size: 1.5rem;
@@ -199,6 +197,23 @@
 
   }
   .folder-card {
+    .v-image {
+      position: relative;
+      p {
+        position: absolute;
+        left: 8px;
+        color: white;
+        font-weight: 600;
+        &.folder-title {
+          font-size: 18px;
+          bottom: 10px;
+        }
+        &.folder-subtitle-1 {
+          bottom: -10px;
+          font-size: 13px;
+        }
+      }
+    }
     .theme--dark.v-tabs > .v-tabs-bar {
       background-color: transparent;
       .v-tab--active {

src/pages/User/Profile/Profile.vue

@@ -174,18 +174,21 @@
                     <v-tabs-slider></v-tabs-slider>
                     <v-tab
                         v-for="(tab, i) in mock.tabs"
+                        class="text-capitalize font-weight-regular"
                         :key="i"
                         :href="'#tab-' + tab.tabName.toLocaleLowerCase()"
                      >
                       {{ tab.tabName }}
                     </v-tab>
+
                     <v-tab-item
                       v-for="(tab, i) in mock.tabs"
                       :key="i"
                       :value="'tab-' + tab.tabName.toLocaleLowerCase()"
-                      class="pt-1 pb-0 pb-sm-3 pb-lg-0"
+                      class="pb-0 pb-sm-3 pb-lg-0"
                     >
-                      <v-row justify-xl="space-around" justify="start"  class="d-flex flex-nowrap overflow-x-auto pa-4">
+                      <v-divider></v-divider>
+                      <v-row justify-xl="space-around" justify="start"  class="d-flex flex-nowrap overflow-x-auto pa-4 pt-5">
                         <div
                            v-for="(img, i) in mock.images"
                            :key="i">
@@ -195,7 +198,7 @@
                             class="folder-image mr-3"
                           >
                             <p class="folder-title"> {{ img.title }} </p>
-                            <p class="folder-subtitle-1"> {{img.subtitle}} </p>
+                            <p class="folder-subtitle-1 font-weight-medium"> {{img.subtitle}} </p>
                           </v-img>
                         </div>
                       </v-row>
@@ -232,7 +235,6 @@
                   <v-row no-gutters>
                     <v-tabs color="secondary">
                       <v-tabs-slider></v-tabs-slider>
-
                       <v-tab
                         v-for="(tab, i) in mock.taskTabs"
                         :key="i"
@@ -350,8 +352,8 @@
                     <v-col>
                       <v-date-picker
                         v-model="picker"
-                        :events="arrayEvents"
-                        :event-color="date => date[9] % 2 ? 'primary' : 'warning'"
+                        :events="dateFunctionEvents"
+                        color="primary"
                         full-width
                         flat
                         no-title
@@ -514,16 +516,16 @@ export default {
     next () {
       this.$refs.calendar.next()
     },
+    dateFunctionEvents (date) {
+      const [,, day] = date.split('-')
+      if ([12, 17, 28].includes(parseInt(day, 10))) return true
+      if ([1, 19, 22].includes(parseInt(day, 10))) return ['primary']
+      return false
+    },
   },
   mounted() {
     setTimeout(() => {
       this.apexLoading = true
-    }),
-    this.arrayEvents = [...Array(6)].map(() => {
-      const day = Math.floor(Math.random() * 30)
-      const d = new Date()
-      d.setDate(day)
-      return d.toISOString().substr(0, 10)
     })
   }
 }

src/styles/_variables.scss

@@ -48,4 +48,3 @@ $card-shadow: 0 3px 11px 0 #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9
 
 // Buttons //
 $button-shadow: 0px 3px 11px 0px #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A;
-