More button options and dividers in overflow menus

lib/components/base/Button.vue

@@ -36,6 +36,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hoverFilled: {
+    type: Boolean,
+    default: false,
+  },
+  hoverFilledOnly: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const accentedButton = computed(() =>
@@ -61,6 +69,8 @@ const accentedButton = computed(() =>
       'btn-purple': color === 'purple',
       'btn-gray': color === 'gray',
       'btn-transparent': transparent,
+      'btn-hover-filled': hoverFilled,
+      'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
     }"
@@ -88,6 +98,8 @@ const accentedButton = computed(() =>
       'btn-purple': color === 'purple',
       'btn-gray': color === 'gray',
       'btn-transparent': transparent,
+      'btn-hover-filled': hoverFilled,
+      'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
     }"

lib/components/base/OverflowMenu.vue

@@ -8,21 +8,28 @@
   >
     <slot></slot>
     <template #menu>
-      <Button
-        v-for="option in options"
-        :key="`option-${option.id}`"
-        :color="option.color ? option.color : 'default'"
-        transparent
-        :action="
-          () => {
-            option.action()
-            close()
-          }
-        "
-      >
-        <template v-if="!$slots[option.id]">{{ option.id }}</template>
-        <slot :name="option.id"></slot>
-      </Button>
+      <template v-for="(option, index) in options">
+        <div v-if="option.divider" :key="`divider-${index}`" class="card-divider"></div>
+        <Button
+          v-else
+          :key="`option-${option.id}`"
+          :color="option.color ? option.color : 'default'"
+          :hover-filled="option.hoverFilled"
+          :hover-filled-only="option.hoverFilledOnly"
+          transparent
+          :action="
+            () => {
+              option.action()
+              if (!option.remainOnClick) {
+                close()
+              }
+            }
+          "
+        >
+          <template v-if="!$slots[option.id]">{{ option.id }}</template>
+          <slot :name="option.id"></slot>
+        </Button>
+      </template>
     </template>
   </PopoutMenu>
 </template>

lib/components/base/PopoutMenu.vue

@@ -89,7 +89,7 @@ onBeforeUnmount(() => {
     position: absolute;
     scale: 0.75;
     border: 1px solid var(--color-button-bg);
-    padding: var(--gap-md);
+    padding: var(--gap-sm);
     width: fit-content;
     border-radius: var(--radius-md);
     background-color: var(--color-raised-bg);

lib/components/index.js

@@ -59,6 +59,7 @@ export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg'
 export { default as CodeIcon } from '@/assets/icons/code.svg'
 export { default as CoinsIcon } from '@/assets/icons/coins.svg'
 export { default as ContractIcon } from '@/assets/icons/contract.svg'
+export { default as CopyIcon } from '@/assets/icons/copy.svg'
 export { default as CopyrightIcon } from '@/assets/icons/copyright.svg'
 export { default as CurrencyIcon } from '@/assets/icons/currency.svg'
 export { default as DashboardIcon } from '@/assets/icons/dashboard.svg'