style: 💄 fix css issues

doroudi · Mar 29, 2024 · c33dc57 · c33dc57
1 parent a3891e9
commit c33dc57
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="apple-touch-icon" href="/pwa-192x192.png">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
+  <meta rel="description" content="Free Vue3 Dashboard - Modern Admin Panel for Vuejs build using Naive UI. free to use and open source" />
   <meta name="msapplication-TileColor" content="#00aba9">
   <script>
     (function () {
@@ -26,6 +27,7 @@
 
     gtag('config', 'G-9Q4R8ZVVQH')
   </script>
+
 </head>
 
 <body class="font-sans">

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
+    "vue-github-button": "^3.1.0",
     "vue-i18n": "^9.10.2",
     "vue-router": "^4.3.0",
     "vue3-apexcharts": "^1.5.2"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -7,6 +7,7 @@ import { tableRtl } from 'naive-ui/es/table/styles'
 import scrollbarRtl from 'naive-ui/es/_internal/scrollbar/styles/rtl'
 import { tagRtl } from 'naive-ui/es/tag/styles'
 import { darkTheme, lightTheme } from 'naive-ui'
+
 import themeOverrides from '~/common/theme/theme-overrides'
 
 const layout = useLayoutStore()
@@ -53,7 +54,10 @@ watch(() => layout.activeLanguage, () => {
 </script>
 
 <template>
-  <n-config-provider :theme="isDark ? darkTheme : lightTheme" :theme-overrides="themeOverrides" :rtl="layout.isRtl ? rtlStyles : []" :preflight-style-disabled="false">
+  <n-config-provider
+    :theme="isDark ? darkTheme : lightTheme" :theme-overrides="themeOverrides"
+    :rtl="layout.isRtl ? rtlStyles : []" :preflight-style-disabled="false"
+  >
     <n-notification-provider placement="bottom-right">
       <n-message-provider placement="bottom-right">
         <n-dialog-provider>

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -34,6 +34,7 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDynamicTags: typeof import('naive-ui')['NDynamicTags']
+    NFloatButton: typeof import('naive-ui')['NFloatButton']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -4,6 +4,7 @@ import {
   PanelLeftContract16Regular as CollapseIcon,
   PanelLeftExpand20Regular as OpenIcon,
 } from '@vicons/fluent'
+import GithubButton from 'vue-github-button'
 
 const layoutStore = useLayoutStore()
 const { collapsed } = storeToRefs(layoutStore)
@@ -23,12 +24,19 @@ const { collapsed } = storeToRefs(layoutStore)
     </template>
     <template #extra>
       <div class="flex items-center">
-        <div class="mx-2">
-          <ThemeSwitch class="mr-2" />
-          <LanguageSelect />
-        </div>
-
-        <UserProfile />
+        <ThemeSwitch mx-2 />
+
+        <!-- Place this tag where you want the button to render. -->
+        <GithubButton
+          href="https://github.com/doroudi/YummyAdmin"
+          class="mx-1 mt-1"
+          data-color-scheme="no-preference: dark; light: light; dark: dark;" data-size="large"
+          aria-label="Star doroudi/YummyAdmin on GitHub"
+        >
+          GitHub
+        </GithubButton>
+        <LanguageSelect mx-2 />
+        <UserProfile mx-2 />
       </div>
     </template>
   </n-page-header>
@@ -39,30 +47,4 @@ const { collapsed } = storeToRefs(layoutStore)
   border-bottom: solid 1px #ececec;
   padding-bottom: 0.4rem;
 }
-
-.p-togglebutton.p-button {
-  background-color: transparent;
-  border: none;
-  color: #333;
-  box-shadow: none;
-
-  &.p-highlight {
-    background-color: transparent;
-    border: none;
-
-    .p-button-icon-left,
-    .p-togglebutton.p-button.p-highlight .p-button-icon-right {
-      color: var(--surface-600);
-    }
-
-    &:hover {
-      background-color: transparent;
-
-      .p-button-icon-left,
-      .p-togglebutton.p-button.p-highlight .p-button-icon-right {
-        color: var(--surface-600);
-      }
-    }
-  }
-}
 </style>
diff --git a/src/components/ThemeSwitch.vue b/src/components/ThemeSwitch.vue
@@ -8,7 +8,7 @@ const layoutStore = useLayoutStore()
 </script>
 
 <template>
-  <n-button text circle @click="layoutStore.toggleTheme()">
+  <n-button text @click="layoutStore.toggleTheme()">
     <template #icon>
       <NIcon size="1.4rem">
         <SunIcon v-if="isDark" />