From 5340dd9c3ac0e0e050638e4459c7571ea2bc842c Mon Sep 17 00:00:00 2001
From: Yue JIN <yjin@nustarnuclear.com>
Date: Thu, 28 Sep 2023 18:06:59 +0800
Subject: [PATCH] style: apply md3 blueprint

---
 src/assets/styles/_global.scss            |  4 ++++
 src/components/layout/AppDrawer.vue       | 24 +++++++++++++++++------
 src/components/layout/AppNotification.vue |  1 +
 src/components/layout/ButtonSettings.vue  |  1 +
 src/pages/dashboard.vue                   |  2 +-
 src/plugins/vuetify.ts                    | 13 ++++++++++++
 6 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/assets/styles/_global.scss b/src/assets/styles/_global.scss
index 8fc9622..576234e 100644
--- a/src/assets/styles/_global.scss
+++ b/src/assets/styles/_global.scss
@@ -18,3 +18,7 @@ html {
 .v-overlay__content > .v-card {
   overflow-y: overlay !important;
 }
+
+.v-btn {
+  text-transform: initial;
+}
diff --git a/src/components/layout/AppDrawer.vue b/src/components/layout/AppDrawer.vue
index 86800c2..51ba20d 100644
--- a/src/components/layout/AppDrawer.vue
+++ b/src/components/layout/AppDrawer.vue
@@ -21,7 +21,7 @@ const rail = computed(() => !drawerStored.value && !mobile.value)
 const gradient = computed(() =>
   useTheme().current.value.dark
     ? 'to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, .7)'
-    : 'to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .7)',
+    : 'to bottom, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, .8) 80%, rgba(255, 255, 255, 1) 100%',
 )
 routes.sort((a, b) => (a.meta?.drawerIndex ?? 99) - (b.meta?.drawerIndex ?? 98))
 
@@ -57,7 +57,10 @@ nextTick(() => {
               color="primary"
             />
           </template>
-          <v-list-item-title class="text-h5" style="line-height: 2rem">
+          <v-list-item-title
+            class="text-h5 font-weight-bold"
+            style="line-height: 2rem"
+          >
             Vitify <span class="text-primary">Admin</span>
           </v-list-item-title>
         </v-list-item>
@@ -70,18 +73,18 @@ nextTick(() => {
     <v-spacer />
     <template #append>
       <v-list-item class="drawer-footer px-0 d-flex flex-column justify-center">
-        <div class="text-body-2 font-weight-light pt-6 pt-md-0 text-center">
+        <div class="text-caption pt-6 pt-md-0 text-center">
           &copy; Copyright 2023
           <a
             href="https://github.com/kingyue737"
-            class="font-weight-regular"
+            class="font-weight-bold"
             target="_blank"
             >Yue JIN</a
           >
           <span> & </span>
           <a
             href="https://www.nustarnuclear.com/"
-            class="font-weight-regular"
+            class="font-weight-bold"
             target="_blank"
             >NuStar</a
           >
@@ -93,9 +96,18 @@ nextTick(() => {
 
 <style lang="scss">
 .v-navigation-drawer {
+  transition-property: box-shadow, transform, visibility, width, height, left,
+    right, top, bottom, border-radius !important;
+  overflow: hidden;
   &.v-navigation-drawer--rail {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
     &.v-navigation-drawer--is-hovering {
-      box-shadow: 0px 0px 6px 2px rgba(100, 100, 100, 0.6);
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
+      box-shadow:
+        0px 1px 2px 0px rgb(0 0 0 / 30%),
+        0px 1px 3px 1px rgb(0 0 0 / 15%);
     }
     &:not(.v-navigation-drawer--is-hovering) {
       .drawer-footer {
diff --git a/src/components/layout/AppNotification.vue b/src/components/layout/AppNotification.vue
index ebfa040..af92bbf 100644
--- a/src/components/layout/AppNotification.vue
+++ b/src/components/layout/AppNotification.vue
@@ -31,6 +31,7 @@ function toggleAll() {
       <v-btn
         size="x-small"
         variant="flat"
+        color=""
         :icon="
           notifications.length ? 'mdi-bell-badge-outline' : 'mdi-bell-outline'
         "
diff --git a/src/components/layout/ButtonSettings.vue b/src/components/layout/ButtonSettings.vue
index 52df404..e2514a4 100644
--- a/src/components/layout/ButtonSettings.vue
+++ b/src/components/layout/ButtonSettings.vue
@@ -52,6 +52,7 @@ const toggleDark = useToggle(isDark)
           <v-btn
             size="x-small"
             variant="flat"
+            color=""
             icon="mdi-palette-outline"
             v-bind="mergeProps(menu, tooltip)"
             :rounded="0"
diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index e1fac2d..c076eda 100644
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -105,6 +105,6 @@ const stats = ref([
 
 <style scoped lang="scss">
 .v-card:not(.stats-card) {
-  height: 350px;
+  height: 340px;
 }
 </style>
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 7a09c2a..fd5eeff 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -5,6 +5,7 @@ import { VDataTable } from 'vuetify/labs/VDataTable'
 import { en, zhHans } from 'vuetify/locale'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 import { useDark } from '@vueuse/core'
+import { md3 } from 'vuetify/blueprints'
 
 type UnwrapReadonlyArrayType<A> = A extends Readonly<Array<infer I>>
   ? UnwrapReadonlyArrayType<I>
@@ -41,6 +42,7 @@ const theme = {
 }
 
 export default createVuetify({
+  blueprint: md3,
   components: { VDataTable },
   locale: {
     locale: 'zhHans',
@@ -55,6 +57,17 @@ export default createVuetify({
       fixedHeader: true,
       hover: true,
     },
+    VCard: {
+      flat: true,
+    },
+    VNavigationDrawer: {
+      VList: {
+        nav: true,
+        VListItem: {
+          rounded: 'xl',
+        },
+      },
+    },
   },
   theme: {
     defaultTheme: useDark().value ? 'dark' : 'light',