From 740fcd9f3fcb8e16554b69abfc907146077f1a2c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 14 Nov 2024 10:39:26 +0300
Subject: [PATCH] Add animated button

---
 .vscode/settings.json                           | 5 ++++-
 apps/showcase/assets/styles/layout/_topbar.scss | 8 +++++---
 apps/showcase/components/layout/AppTopBar.vue   | 9 +++++++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 407f69d59..3a5d2252d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,5 +19,8 @@
     "[json]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
+    },
+    "[scss]": {
+        "editor.defaultFormatter": "vscode.css-language-features"
     }
-}
+}
\ No newline at end of file
diff --git a/apps/showcase/assets/styles/layout/_topbar.scss b/apps/showcase/assets/styles/layout/_topbar.scss
index e76097e0b..71728284b 100644
--- a/apps/showcase/assets/styles/layout/_topbar.scss
+++ b/apps/showcase/assets/styles/layout/_topbar.scss
@@ -91,7 +91,8 @@
                 border-color: var(--primary-color);
             }
 
-            i, span {
+            i,
+            span {
                 color: var(--text-color);
             }
         }
@@ -130,7 +131,7 @@
             }
 
             .config-panel-colors {
-                > div {
+                >div {
                     padding-top: .5rem;
                     display: flex;
                     gap: .5rem;
@@ -162,6 +163,7 @@
             }
         }
 
+
         .version-item {
             width: auto;
             padding: 0.5rem;
@@ -218,4 +220,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/apps/showcase/components/layout/AppTopBar.vue b/apps/showcase/components/layout/AppTopBar.vue
index e26e1c84d..3c37fc604 100755
--- a/apps/showcase/components/layout/AppTopBar.vue
+++ b/apps/showcase/components/layout/AppTopBar.vue
@@ -95,8 +95,13 @@
                     <AppConfigurator />
                 </li>
                 <li>
-                    <button type="button" class="topbar-item" @click="toggleDesigner">
-                        <i class="pi pi-pencil"></i>
+                    <button type="button" class="topbar-item relative group overflow-hidden !border-transparent" @click="toggleDesigner">
+                        <span
+                            style="animation-duration: 2s; background: conic-gradient(from 90deg, #f97316, #f59e0b, #eab308, #84cc16, #22c55e, #10b981, #14b8a6, #06b6d4, #0ea5e9, #3b82f6, #6366f1, #8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e)"
+                            class="absolute -top-5 -left-5 w-20 h-20 animate-spin"
+                        ></span>
+                        <span style="inset: 1px; border-radius: 4px" class="absolute z-2 bg-surface-0 dark:bg-surface-900 transition-all"></span>
+                        <i class="pi pi-cog z-10"></i>
                     </button>
                 </li>
                 <li>