Style edit button

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -11,6 +11,7 @@
    [app.main.data.modal :as modal]
    [app.main.data.tokens :as dt]
    [app.main.data.tokens :as wdt]
+   [app.main.ui.components.select :refer [select]]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
@@ -180,61 +181,32 @@
                                                              :name @name}))}
       "Create"]]))
 
+(mf/defc edit-button
+  [{:keys []}]
+  [:button {:class (stl/css :themes-button)
+            :on-click (fn [e]
+                        (dom/stop-propagation e)
+                        (modal/show! :tokens/themes {}))}
+   "Edit"])
+
 (mf/defc themes-sidebar
   [_props]
   (let [open? (mf/use-state true)
         active-theme-ids (mf/deref refs/workspace-active-theme-ids)
         themes (mf/deref refs/workspace-ordered-token-themes)]
-    [:div {:class (stl/css :sets-sidebar)}
+   [:div {:class (stl/css :theme-sidebar)}
-     [:div {:class (stl/css :sidebar-header)}
+    [:span {:class (stl/css :themes-header)} "Themes"]
-      [:& title-bar {:collapsable true
+    [:div {:class (stl/css :theme-select-wrapper)}
-                     :collapsed (not @open?)
+     [:& select
-                     :all-clickable true
+      {:default-value (some-> active-theme-ids first)
-                     :title "THEMES"
+       :class (stl/css :select-format-wrapper)
-                     :on-collapsed #(swap! open? not)}]
+       :options (mapcat (fn [[_ xs]]
-      [:button {:class (stl/css :add-set)
+                          (map (fn [{:keys [id name] :as f}]
-                :on-click (fn [event]
+                                 (js/console.log "f" f)
-                            (modal/show! :tokens/themes {:x (.-clientX ^js event)
+                                 {:value id :label name})
-                                                         :y (.-clientY ^js event)}))}
+                               xs))
-       i/add]]
+                        themes)}]
-     (when @open?
+     [:& edit-button]]]))
-       [:div
-        [:style
-         (str "@scope {"
-              (str/join "\n"
-                        ["ul { list-style-type: circle; margin-left: 20px; }"
-                         ".spaced { display: flex; gap: 10px; justify-content: space-between;  }"
-                         ".spaced-y { display: flex; flex-direction: column; gap: 10px }"
-                         ".selected { font-weight: 600; }"
-                         "b { font-weight: 600; }"])
-              "}")]
-        [:div.spaced-y
-         {:style {:padding "10px"}}
-         [:& tokene-theme-create]
-         [:div.spaced-y
-          [:b "Themes"]
-          [:ul
-           (for [[group themes] themes]
-             [:li
-              {:key (str "token-theme-group" group)}
-              group
-              [:ul
-               (for [{:keys [id name] :as _theme} themes]
-                 [:li {:key (str "tokene-theme-" id)}
-                  [:div.spaced
-                   name
-                   [:div.spaced
-                    [:button
-                     {:on-click (fn [e]
-                                  (dom/prevent-default e)
-                                  (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)
-                                          (st/emit! (wdt/delete-token-theme id)))}
-                     "🗑️"]]]])]])]]]])]))
 
 (mf/defc sets-sidebar
   []

frontend/src/app/main/ui/workspace/tokens/sidebar.scss

@@ -24,6 +24,11 @@
   position: relative;
 }
 
+.theme-sidebar {
+  padding: $s-12;
+  padding-bottom: 0;
+}
+
 .sidebar-header {
   display: flex;
   align-items: center;
@@ -114,3 +119,22 @@
     height: 20px;
   }
 }
+
+.theme-select-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 0.28fr;
+  gap: $s-6;
+}
+
+.themes-button {
+  @extend .button-secondary;
+  width: auto;
+}
+
+.themes-header {
+  display: block;
+  @include headlineSmallTypography;
+  margin-bottom: $s-8;
+  padding-left: $s-8;
+  color: var(--title-foreground-color);
+}