From 1d22658818e67a16ecbce9f4759146731d6cc1f8 Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Fri, 17 Jan 2025 12:53:09 +0100
Subject: [PATCH] :recycle: Switch swatch component in style bar

---
 .../src/app/main/ui/ds/utilities/swatch.cljs    |  2 +-
 .../app/main/ui/workspace/color_palette.cljs    | 17 ++++++++++-------
 .../app/main/ui/workspace/color_palette.scss    |  5 +++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.cljs b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
index 1a6453b91..1d02e5fdb 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.cljs
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
@@ -23,7 +23,7 @@
   [color-item]
   (let [name (:name color-item)
         path (:path color-item)
-        path-and-name (if path (str path " / " name) name)
+        path-and-name (if (and path (not (str/empty? path))) (str path " / " name) name)
         gradient (:gradient color-item)
         image (:image color-item)
         color (:color color-item)]
diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs
index 37a9bf4be..4f3e507e4 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette.cljs
@@ -16,6 +16,7 @@
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.utilities.swatch :refer [swatch*]]
    [app.main.ui.icons :as i]
    [app.util.color :as uc]
    [app.util.dom :as dom]
@@ -40,13 +41,15 @@
                                        {::ev/name "use-library-color"
                                         ::ev/origin "color-palette"
                                         :external-library (not= selected :file)})))))]
-    [:div {:class (stl/css-case
-                   :color-cell true
-                   :is-not-library-color (nil? (:id color))
-                   :no-text (<= size 64))
-           :title (uc/get-color-name color)
-           :on-click select-color}
-     [:& cb/color-bullet {:color color}]
+    [:button {:class (stl/css-case
+                      :color-cell true
+                      :is-not-library-color (nil? (:id color))
+                      :no-text (<= size 64))
+              :title (uc/get-color-name color)
+              :aria-label (uc/get-color-name color)
+              :type "button"
+              :on-click select-color}
+     [:> swatch* {:background color :size "medium"}]
      [:& cb/color-name {:color color :size size :origin :palette}]]))
 
 (mf/defc palette*
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index f8f3ed244..39cd4d0fe 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -86,6 +86,11 @@
 }
 
 .color-cell {
+  appearance: none;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: auto 1fr;