chore: add styles for three dots menu

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -227,8 +227,19 @@ export const styles = () => ({
     lightFiltersClearAllButtonTextHover: "alias:lightPrimary",
     lightFiltersClearAllButtonFocus: "#F3F4F6",
 
+    lightThreeDotsMenuIconBackground: "#FFFFFF",
+    lightThreeDotsMenuIconBackgroundHover: "#F3F4F6",
+    lightThreeDotsMenuIconBackgroundBorder: "#D1D5DB",
+    lightThreeDotsMenuIconDots: "#111827",
+    lightThreeDotsMenuIconDotsHover: "alias:lightPrimary",   
+    lightThreeDotsMenuIconFocus: "#F3F4F6",   
+    lightThreeDotsMenuBodyBackground: "#FFFFFF",
+    lightThreeDotsMenuBodyBackgroundHover: "#F3F4F6",
+    lightThreeDotsMenuBodyText: "#111827",
+    lightThreeDotsMenuBodyTextHover: "#111827",
 
-
+    
+    
     // colors for dark theme
     darkHtml: "#111827",
 
@@ -444,6 +455,18 @@ export const styles = () => ({
     darkShowTablesBodyBackground: "alias:darkForm",
     darkShowTableBodyText: "#9CA3AF",
     darkShowTableBodyBorder: "#F3F4F6",
+
+    darkThreeDotsMenuIconBackground: "#1F2937",
+    darkThreeDotsMenuIconBackgroundHover: "#374151",
+    darkThreeDotsMenuIconBackgroundBorder: "#4B5563",
+    darkThreeDotsMenuIconDots: "#9CA3AF",
+    darkThreeDotsMenuIconDotsHover: "#FFFFFF",   
+    darkThreeDotsMenuIconFocus: "#374151",   
+    darkThreeDotsMenuBodyBackground: "#374151",
+    darkThreeDotsMenuBodyBackgroundHover: "#4B5563",
+    darkThreeDotsMenuBodyText: "#9CA3AF",
+    darkThreeDotsMenuBodyTextHover: "#FFFFFF",
+
   },
   boxShadow: {
     customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

adminforth/spa/src/components/ThreeDotsMenu.vue

@@ -2,7 +2,7 @@
   <template v-if="threeDotsDropdownItems?.length || customActions?.length">
     <button 
       data-dropdown-toggle="listThreeDotsDropdown" 
-      class="flex items-center py-2 px-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+      class="flex items-center py-2 px-2 text-sm font-medium text-lightThreeDotsMenuIconDots focus:outline-none bg-lightThreeDotsMenuIconBackground rounded border border-lightThreeDotsMenuIconBackgroundBorder hover:bg-lightThreeDotsMenuIconBackgroundHover hover:text-lightThreeDotsMenuIconDotsHover focus:z-10 focus:ring-4 focus:ring-lightThreeDotsMenuIconFocus dark:focus:ring-darkThreeDotsMenuIconFocus dark:bg-darkThreeDotsMenuIconBackground dark:text-darkThreeDotsMenuIconDots dark:border-darkThreeDotsMenuIconBackgroundBorder dark:hover:text-darkThreeDotsMenuIconDotsHover dark:hover:bg-darkThreeDotsMenuIconBackgroundHower rounded-default"
     >
       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
         <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
@@ -12,10 +12,10 @@
     <!-- Dropdown menu -->
     <div 
       id="listThreeDotsDropdown" 
-      class="z-20 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
-        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconButton">
+      class="z-20 hidden bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
+        <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
           <li v-for="item in threeDotsDropdownItems" :key="`dropdown-item-${item.label}`">
-            <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+            <a href="#" class="block px-4 py-2 hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
               <component :is="getCustomComponent(item)" 
                 :meta="item.meta" 
                 :resource="coreStore.resource" 
@@ -24,7 +24,7 @@
             </a>
           </li>
           <li v-for="action in customActions" :key="action.id">
-            <a href="#" @click.prevent="handleActionClick(action)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+            <a href="#" @click.prevent="handleActionClick(action)" class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
               <div class="flex items-center gap-2">
                 <component 
                   v-if="action.icon" 

dev-demo/index.ts

@@ -350,6 +350,18 @@ export const admin = new AdminForth({
           FiltersClearAllButtonText: "alias:lightFiltersClearAllButtonBackground inverse",
           FiltersClearAllButtonTextHover: "alias:lightFiltersClearAllButtonText darken",
           FiltersClearAllButtonFocus: "alias:lightFiltersClearAllButtonBackground opacity:0.6",
+
+          ThreeDotsMenuIconBackground: "alias:lightPrimary lighten",
+          ThreeDotsMenuIconBackgroundHover: "alias:lightPrimary opacity:0.5",
+          ThreeDotsMenuIconBackgroundBorder: "alias:lightPrimary darken",
+          ThreeDotsMenuIconDots: "alias:lightThreeDotsMenuIconBackground inverse",
+          ThreeDotsMenuIconDotsHover: "alias:lightThreeDotsMenuIconDots opacity:0.3",   
+          ThreeDotsMenuIconFocus: "alias:lightThreeDotsMenuIconBackground opacity:0.2",   
+          ThreeDotsMenuBodyBackground: "alias:lightThreeDotsMenuIconBackground",
+          ThreeDotsMenuBodyBackgroundHover: "alias:lightThreeDotsMenuBodyBackground darken",
+          ThreeDotsMenuBodyText: "alias:lightThreeDotsMenuIconDots",
+          ThreeDotsMenuBodyTextHover: "alias:lightlightThreeDotsMenuIconDots opacity:0.8",
+
         },
         dark: {
           primary: '#bd1a76',
@@ -529,6 +541,17 @@ export const admin = new AdminForth({
           FiltersClearAllButtonText: "alias:darkFiltersClearAllButtonBackground inverse",
           FiltersClearAllButtonTextHover: "alias:darkFiltersClearAllButtonText darken",
           FiltersClearAllButtonFocus: "alias:darkFiltersClearAllButtonBackground opacity:0.6",
+
+          ThreeDotsMenuIconBackground: "alias:darkPrimary lighten",
+          ThreeDotsMenuIconBackgroundHover: "alias:darkPrimary opacity:0.5",
+          ThreeDotsMenuIconBackgroundBorder: "alias:darkPrimary darken",
+          ThreeDotsMenuIconDots: "alias:darkThreeDotsMenuIconBackground inverse",
+          ThreeDotsMenuIconDotsHover: "alias:darkThreeDotsMenuIconDots opacity:0.3",   
+          ThreeDotsMenuIconFocus: "alias:darkThreeDotsMenuIconBackground opacity:0.2",   
+          ThreeDotsMenuBodyBackground: "alias:darkThreeDotsMenuIconBackground",
+          ThreeDotsMenuBodyBackgroundHover: "alias:darkThreeDotsMenuBodyBackground darken",
+          ThreeDotsMenuBodyText: "alias:darkThreeDotsMenuIconDots",
+          ThreeDotsMenuBodyTextHover: "alias:darkThreeDotsMenuIconDots opacity:0.8",
         }
       }
     },