✨ Make some improvements to the swap panel (#7174)

* 💄 Visual improvements in swap panel

* ♻️ Refactor search-bar component to use DS icons

* 📎 PR changes

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

@@ -7,26 +7,14 @@
 (ns app.main.ui.components.search-bar
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data.macros :as dm]
-   [app.main.ui.icons :as i]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [rumext.v2 :as mf]))
 
-(mf/defc search-bar
-  {::mf/wrap-props false}
-  [props]
-  (let [children    (unchecked-get props "children")
-        on-change   (unchecked-get props "on-change")
-        value       (unchecked-get props "value")
-        on-clear    (unchecked-get props "clear-action")
-        placeholder (unchecked-get props "placeholder")
-        icon        (unchecked-get props "icon")
-        autofocus   (unchecked-get props "auto-focus")
-        id          (unchecked-get props "id")
-        input-class (unchecked-get props "class")
-
-        handle-change
+(mf/defc search-bar*
+  [{:keys [id class value placeholder icon-id auto-focus on-change on-clear children]}]
+  (let [handle-change
         (mf/use-fn
          (mf/deps on-change)
          (fn [event]
@@ -52,15 +40,20 @@
     [:span {:class (stl/css-case :search-box true
                                  :has-children (some? children))}
      children
-     [:div {:class (dm/str input-class " " (stl/css :search-input-wrapper))}
-      icon
+     [:div {:class [class (stl/css :search-input-wrapper)]}
+      (when icon-id
+        [:> icon* {:icon-id icon-id
+                   :size "s"
+                   :class (stl/css :icon)}])
       [:input {:id id
                :on-change handle-change
                :value value
-               :auto-focus autofocus
+               :auto-focus auto-focus
+               :auto-complete "off"
                :placeholder placeholder
                :on-key-down handle-key-down}]
       (when (not= "" value)
-        [:button {:class (stl/css :clear)
+        [:button {:class (stl/css :clear-icon)
                   :on-click handle-clear}
-         i/delete-text])]]))
+         [:> icon* {:icon-id "delete-text"
+                    :size "s"}]])]]))

frontend/src/app/main/ui/components/search_bar.scss

@@ -15,6 +15,11 @@
   background-color: var(--search-bar-background-color);
 }
 
+.icon {
+  margin-left: $s-8;
+  flex: 0 0 $s-16;
+}
+
 .search-input-wrapper {
   @include flexCenter;
   height: $s-32;
@@ -52,14 +57,11 @@
   }
 }
 
-.clear {
+.clear-icon {
   @extend .button-tag;
-  border-radius: $br-8;
+  flex: 0 0 $s-32;
   height: 100%;
-  padding-right: $s-8;
   svg {
-    @extend .button-icon-small;
-    color: transparent;
     stroke: var(--icon-foreground);
   }
 }

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -26,7 +26,7 @@
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.link-button :as lb]
-   [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
@@ -329,10 +329,10 @@
       [:> title-bar* {:collapsable false
                       :title       (tr "workspace.libraries.shared-libraries")
                       :class       (stl/css :title-spacing-lib)}]
-      [:& search-bar {:on-change change-search-term
-                      :value search-term
-                      :placeholder (tr "workspace.libraries.search-shared-libraries")
-                      :icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]
+      [:> search-bar* {:on-change change-search-term
+                       :value search-term
+                       :placeholder (tr "workspace.libraries.search-shared-libraries")
+                       :icon-id "search"}]
 
       (if (seq shared-libraries)
         [:div {:class (stl/css :section-list-shared)}

frontend/src/app/main/ui/workspace/plugins.cljs

@@ -15,7 +15,7 @@
    [app.main.data.plugins :as dp]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -173,10 +173,10 @@
 
       [:div {:class (stl/css :modal-content)}
        [:div {:class (stl/css :top-bar)}
-        [:& search-bar {:on-change handle-url-input
-                        :value plugin-url
-                        :placeholder (tr "workspace.plugins.search-placeholder")
-                        :class (stl/css-case :input-error error?)}]
+        [:> search-bar* {:on-change handle-url-input
+                         :value plugin-url
+                         :placeholder (tr "workspace.plugins.search-placeholder")
+                         :class (stl/css-case :input-error error?)}]
 
         [:button {:class (stl/css :primary-button)
                   :disabled @fetching-manifest?

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

@@ -15,7 +15,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
-   [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
@@ -169,9 +169,9 @@
 
 
       [:div {:class (stl/css :search-wrapper)}
-       [:& search-bar {:on-change on-search-term-change
-                       :value term
-                       :placeholder (tr "workspace.assets.search")}
+       [:> search-bar* {:on-change on-search-term-change
+                        :value term
+                        :placeholder (tr "workspace.assets.search")}
         [:button
          {:on-click on-open-menu
           :title (tr "workspace.assets.filter")

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -202,8 +202,8 @@
   @include flexCenter;
   flex-shrink: 0;
   padding: $s-2;
-  height: $s-36;
-  width: $s-36;
+  height: $s-40;
+  width: $s-40;
   border-radius: $br-6;
   background-color: var(--assets-component-background-color);
 }

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

@@ -15,7 +15,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
@@ -288,10 +288,10 @@
        (if show-search?
          [:*
           [:div {:class (stl/css :tool-window-bar :search)}
-           [:& search-bar {:on-change update-search-text
-                           :value current-search
-                           :on-clear clear-search-text
-                           :placeholder (tr "workspace.sidebar.layers.search")}
+           [:> search-bar* {:on-change update-search-text
+                            :value current-search
+                            :on-clear clear-search-text
+                            :placeholder (tr "workspace.sidebar.layers.search")}
             [:button {:on-click on-toggle-filters-click
                       :class (stl/css-case
                               :filter-button true

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -26,7 +26,7 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
@@ -524,6 +524,7 @@
      (when visible?
        [:> cmm/component-item-thumbnail*
         {:file-id (:file-id item)
+         :class (stl/css :component-img)
          :root-shape root-shape
          :component item
          :container container}])
@@ -708,14 +709,13 @@
      [:div {:class (stl/css :component-swap-content)}
       [:div {:class (stl/css :fields-wrapper)}
        [:div {:class (stl/css :search-field)}
-        [:& search-bar {:on-change on-search-term-change
-                        :clear-action on-search-clear-click
-                        :class (stl/css :search-wrapper)
-                        :id "swap-component-search-filter"
-                        :value (:term filters)
-                        :placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name]))
-                        :icon (mf/html [:span {:class (stl/css :search-icon)}
-                                        i/search])}]]
+        [:> search-bar* {:on-change on-search-term-change
+                         :on-clear on-search-clear-click
+                         :class (stl/css :search-wrapper)
+                         :id "swap-component-search-filter"
+                         :value (:term filters)
+                         :placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name]))
+                         :icon-id "search"}]]
 
        [:& select {:class (stl/css :select-library)
                    :default-value current-library-id

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss

@@ -257,13 +257,8 @@
 
 .search-icon {
   @include flexCenter;
-  width: $s-12;
   margin-left: $s-8;
-
-  svg {
-    @extend .button-icon-small;
-    stroke: var(--icon-foreground);
-  }
+  flex: 0 0 $s-16;
 }
 
 .component-path {
@@ -310,7 +305,8 @@
   display: flex;
   align-items: center;
   margin-bottom: $s-4;
-  padding-right: $s-4;
+  padding: $s-2 $s-8 $s-2 $s-2;
+  gap: $s-8;
   font-size: $s-12;
   cursor: pointer;
   width: 100%;
@@ -321,6 +317,8 @@
 
   .variant-icon {
     background-color: none;
+    padding: $s-2;
+    flex: 0 0 $s-16;
   }
 
   .component-name {
@@ -328,13 +326,13 @@
     width: 80%;
   }
 
-  svg,
-  img {
+  .component-img {
+    flex: 0 0 $s-40;
     background-color: var(--assets-component-background-color);
     border-radius: $br-8;
-    height: $s-36;
-    width: $s-36;
-    margin: $s-2 $s-8 $s-2 $s-2;
+    height: $s-40;
+    width: $s-40;
+    padding: $s-2;
   }
 
   .selected {
@@ -379,6 +377,7 @@
 
   .variant-icon {
     background-color: var(--color-background-tertiary);
+    padding: 6px;
   }
 
   img {
@@ -817,8 +816,8 @@
   order: 3;
 
   svg {
-    height: $s-12;
-    width: $s-12;
+    height: 100%;
+    width: 100%;
     background-color: transparent;
     margin: 0;
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -23,7 +23,7 @@
    [app.main.ui.components.editable-select :refer [editable-select]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
@@ -181,10 +181,10 @@
     [:div {:class (stl/css :font-selector)}
      [:div {:class (stl/css-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)}
       [:div {:class (stl/css :header)}
-       [:& search-bar {:on-change on-filter-change
-                       :value (:term state)
-                       :auto-focus true
-                       :placeholder (tr "workspace.options.search-font")}]
+       [:> search-bar* {:on-change on-filter-change
+                        :value (:term state)
+                        :auto-focus true
+                        :placeholder (tr "workspace.options.search-font")}]
        (when (and recent-fonts show-recent)
          [:section {:class (stl/css :show-recent)}
           [:p {:class (stl/css :title)} (tr "workspace.options.recent-fonts")]

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

@@ -17,7 +17,7 @@
    [app.main.data.workspace.path.shortcuts]
    [app.main.data.workspace.shortcuts]
    [app.main.store :as st]
-   [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -500,11 +500,11 @@
        i/close]]
      [:div {:class (stl/css :search-field)}
 
-      [:& search-bar {:on-change on-search-term-change-2
-                      :clear-action on-search-clear-click
-                      :value @filter-term
-                      :placeholder (tr "shortcuts.title")
-                      :icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]]
+      [:> search-bar* {:on-change on-search-term-change-2
+                       :on-clear on-search-clear-click
+                       :value @filter-term
+                       :placeholder (tr "shortcuts.title")
+                       :icon-id "search"}]]
 
      (if match-any?
        [:div {:class (stl/css :shortcuts-list)}