From 57a49877ae23723809a5a0155c348a1ef5a5174a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 2 Jul 2024 10:30:14 +0200
Subject: [PATCH] playground: update

---
 playground/app/app.config.ts           |  2 +-
 playground/app/pages/context-menu.vue  |  3 ++-
 playground/app/pages/dropdown-menu.vue | 18 ++++++++----------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index 229a6934..7d70ca73 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -6,7 +6,7 @@ export default defineAppConfig({
   },
   ui: {
     colors: {
-      primary: 'red',
+      primary: 'sky',
       gray: 'cool'
     }
   }
diff --git a/playground/app/pages/context-menu.vue b/playground/app/pages/context-menu.vue
index 1e9be18f..8bac964e 100644
--- a/playground/app/pages/context-menu.vue
+++ b/playground/app/pages/context-menu.vue
@@ -82,8 +82,9 @@ defineShortcuts(extractShortcuts(items))
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div class="flex flex-col items-center gap-8">
     <USelectMenu v-model="size" :items="sizes" placeholder="Size" />
+
     <UContextMenu :items="items" class="min-w-48" :size="size">
       <div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
         Right click here
diff --git a/playground/app/pages/dropdown-menu.vue b/playground/app/pages/dropdown-menu.vue
index 485778dd..4e91470a 100644
--- a/playground/app/pages/dropdown-menu.vue
+++ b/playground/app/pages/dropdown-menu.vue
@@ -123,18 +123,16 @@ defineShortcuts(extractShortcuts(items))
 
 <template>
   <div class="flex-1">
-    <div class="flex items-center gap-2">
-      <UButtonGroup :size="size">
-        <UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
-          <UButton label="Open" color="white" icon="i-heroicons-user" />
+    <div class="flex flex-col items-center gap-8">
+      <USelectMenu v-model="size" :items="sizes" placeholder="Size" />
 
-          <template #custom-trailing>
-            <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-primary-500 dark:text-primary-400" />
-          </template>
-        </UDropdownMenu>
+      <UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
+        <UButton label="Open" color="white" icon="i-heroicons-user" />
 
-        <USelectMenu v-model="size" :items="sizes" placeholder="Size" />
-      </UButtonGroup>
+        <template #custom-trailing>
+          <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-primary-500 dark:text-primary-400" />
+        </template>
+      </UDropdownMenu>
     </div>
   </div>
 </template>