Add basic toggle switch

frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs

@@ -8,6 +8,8 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.main.data.modal :as modal]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
+   [cuerdas.core :as str]
    [app.main.data.tokens :as wdt]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -15,6 +17,7 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
+
 (def ^:private close-icon
   (i/icon-xref :close (stl/css :close-icon)))
 
@@ -22,6 +25,22 @@
   [{:keys []}]
   "Empty")
 
+
+(mf/defc switch
+  [{:keys [selected? name on-change]}]
+  (let [selected (if selected? :on :off)]
+    [:& radio-buttons {:selected selected
+                       :on-change on-change
+                       :name name}
+     [:& radio-button {:id :on
+                       :value :on
+                       :icon i/tick
+                       :label ""}]
+     [:& radio-button {:id :off
+                       :value :off
+                       :icon i/close
+                       :label ""}]]))
+
 (mf/defc themes-overview
   [{:keys []}]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
@@ -37,12 +56,9 @@
             [:div.spaced
              name
              [:div.spaced
-              [:button
+              [:& switch {:name (str "Theme" name)
-               {:on-click (fn [e]
+                          :on-change #(st/emit! (wdt/toggle-token-theme id))
-                            (dom/prevent-default e)
+                          :selected? (get active-theme-ids id)}]
-                            (dom/stop-propagation e)
-                            (st/emit! (wdt/toggle-token-theme id)))}
-               (if (get active-theme-ids id) "✅" "❎")]
               [:button {:on-click (fn [e]
                                     (dom/prevent-default e)
                                     (dom/stop-propagation e)