From 87e6b35ce2fc804b39aea125022fa1dbe6b31855 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 2 Jan 2025 12:04:46 +0300
Subject: [PATCH] CSS component for buttons

---
 apps/showcase/assets/styles/tailwind/main.css | 10 ++++
 .../components/layout/AppDesigner.vue         | 47 +++++++++++++------
 .../designer/dashboard/DesignDashboard.vue    | 10 +---
 .../designer/editor/DesignEditorFooter.vue    | 18 +------
 .../editor/custom/DesignCustomTokens.vue      | 16 +------
 .../editor/settings/DesignSettings.vue        | 17 +------
 6 files changed, 50 insertions(+), 68 deletions(-)

diff --git a/apps/showcase/assets/styles/tailwind/main.css b/apps/showcase/assets/styles/tailwind/main.css
index b5c61c956..dec8d14e1 100644
--- a/apps/showcase/assets/styles/tailwind/main.css
+++ b/apps/showcase/assets/styles/tailwind/main.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+    .btn-design {
+      @apply px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
+    }
+
+    .btn-design-outlined {
+        @apply px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
+    }
+}
\ No newline at end of file
diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 92d69d05f..b458e6452 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -1,18 +1,5 @@
 <template>
-    <Drawer
-        v-model:visible="$appState.designer.active"
-        position="right"
-        class="designer !w-screen md:!w-[48rem]"
-        :modal="false"
-        :dismissable="false"
-        @after-show="onShow"
-        @after-hide="onHide"
-        :pt="{
-            header: 'p-5',
-            content: '!p-5',
-            footer: '!p-5'
-        }"
-    >
+    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
         <template #header>
             <div class="flex items-center gap-2">
                 <Button v-if="$appState.designer.activeView !== 'dashboard'" variant="text" severity="secondary" rounded type="button" icon="pi pi-chevron-left" @click="openDashboard" />
@@ -199,6 +186,38 @@ export default {
             }
 
             return null;
+        },
+        drawerTokens() {
+            return {
+                root: {
+                    shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
+                },
+                header: {
+                    padding: '1.25rem'
+                },
+                title: {
+                    fontSize: '1.5rem',
+                    fontWeight: '600'
+                },
+                content: {
+                    padding: '0 1.25rem 1.25rem 1.25rem'
+                },
+                footer: {
+                    padding: '1.25rem'
+                },
+                colorScheme: {
+                    light: {
+                        background: '{surface.0}',
+                        borderColor: '{surface.200}',
+                        color: '#09090b'
+                    },
+                    dark: {
+                        background: '{surface.900}',
+                        borderColor: '{surface.700}',
+                        color: '#ffffff'
+                    }
+                }
+            };
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index 6f7350c5d..886d1c3c0 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -6,15 +6,7 @@
     >
     <form @submit.prevent class="flex gap-4">
         <input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
-        <button
-            type="button"
-            @click="activate(false)"
-            icon="pi pi-download"
-            :disabled="!licenseKey"
-            class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
-        >
-            Activate
-        </button>
+        <button type="button" @click="activate(false)" icon="pi pi-download" :disabled="!licenseKey" class="btn-design">Activate</button>
     </form>
 
     <div class="flex justify-between items-center mb-2 mt-6">
diff --git a/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue b/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
index 95ce06d87..de1c800a5 100644
--- a/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
@@ -1,21 +1,7 @@
 <template>
     <div class="flex justify-between gap-2">
-        <button
-            type="button"
-            @click="download"
-            icon="pi pi-download"
-            class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-        >
-            Download
-        </button>
-        <button
-            type="button"
-            @click="apply"
-            icon="pi pi-download"
-            class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-        >
-            Apply
-        </button>
+        <button type="button" @click="download" icon="pi pi-download" class="btn-design-outlined">Download</button>
+        <button type="button" @click="apply" icon="pi pi-download" class="btn-design">Apply</button>
     </div>
 </template>
 
diff --git a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
index 3fe81a895..0d42410b5 100644
--- a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
+++ b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
@@ -22,20 +22,8 @@
         </li>
     </ul>
     <div class="flex justify-between">
-        <button
-            type="button"
-            @click="addToken"
-            class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-        >
-            Add New
-        </button>
-        <button
-            type="button"
-            @click="save"
-            class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-        >
-            Save
-        </button>
+        <button type="button" @click="addToken" class="btn-design-outlined">Add New</button>
+        <button type="button" @click="save" class="btn-design">Save</button>
     </div>
 </template>
 
diff --git a/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue b/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
index 2ea8b749f..5c16191c0 100644
--- a/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
+++ b/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
@@ -25,21 +25,8 @@
             before the migration.
         </span>
         <div class="flex justify-between">
-            <button
-                type="button"
-                @click="preview"
-                class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-            >
-                Preview
-            </button>
-            <button
-                type="button"
-                :disabled="status !== 'preview'"
-                @click="confirmMigration"
-                class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
-            >
-                Migrate
-            </button>
+            <button type="button" @click="preview" class="btn-design-outlined">Preview</button>
+            <button type="button" :disabled="status !== 'preview'" @click="confirmMigration" class="btn-design">Migrate</button>
         </div>
         <div v-if="status === 'preview'">
             <div v-if="missingTokens.length" class="p-3 bg-yellow-100 text-yellow-950 dark:bg-amber-600 dark:text-black font-medium mt-4 rounded-md leading-normal">