Merge pull request #3419 from penpot/niwinz-enhancements-css

💄 Add mainly cosmetic improvements to several components

frontend/src/app/main/ui/components/button_link.cljs

@@ -9,13 +9,18 @@
    [app.util.keyboard :as kbd]
    [rumext.v2 :as mf]))
 
-(mf/defc button-link [{:keys [action icon name klass]}]
+(mf/defc button-link
+  {::mf/wrap-props false}
+  [{:keys [action icon name klass]}]
+  (let [on-key-down (mf/use-fn
+                     (mf/deps action)
+                     (fn [event]
+                       (when (kbd/enter? event)
+                         (action event))))]
     [:a.btn-primary.btn-large.button-link
      {:class klass
       :tab-index "0"
       :on-click action
-    :on-key-down (fn [event]
-                   (when (kbd/enter? event)
-                     (action event)))}
+      :on-key-down on-key-down}
      [:span.logo icon]
-   name])
+     name]))

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -11,7 +11,8 @@
    [rumext.v2 :as mf]))
 
 (mf/defc color-bullet
-  {::mf/wrap [mf/memo]}
+  {::mf/wrap [mf/memo]
+   ::mf/wrap-props false}
   [{:keys [color on-click]}]
   (let [on-click (mf/use-fn
                   (mf/deps color on-click)
@@ -36,7 +37,9 @@
             [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
             [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))))
 
-(mf/defc color-name [{:keys [color size on-click on-double-click]}]
+(mf/defc color-name
+  {::mf/wrap-props false}
+  [{:keys [color size on-click on-double-click]}]
   (let [color (if (string? color) {:color color :opacity 1} color)
         {:keys [name color gradient]} color
         color-str (or name color (uc/gradient-type->string (:type gradient)))]

frontend/src/app/main/ui/components/color_bullet_new.cljs

@@ -5,50 +5,57 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.color-bullet-new
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.util.color :as uc]
-   [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-
 (mf/defc color-bullet
-  {::mf/wrap [mf/memo]}
+  {::mf/wrap [mf/memo]
+   ::mf/wrap-props false}
   [{:keys [color on-click mini?]}]
   (let [on-click (mf/use-fn
                   (mf/deps color on-click)
                   (fn [event]
                     (when (fn? on-click)
                       (^function on-click color event))))]
+
     (if (uc/multiple? color)
-      [:div {:on-click on-click
-             :class (dom/classnames (css :color-bullet) true
-                                    (css :multiple) true)}]
+      [:div {:on-click on-click :class (stl/css :color-bullet :multiple)}]
       ;; No multiple selection
-      (let [color (if (string? color) {:color color :opacity 1} color)]
-        [:div
-         {:class (dom/classnames (css :color-bullet) true
-                                 (css :mini) mini?
-                                 (css :is-library-color) (some? (:id color))
-                                 (css :is-not-library-color) (nil? (:id color))
-                                 (css :is-gradient) (some? (:gradient color))
-                                 (css :is-transparent) (and (:opacity color) (> 1 (:opacity color))))
-          :on-click on-click}
-         (if  (:gradient color)
-           [:div {:class (dom/classnames (css :color-bullet-wrapper) true)
-                  :style {:background (uc/color->background color)}}]
-           [:div {:class (dom/classnames (css :color-bullet-wrapper) true)}
-            [:div {:class (dom/classnames (css :color-bullet-left) true)
-                   :style {:background (uc/color->background (assoc color :opacity 1))}}]
-            [:div {:class (dom/classnames (css :color-bullet-right) true)
-                   :style {:background (uc/color->background color)}}]])]))))
-(mf/defc color-name [{:keys [color size on-click on-double-click]}]
       (let [color    (if (string? color) {:color color :opacity 1} color)
-        {:keys [name color gradient]} color
-        color-str (or name color (uc/gradient-type->string (:type gradient)))
-        text-small (and (>= size 64) (< size 72))]
+            id       (:id color)
+            gradient (:gradient color)
+            opacity  (:opacity color)]
+        [:div
+         {:class (stl/css-case
+                  :color-bullet true
+                  :mini mini?
+                  :is-library-color (some? id)
+                  :is-not-library-color (nil? id)
+                  :is-gradient (some? gradient)
+                  :is-transparent (and opacity (> 1 opacity)))
+          :on-click on-click}
+
+         (if (some? gradient)
+           [:div {:class (stl/css :color-bullet-wrapper)
+                  :style {:background (uc/color->background color)}}]
+
+           [:div {:class (stl/css :color-bullet-wrapper)}
+            [:div {:class (stl/css :color-bullet-left)
+                   :style {:background (uc/color->background (assoc color :opacity 1))}}]
+            [:div {:class (stl/css :color-bullet-right)
+                   :style {:background (uc/color->background color)}}]])]))))
+
+
+(mf/defc color-name
+  {::mf/wrap-props false}
+  [{:keys [color size on-click on-double-click]}]
+  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
     (when (or (not size) (> size 64))
-      [:span {:class (dom/classnames (css :color-text) true
-                                     (css :small-text) text-small)
-              :on-click #(when on-click (on-click %))
-              :on-double-click #(when on-double-click (on-double-click %))} color-str])))
+      [:span {:class (stl/css-case
+                      :color-text true
+                      :small-text (and (>= size 64) (< size 72)))
+              :on-click on-click
+              :on-double-click on-double-click}
+       (or name color (uc/gradient-type->string (:type gradient)))])))

frontend/src/app/main/ui/components/title_bar.cljs

@@ -5,38 +5,27 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.title-bar
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
    [app.main.ui.icons :as i]
-   [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
 (mf/defc title-bar
   {::mf/wrap-props false}
-  [props]
-  (let [collapsable? (unchecked-get props "collapsable?")
-        collapsed?   (unchecked-get props "collapsed?")
-        on-collapsed (unchecked-get props "on-collapsed")
-        title        (unchecked-get props "title")
-        children     (unchecked-get props "children")
-        on-btn-click (unchecked-get props "on-btn-click")
-        btn-children (unchecked-get props "btn-children")
-        klass        (unchecked-get props "klass")]
- 
-    [:div {:class (dom/classnames (css :title-bar) true
-                                   klass true)}
+  [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children klass]}]
+  (let [klass (dm/str (stl/css :title-bar) " " klass)]
+    [:div {:class klass}
      (if collapsable?
-       [:button {:class (dom/classnames (css :toggle-btn) true)
-                 :on-click on-collapsed}
-        [:span {:class (dom/classnames (css :collased-icon) true
-                                       (css :rotated) collapsed?)}
+       [:button {:class (stl/css :toggle-btn) :on-click on-collapsed}
+        [:span {:class (stl/css-case
+                        :collased-icon true
+                         :rotated collapsed?)}
          i/arrow-refactor]
-        [:div {:class (dom/classnames (css :title) true)}
-         title]]
-       [:div {:class (dom/classnames (css :title-only) true)}
-        title])
+        [:div {:class (stl/css :title)} title]]
+       [:div {:class (stl/css :title-only)} title])
      children
      (when (some? on-btn-click)
-       [:button {:class (dom/classnames (css :title-button) true)
+       [:button {:class (stl/css :title-button)
                  :on-click on-btn-click}
         btn-children])]))