From c01acb7aa32a4ac4506b1471cd50cc4092c26995 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 21:34:35 +0800
Subject: [PATCH] fix: dropdown color

---
 components/common/dropdown/Dropdown.vue |  2 +-
 nuxt.config.ts                          |  2 ++
 plugins/floating-vue.ts                 |  1 -
 styles/dropdown.css                     | 18 ++++++++++++++++++
 4 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 styles/dropdown.css

diff --git a/components/common/dropdown/Dropdown.vue b/components/common/dropdown/Dropdown.vue
index 6a03dc13..afd8eb2f 100644
--- a/components/common/dropdown/Dropdown.vue
+++ b/components/common/dropdown/Dropdown.vue
@@ -9,7 +9,7 @@ provide(dropdownContextKey, {
 </script>
 
 <template>
-  <VDropdown v-bind="$attrs" ref="dropdown">
+  <VDropdown v-bind="$attrs" ref="dropdown" :class="{ dark: isDark }">
     <slot />
     <template #popper="scope">
       <slot name="popper" v-bind="scope" />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6ca8185a..2c2da80b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -12,8 +12,10 @@ export default defineNuxtConfig({
   },
   css: [
     '@unocss/reset/tailwind.css',
+    'floating-vue/dist/style.css',
     '~/styles/vars.css',
     '~/styles/global.css',
+    '~/styles/dropdown.css',
   ],
   alias: {
     querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
diff --git a/plugins/floating-vue.ts b/plugins/floating-vue.ts
index 0b012419..c376f298 100644
--- a/plugins/floating-vue.ts
+++ b/plugins/floating-vue.ts
@@ -1,6 +1,5 @@
 import FloatingVue from 'floating-vue'
 import { defineNuxtPlugin } from '#app'
-import 'floating-vue/dist/style.css'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(FloatingVue)
diff --git a/styles/dropdown.css b/styles/dropdown.css
new file mode 100644
index 00000000..f5df7adf
--- /dev/null
+++ b/styles/dropdown.css
@@ -0,0 +1,18 @@
+.v-popper--theme-dropdown .v-popper__inner {
+  --at-apply: bg-base text-base rounded border border-base shadow;
+  box-shadow: 0 6px 30px #0000001a;
+}
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  --at-apply: border-base;
+}
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  --at-apply: border-base;
+}
+.v-popper--theme-tooltip .v-popper__inner {
+  --at-apply: bg-base text-base rounded border border-base shadow;
+  padding: 7px 12px 6px;
+}
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+  --at-apply: border-base;
+}