From 6f648faa544c67e5ad7a36c8384386b00ac108e7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 25 May 2024 14:05:57 +0300
Subject: [PATCH] Fixed visual menu templating issue

---
 doc/menu/TemplateDoc.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 04e19e99d..0c2e31f8c 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -28,9 +28,9 @@
             <template #item="{ item, props }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
@@ -112,9 +112,9 @@ export default {
     <template #item="{ item, props }">
         <a v-ripple class="flex items-center" v-bind="props.action">
             <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
+            <span>{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
         </a>
     </template>
     <template #end>
@@ -153,9 +153,9 @@ export default {
             <template #item="{ item, props }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
@@ -248,9 +248,9 @@ export default {
             <template #item="{ item, props }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>