refactor(multi): refactored table styles and layouts

Author: DeepKumbhare85

typescript-version/src/@core/scss/template/libs/vuetify/_overrides.scss

@@ -153,11 +153,6 @@ $alert-prepend-icon-font-size: 1.125rem !important;
   color: variables.$slider-thumb-label-color;
 }
 
-// 👉 Table
-.v-table th {
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
-}
-
 // 👉 VTimeline
 .v-timeline {
   .v-timeline-item:not(:last-child) {
@@ -166,3 +161,18 @@ $alert-prepend-icon-font-size: 1.125rem !important;
     }
   }
 }
+
+.v-data-table {
+  th {
+    background: rgb(var(--v-table-header-background)) !important;
+    font-size: 0.75rem;
+    font-weight: 500 !important;
+    letter-spacing: 0.17px !important;
+    text-transform: uppercase !important;
+
+    .v-data-table-header__content {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}

typescript-version/src/components/UpgradeToPro.vue

@@ -2,7 +2,7 @@
   <VBtn
     color="error"
     class="product-upgrade-to-pro"
-    href="https://themeselection.com/item/master-vuetify-vuejs-admin-template/"
+    href="https://themeselection.com/item/sneat-vuetify-vuejs-admin-template/"
     target="_blank"
     rel="noopener noreferrer"
   >
@@ -17,7 +17,7 @@
       transition="slide-y-reverse-transition"
     >
       <VCard>
-        <VImg src="https://cdn.jsdelivr.net/gh/themeselection/ts-assets/master/master-vuetify-vuejs-admin-template/banner/banner.png" />
+        <VImg src="https://cdn.jsdelivr.net/gh/themeselection/ts-assets/sneat/sneat-vuetify-vuejs-admin-template/banner/banner.png" />
         <VCardTitle>Master - Vuetify Admin Template</VCardTitle>
         <VCardText>
           Master Admin is the most developer friendly & highly customisable Admin Dashboard Template based on Vuetify.
@@ -26,15 +26,15 @@
         <VCardText>
           <VBtn
             class="me-4"
-            href="https://themeselection.com/item/master-vuetify-vuejs-admin-template/?tab=details#details"
+            href="https://themeselection.com/item/sneat-vuetify-vuejs-admin-template/?tab=details#details"
             target="_blank"
             rel="noopener noreferrer"
           >
             Demo
           </VBtn>
           <VBtn
             variant="outlined"
-            href="https://themeselection.com/item/master-vuetify-vuejs-admin-template/"
+            href="https://themeselection.com/item/sneat-vuetify-vuejs-admin-template/"
             target="_blank"
             rel="noopener noreferrer"
           >

typescript-version/src/layouts/components/DefaultLayoutWithVerticalNav.vue

@@ -161,7 +161,7 @@ const upgradeBanner = computed(() => {
     <template #after-vertical-nav-items>
       <!-- 👉 illustration -->
       <a
-        href="https://themeselection.com/item/materio-vuetify-vuejs-admin-template"
+        href="https://themeselection.com/item/sneat-vuetify-vuejs-admin-template"
         target="_blank"
         rel="noopener noreferrer"
         style="margin-left: 7px;"

typescript-version/src/layouts/components/Footer.vue

@@ -29,7 +29,7 @@
         target="noopener noreferrer"
       >More Themes</a>
       <a
-        href="https://demos.themeselection.com/master-vuetify-vuejs-admin-template/documentation/"
+        href="https://demos.themeselection.com/sneat-vuetify-vuejs-admin-template/documentation/"
         target="noopener noreferrer"
       >Documentation</a>
     </span>

typescript-version/src/plugins/vuetify/theme.ts

@@ -46,6 +46,7 @@ const theme: VuetifyOptions['theme'] = {
         'snackbar-color': '#ffffff',
         'tooltip-background': '#262732',
         'tooltip-opacity': 0.9,
+        'table-header-background': '#F5F5F7',
 
         // Shadows
         'shadow-key-umbra-opacity': 'rgba(var(--v-theme-on-surface), 0.06)',
@@ -94,6 +95,7 @@ const theme: VuetifyOptions['theme'] = {
         'snackbar-color': '#2B2C40',
         'tooltip-background': '#464A65',
         'tooltip-opacity': 0.9,
+        'table-header-background': '#3A3E5B',
 
         // Shadows
         'shadow-key-umbra-opacity': 'rgba(20, 21, 33, 0.06)',

typescript-version/src/views/pages/account-settings/AccountSettingsSecurity.vue

@@ -96,7 +96,7 @@ const recentDevices = [
         <VForm>
           <VCardText>
             <!-- 👉 Current Password -->
-            <VRow class="mb-3">
+            <VRow>
               <VCol
                 cols="12"
                 md="6"
@@ -308,7 +308,7 @@ const recentDevices = [
         <VDataTable
           :headers="recentDevicesHeaders"
           :items="recentDevices"
-          class="text-no-wrap"
+          class="text-no-wrap rounded-0 text-sm"
         >
           <template #item.browser="{ item }">
             <div class="d-flex">
@@ -317,7 +317,7 @@ const recentDevices = [
                 :icon="item.raw.deviceIcon.icon"
                 :color="item.raw.deviceIcon.color"
               />
-              <span>
+              <span class="text-high-emphasis text-base">
                 {{ item.raw.browser }}
               </span>
             </div>

typescript-version/src/views/pages/cards/card-basic/CardBasic.vue

@@ -75,7 +75,7 @@ const isCardDetailsVisible = ref(false)
           </div>
 
           <!--  Mutual Friends -->
-          <div class="d-flex justify-space-between align-center mt-8">
+          <div class="d-flex justify-space-between align-center mt-4">
             <span class="font-weight-medium">18 mutual friends</span>
 
             <div class="v-avatar-group">
@@ -98,31 +98,29 @@ const isCardDetailsVisible = ref(false)
       sm="6"
     >
       <VCard>
-        <VImg :src="pages3" />
+        <VImg
+          :src="pages3"
+          cover
+          max-height="280"
+        />
 
         <VCardItem>
           <VCardTitle>Popular Uses Of The Internet</VCardTitle>
         </VCardItem>
 
         <VCardText>
-          Although cards can support multiple actions, UI controls, and an overflow menu.
-        </VCardText>
-
-        <VCardActions>
-          <VBtn @click="isCardDetailsVisible = !isCardDetailsVisible">
-            Details
-          </VBtn>
-
-          <VSpacer />
+          <div class="mb-4">
+            Although cards can support multiple actions, UI controls, and an overflow menu.
+          </div>
 
           <VBtn
-            icon
-            size="small"
+            variant="text"
+            density="comfortable"
             @click="isCardDetailsVisible = !isCardDetailsVisible"
           >
-            <VIcon :icon="isCardDetailsVisible ? 'bx-chevron-up' : 'bx-chevron-down'" />
+            Details
           </VBtn>
-        </VCardActions>
+        </VCardText>
 
         <VExpandTransition>
           <div v-show="isCardDetailsVisible">
@@ -397,11 +395,13 @@ const isCardDetailsVisible = ref(false)
         </VCardText>
 
         <VCardText>
-          If you are looking for a new way to promote your business that won't cost you more money, maybe printing is one of the options you won't resist.
-        </VCardText>
+          <p>
+            If you are looking for a new way to promote your business that won't cost you more money, maybe printing is one of the options you won't resist.
+          </p>
 
-        <VCardText>
-          become fast, easy and simple. If you want your promotional material to be an eye-catching
+          <p class="mb-0">
+            become fast, easy and simple. If you want your promotional material to be an eye-catching
+          </p>
         </VCardText>
 
         <VCardActions>
@@ -441,12 +441,11 @@ const isCardDetailsVisible = ref(false)
             According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.
           </p>
         </VCardText>
-
-        <VCardActions class="justify-center">
+        <VCardText>
           <VBtn variant="elevated">
             Contact Now
           </VBtn>
-        </VCardActions>
+        </VCardText>
       </VCard>
     </VCol>
   </VRow>