From d868228ce2c69dbe8919f3c0ef3bb203438408cb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 30 May 2024 10:35:24 +0300
Subject: [PATCH] Visual improvements to contextmenu templating doc

---
 doc/contextmenu/CommandDoc.vue | 38 +++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/doc/contextmenu/CommandDoc.vue b/doc/contextmenu/CommandDoc.vue
index 34d0fa95b..ce7044bba 100644
--- a/doc/contextmenu/CommandDoc.vue
+++ b/doc/contextmenu/CommandDoc.vue
@@ -2,16 +2,16 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
-    <div class="card flex md:justify-center">
-        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
+    <div class="card flex sm:justify-center">
+        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
             <li
                 v-for="user in users"
                 :key="user.id"
-                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
                 @contextmenu="onRightClick($event, user)"
             >
-                <div class="flex items-center gap-2">
-                    <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" style="width: 32px" />
+                <div class="flex flex-1 items-center gap-2">
+                    <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" class="w-8 h-8" />
                     <span class="font-bold">{{ user.name }}</span>
                 </div>
                 <Tag :value="user.role" :severity="getBadge(user)" />
@@ -69,15 +69,15 @@ export default {
             ],
             code: {
                 basic: `
-<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
+<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
     <li
         v-for="user in users"
         :key="user.id"
-        :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+        :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
         @contextmenu="onRightClick($event, user)"
     >
-        <div class="flex items-center gap-2">
-            <img :alt="user.name" :src="\`/images/avatar/\${user.image}\`" style="width: 32px" />
+        <div class="flex flex-1 items-center gap-2">
+            <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
             <span class="font-bold">{{ user.name }}</span>
         </div>
         <Tag :value="user.role" :severity="getBadge(user)" />
@@ -88,16 +88,16 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex md:justify-center">
-        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
+    <div class="card flex sm:justify-center">
+        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
             <li
                 v-for="user in users"
                 :key="user.id"
-                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
                 @contextmenu="onRightClick($event, user)"
             >
-                <div class="flex items-center gap-2">
-                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
+                <div class="flex flex-1 items-center gap-2">
+                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
                     <span class="font-bold">{{ user.name }}</span>
                 </div>
                 <Tag :value="user.role" :severity="getBadge(user)" />
@@ -171,16 +171,16 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex md:justify-center">
-        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
+    <div class="card flex sm:justify-center">
+        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
             <li
                 v-for="user in users"
                 :key="user.id"
-                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
                 @contextmenu="onRightClick($event, user)"
             >
-                <div class="flex items-center gap-2">
-                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
+                <div class="flex flex-1 items-center gap-2">
+                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
                     <span class="font-bold">{{ user.name }}</span>
                 </div>
                 <Tag :value="user.role" :severity="getBadge(user)" />