enhance: replace ui/button with shui/button

deps/shui/src/logseq/shui/button/v2.cljs

@@ -9,11 +9,12 @@
   {:init (fn [state]
            (assoc state ::theme (atom
                                  (or (:theme (first (:rum/args state))) :color))))}
-  [state {:keys [theme hover-theme color text depth size icon interactive shortcut tiled on-click muted class href comp-opts]
+  [state {:keys [theme hover-theme color text depth size icon interactive shortcut tiled on-click muted disabled? class href button-props icon-props]
           :or {theme :color depth 1 size :md interactive true muted false class ""}} context]
   (let [*theme (::theme state)
         color-string (or (some-> color name) (some-> context :state rum/react :ui/radix-color name) "custom")
-        theme-class (str "shui__button-theme-" (name (rum/react *theme)))
+        theme (rum/react *theme)
+        theme-class (str "shui__button-theme-" (if (keyword? theme) (name theme) "color"))
         depth-class (when-not (= :text theme) (str "shui__button-depth-" depth))
         color-class (str "shui__button-color-" color-string)
         muted-class (when muted "shui__button-muted")
@@ -22,14 +23,16 @@
         on-click (fn [e]
                    (when href (set! (.-href js/window.location) href))
                    (when on-click (on-click e)))]
-    [:button.shui__button (merge
-                           comp-opts
-                           (cond->
-                            {:class (str theme-class " " depth-class " " color-class " " size-class " " tiled-class " " muted-class " " class)
-                             :on-mouse-over #(when hover-theme (reset! *theme hover-theme))
-                             :on-mouse-out #(reset! *theme theme)}
-                             on-click
-                             (assoc :on-click on-click)))
+    [:button.ui__button.shui__button
+     (merge
+      button-props
+      (cond->
+       {:class (str theme-class " " depth-class " " color-class " " size-class " " tiled-class " " muted-class " " class)
+        :disabled (boolean disabled?)
+        :on-mouse-over #(when hover-theme (reset! *theme hover-theme))
+        :on-mouse-out #(reset! *theme theme)}
+        on-click
+        (assoc :on-click on-click)))
      (if-not tiled text
              (for [[index tile] (map-indexed vector (rest (string/split text #"")))]
                [:<>
@@ -38,7 +41,7 @@
                 [:div.shui__button__tile {:class ""} tile]]))
 
      (when icon
-       (icon/root icon))
+       (icon/root icon icon-props))
      (when (not-empty shortcut)
        (for [key shortcut]
          [:div.shui__button-shortcut-key

src/main/frontend/components/plugins.cljs

@@ -149,14 +149,14 @@
      [:span.flex.items-center
       (ui/icon "puzzle")
       (t :plugins) (when (vector? total-nums) (str " (" (first total-nums) ")"))]
-     :intent "logseq"
+     :intent "link"
      :on-click #(on-action :plugins)
      :class (if (= category :plugins) "active" ""))
    (ui/button
      [:span.flex.items-center
       (ui/icon "palette")
       (t :themes) (when (vector? total-nums) (str " (" (last total-nums) ")"))]
-     :intent "logseq"
+     :intent "link"
      :on-click #(on-action :themes)
      :class (if (= category :themes) "active" ""))])
 
@@ -382,7 +382,7 @@
     (t :plugin/contribute)
     :href "https://github.com/logseq/marketplace"
     :class "contribute"
-    :intent "logseq"
+    :intent "link"
     :target "_blank"))
 
 (rum/defc user-proxy-settings-panel
@@ -492,11 +492,11 @@
          (ui/tippy {:html  [:div (t :plugin/unpacked-tips)]
                     :arrow true}
                    (ui/button
-                     [:span.flex.items-center
-                      (ui/icon "upload") (t :plugin/load-unpacked)]
-                     :intent "logseq"
+                    (t :plugin/load-unpacked)
+                    {:icon "upload"
+                     :intent "link"
                      :class "load-unpacked"
-                     :on-click plugin-handler/load-unpacked-plugin))
+                     :on-click plugin-handler/load-unpacked-plugin}))
 
          (unpacked-plugin-loader selected-unpacked-pkg)])]
 
@@ -504,11 +504,11 @@
       ;; extra info
       (when-let [proxy-val (state/http-proxy-enabled-or-val?)]
         (ui/button
-          [:span.flex.items-center.text-indigo-500
-           (ui/icon "world-download") proxy-val]
-          :small? true
-          :intent "link"
-          :on-click #(state/pub-event! [:go/proxy-settings agent-opts])))
+         [:span.flex.items-center.text-indigo-500
+          (ui/icon "world-download") proxy-val]
+         :small? true
+         :intent "link"
+         :on-click #(state/pub-event! [:go/proxy-settings agent-opts])))
 
       ;; search
       (panel-tab-search search-key *search-key *search-ref)
@@ -516,105 +516,105 @@
       ;; sorter & filter
       (let [aim-icon #(if (= filter-by %) "check" "circle")]
         (ui/dropdown-with-links
-          (fn [{:keys [toggle-fn]}]
-            (ui/button
-              (ui/icon "filter")
-              :class (str (when-not (contains? #{:default} filter-by) "picked ") "sort-or-filter-by")
-              :on-click toggle-fn
-              :intent "link"))
-
-          (if market?
-            [{:title   (t :plugin/all)
-              :options {:on-click #(reset! *filter-by :default)}
-              :icon    (ui/icon (aim-icon :default))}
-
-             {:title   (t :plugin/installed)
-              :options {:on-click #(reset! *filter-by :installed)}
-              :icon    (ui/icon (aim-icon :installed))}
-
-             {:title   (t :plugin/not-installed)
-              :options {:on-click #(reset! *filter-by :not-installed)}
-              :icon    (ui/icon (aim-icon :not-installed))}]
-
-            [{:title   (t :plugin/all)
-              :options {:on-click #(reset! *filter-by :default)}
-              :icon    (ui/icon (aim-icon :default))}
-
-             {:title   (t :plugin/enabled)
-              :options {:on-click #(reset! *filter-by :enabled)}
-              :icon    (ui/icon (aim-icon :enabled))}
-
-             {:title   (t :plugin/disabled)
-              :options {:on-click #(reset! *filter-by :disabled)}
-              :icon    (ui/icon (aim-icon :disabled))}
-
-             {:title   (t :plugin/unpacked)
-              :options {:on-click #(reset! *filter-by :unpacked)}
-              :icon    (ui/icon (aim-icon :unpacked))}
-
-             {:title   (t :plugin/update-available)
-              :options {:on-click #(reset! *filter-by :update-available)}
-              :icon    (ui/icon (aim-icon :update-available))}])
-          nil))
+         (fn [{:keys [toggle-fn]}]
+           (ui/button
+            (ui/icon "filter")
+            :class (str (when-not (contains? #{:default} filter-by) "picked ") "sort-or-filter-by")
+            :on-click toggle-fn
+            :intent "link"))
+
+         (if market?
+           [{:title   (t :plugin/all)
+             :options {:on-click #(reset! *filter-by :default)}
+             :icon    (ui/icon (aim-icon :default))}
+
+            {:title   (t :plugin/installed)
+             :options {:on-click #(reset! *filter-by :installed)}
+             :icon    (ui/icon (aim-icon :installed))}
+
+            {:title   (t :plugin/not-installed)
+             :options {:on-click #(reset! *filter-by :not-installed)}
+             :icon    (ui/icon (aim-icon :not-installed))}]
+
+           [{:title   (t :plugin/all)
+             :options {:on-click #(reset! *filter-by :default)}
+             :icon    (ui/icon (aim-icon :default))}
+
+            {:title   (t :plugin/enabled)
+             :options {:on-click #(reset! *filter-by :enabled)}
+             :icon    (ui/icon (aim-icon :enabled))}
+
+            {:title   (t :plugin/disabled)
+             :options {:on-click #(reset! *filter-by :disabled)}
+             :icon    (ui/icon (aim-icon :disabled))}
+
+            {:title   (t :plugin/unpacked)
+             :options {:on-click #(reset! *filter-by :unpacked)}
+             :icon    (ui/icon (aim-icon :unpacked))}
+
+            {:title   (t :plugin/update-available)
+             :options {:on-click #(reset! *filter-by :update-available)}
+             :icon    (ui/icon (aim-icon :update-available))}])
+         nil))
 
       (when market?
         (ui/dropdown-with-links
-          (fn [{:keys [toggle-fn]}]
-            (ui/button
-              (ui/icon "arrows-sort")
-              :class (str (when-not (contains? #{:default :downloads} sort-by) "picked ") "sort-or-filter-by")
-              :on-click toggle-fn
-              :intent "link"))
-          (let [aim-icon #(if (= sort-by %) "check" "circle")]
-            [{:title   (t :plugin/downloads)
-              :options {:on-click #(reset! *sort-by :downloads)}
-              :icon    (ui/icon (aim-icon :downloads))}
-
-             {:title   (t :plugin/stars)
-              :options {:on-click #(reset! *sort-by :stars)}
-              :icon    (ui/icon (aim-icon :stars))}
-
-             {:title   (t :plugin/title "A - Z")
-              :options {:on-click #(reset! *sort-by :letters)}
-              :icon    (ui/icon (aim-icon :letters))}])
-          {}))
-
-      ;; more - updater
-      (ui/dropdown-with-links
-        (fn [{:keys [toggle-fn]}]
-          (ui/button
-            (ui/icon "dots-vertical")
-            :class "more-do"
+         (fn [{:keys [toggle-fn]}]
+           (ui/button
+            (ui/icon "arrows-sort")
+            :class (str (when-not (contains? #{:default :downloads} sort-by) "picked ") "sort-or-filter-by")
             :on-click toggle-fn
             :intent "link"))
+         (let [aim-icon #(if (= sort-by %) "check" "circle")]
+           [{:title   (t :plugin/downloads)
+             :options {:on-click #(reset! *sort-by :downloads)}
+             :icon    (ui/icon (aim-icon :downloads))}
 
-        (concat (if market?
-                  [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
-                    :options {:on-click #(reload-market-fn)}}]
-                  [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
-                    :options {:on-click #(plugin-handler/user-check-enabled-for-updates! (not= :plugins category))}}])
-
-                [{:title   [:span.flex.items-center (ui/icon "world") (t :settings-page/network-proxy)]
-                  :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
-
-                [{:title   [:span.flex.items-center (ui/icon "arrow-down-circle") (t :plugin.install-from-file/menu-title)]
-                  :options {:on-click plugin-config-handler/open-replace-plugins-modal}}]
-
-                (when (state/developer-mode?)
-                  [{:hr true}
-                   {:title   [:span.flex.items-center (ui/icon "file-code") (t :plugin/open-preferences)]
-                    :options {:on-click
-                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
-                                 (js/apis.openPath (str root "/preferences.json")))}}
-                   {:title   [:span.flex.items-center.whitespace-nowrap.space-x-1 (ui/icon "bug") (t :plugin/open-logseq-dir) [:code "~/.logseq"]]
-                    :options {:on-click
-                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
-                                 (js/apis.openPath root))}}])
-
-                [{:hr true :key "dropdown-more"}
-                 {:title   (auto-check-for-updates-control)
-                  :options {:no-padding? true}}])
-        {})
+            {:title   (t :plugin/stars)
+             :options {:on-click #(reset! *sort-by :stars)}
+             :icon    (ui/icon (aim-icon :stars))}
+
+            {:title   (t :plugin/title "A - Z")
+             :options {:on-click #(reset! *sort-by :letters)}
+             :icon    (ui/icon (aim-icon :letters))}])
+         {}))
+
+      ;; more - updater
+      (ui/dropdown-with-links
+       (fn [{:keys [toggle-fn]}]
+         (ui/button
+          (ui/icon "dots-vertical")
+          :class "more-do"
+          :on-click toggle-fn
+          :intent "link"))
+
+       (concat (if market?
+                 [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
+                   :options {:on-click #(reload-market-fn)}}]
+                 [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
+                   :options {:on-click #(plugin-handler/user-check-enabled-for-updates! (not= :plugins category))}}])
+
+               [{:title   [:span.flex.items-center (ui/icon "world") (t :settings-page/network-proxy)]
+                 :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
+
+               [{:title   [:span.flex.items-center (ui/icon "arrow-down-circle") (t :plugin.install-from-file/menu-title)]
+                 :options {:on-click plugin-config-handler/open-replace-plugins-modal}}]
+
+               (when (state/developer-mode?)
+                 [{:hr true}
+                  {:title   [:span.flex.items-center (ui/icon "file-code") (t :plugin/open-preferences)]
+                   :options {:on-click
+                             #(p/let [root (plugin-handler/get-ls-dotdir-root)]
+                                (js/apis.openPath (str root "/preferences.json")))}}
+                  {:title   [:span.flex.items-center.whitespace-nowrap.space-x-1 (ui/icon "bug") (t :plugin/open-logseq-dir) [:code "~/.logseq"]]
+                   :options {:on-click
+                             #(p/let [root (plugin-handler/get-ls-dotdir-root)]
+                                (js/apis.openPath root))}}])
+
+               [{:hr true :key "dropdown-more"}
+                {:title   (auto-check-for-updates-control)
+                 :options {:no-padding? true}}])
+       {})
 
       ;; developer
       (panel-tab-developer)]]))

src/main/frontend/components/reference.cljs

@@ -23,7 +23,7 @@
 
 (defn filtered-refs
   [page-name filters filters-atom filtered-references]
-  [:div.flex.gap-1.flex-wrap
+  [:div.flex.gap-2.flex-wrap
    (for [[ref-name ref-count] filtered-references]
      (when ref-name
        (let [lc-reference (string/lower-case ref-name)]

src/main/frontend/components/settings.cljs

@@ -41,7 +41,7 @@
 
 (defn toggle
   [label-for name state on-toggle & [detail-text]]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for label-for}
     name]
@@ -151,9 +151,10 @@
            :height 500}]]])
 
 (defn row-with-button-action
-  [{:keys [left-label description action button-label href on-click desc -for stretch]}]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
-
+  [{:keys [left-label description action button-label href on-click desc -for stretch center?]
+    :or {center? true}}]
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4
+   {:class (if center? "sm:items-center" "sm:items-start")}
    ;; left column
    [:div.flex.flex-col
     [:label.block.text-sm.font-medium.leading-5.opacity-70
@@ -207,7 +208,7 @@
     :-for         "export_css"}))
 
 (defn show-brackets-row [t show-brackets?]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "show_brackets"}
     (t :settings-page/show-brackets)]
@@ -223,7 +224,7 @@
 (rum/defcs switch-spell-check-row < rum/reactive
   [state t]
   (let [enabled? (state/sub [:electron/user-cfgs :spell-check])]
-    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
      [:label.block.text-sm.font-medium.leading-5.opacity-70
       (t :settings-page/spell-checker)]
      [:div
@@ -240,7 +241,7 @@
 (rum/defcs switch-git-auto-commit-row < rum/reactive
   [state t]
   (let [enabled? (state/get-git-auto-commit-enabled?)]
-    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
      [:label.block.text-sm.font-medium.leading-5.opacity-70
       (t :settings-page/git-switcher-label)]
      [:div
@@ -255,7 +256,7 @@
 (rum/defcs git-auto-commit-seconds < rum/reactive
   [state t]
   (let [secs (or (state/sub [:electron/user-cfgs :git/auto-commit-seconds]) 60)]
-    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
      [:label.block.text-sm.font-medium.leading-5.opacity-70
       (t :settings-page/git-commit-delay)]
      [:div.mt-1.sm:mt-0.sm:col-span-2
@@ -347,7 +348,7 @@
                               :action     pick-theme})]))
 
 (defn file-format-row [t preferred-format]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "preferred_format"}
     (t :settings-page/preferred-file-format)]
@@ -364,7 +365,7 @@
         [:option {:key format :value format} (string/capitalize format)])]]]])
 
 (defn date-format-row [t preferred-date-format]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "custom_date_format"}
     (t :settings-page/custom-date-format)
@@ -390,7 +391,7 @@
         [:option {:key format} format])]]]])
 
 (defn workflow-row [t preferred-workflow]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "preferred_workflow"}
     (t :settings-page/preferred-workflow)]
@@ -512,7 +513,7 @@
 ;;               (config-handler/set-config! :feature/enable-block-timestamps? value)))))
 
 (defn zotero-settings-row []
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "zotero_settings"}
     "Zotero"]
@@ -571,15 +572,12 @@
         on-toggle #(let [v (not on?)]
                      (set-on? v)
                      (storage/set ::storage-spec/lsp-core-enabled v))]
-    [:div.flex.items-center
+    [:div.flex.items-center.gap-2
      (ui/toggle on? on-toggle true)
      (when (not= (boolean value) on?)
-       [:div.relative.opacity-70
-        [:span.absolute.whitespace-nowrap
-         {:style {:top -18 :left 10}}
-         (ui/button (t :plugin/restart)
-                    :on-click #(js/logseq.api.relaunch)
-           :small? true :intent "logseq")]])]))
+       (ui/button (t :plugin/restart)
+                  :on-click #(js/logseq.api.relaunch)
+                  :small? true :intent "logseq"))]))
 
 (rum/defc http-server-enabled-switcher
   [t]
@@ -588,15 +586,12 @@
         on-toggle #(let [v (not on?)]
                      (set-on? v)
                      (storage/set ::storage-spec/http-server-enabled v))]
-    [:div.flex.items-center
+    [:div.flex.items-center.gap-2
      (ui/toggle on? on-toggle true)
      (when (not= (boolean value) on?)
-       [:div.relative.opacity-70
-        [:span.absolute.whitespace-nowrap
-         {:style {:top -18 :left 10}}
-         (ui/button (t :plugin/restart)
-                    :on-click #(js/logseq.api.relaunch)
-                    :small? true :intent "logseq")]])]))
+       (ui/button (t :plugin/restart)
+                  :on-click #(js/logseq.api.relaunch)
+                  :small? true :intent "logseq"))]))
 
 (rum/defc flashcards-enabled-switcher
   [enable-flashcards?]
@@ -1018,7 +1013,7 @@
     [:div.panel-wrap.is-features.mb-8
      (journal-row enable-journals?)
      (when (not enable-journals?)
-       [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+       [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
         [:label.block.text-sm.font-medium.leading-5.opacity-70
          {:for "default page"}
          (t :settings-page/home-default-page)]
@@ -1056,7 +1051,7 @@
 
      (when-not web-platform?
        [:<>
-        [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+        [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
          [:label.flex.font-medium.leading-5.self-start.mt-1
           (ui/icon  (if logged-in? "lock-open" "lock") {:class "mr-1"}) (t :settings-page/beta-features)]]
         [:div.flex.flex-col.gap-4
@@ -1074,7 +1069,7 @@
      ;; (when-not web-platform?
      ;;   [:<>
      ;;    [:hr]
-     ;;    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+;;    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
      ;;     [:label.flex.font-medium.leading-5.self-start.mt-1 (ui/icon  (if logged-in? "lock-open" "lock") {:class "mr-1"}) (t :settings-page/alpha-features)]]
      ;;    [:div.flex.flex-col.gap-4
      ;;     {:class (when-not user-handler/alpha-user? "opacity-50 pointer-events-none cursor-not-allowed")}

src/main/frontend/components/settings.css

@@ -106,7 +106,6 @@
 
         margin-bottom: 0;
         padding-bottom: 12px;
-        align-items: start;
 
         label {
           min-height: 28px;

src/main/frontend/components/whiteboard.cljs

@@ -217,19 +217,16 @@
           (str " · " total-whiteboards)]]
         [:div.flex-1]
         (when has-checked?
-          [:button.ui__button.m-0.py-1.inline-flex.items-center.bg-red-800
-           {:on-click
+          (ui/button
+           (count checked-page-names)
+           {:icon "trash"
+            :on-click
             (fn []
               (state/set-modal! (page/batch-delete-dialog
                                  (map (fn [name]
                                         (some (fn [w] (when (= (:block/name w) name) w)) whiteboards))
                                       checked-page-names)
-                                 false route-handler/redirect-to-whiteboard-dashboard!)))}
-           [:span.flex.gap-2.items-center
-            [:span.opacity-50 (ui/icon "trash" {:style {:font-size 15}})]
-            (t :delete)
-            [:span.opacity-50
-             (str " · " (count checked-page-names))]]])]
+                                 false route-handler/redirect-to-whiteboard-dashboard!)))}))]
        [:div
         {:ref ref}
         [:div.gap-8.grid.grid-rows-auto

src/main/frontend/extensions/pdf/pdf.css

@@ -375,8 +375,6 @@ input::-webkit-inner-spin-button {
 
         .ui__button {
           margin-top: unset;
-          border-radius: 4px;
-          color: black;
           padding: 4px;
 
           .ti {

src/main/frontend/extensions/pdf/toolbar.cljs

@@ -244,14 +244,30 @@
                            :dune))}]
 
         (when entered-active0?
-          (ui/button (ui/icon "arrow-back") :title "Enter to search" :class "icon-enter" :intent "true" :small? true))]
-
-       (ui/button (ui/icon "letter-case")
-                  :class (string/join " " (util/classnames [{:active case-sensitive?}]))
-                  :intent "true" :small? true :on-click #(set-case-sensitive? (not case-sensitive?)))
-       (ui/button (ui/icon "chevron-up") :intent "true" :small? true :on-click #(do (do-find! {:type :again :prev? true}) (util/stop %)))
-       (ui/button (ui/icon "chevron-down") :intent "true" :small? true :on-click #(do (do-find! {:type :again}) (util/stop %)))
-       (ui/button (ui/icon "x") :intent "true" :small? true :on-click close-finder!)]
+          (ui/button {:icon "arrow-back"
+                      :intent "link"
+                      :title "Enter to search"
+                      :class "icon-enter"
+                      :small? true}))]
+
+       (ui/button {:icon "letter-case"
+                   :intent "link"
+                   :class (string/join " " (util/classnames [{:active case-sensitive?}]))
+                   :small? true :on-click #(set-case-sensitive? (not case-sensitive?))})
+
+       (ui/button {:icon "chevron-up"
+                   :intent "link"
+                   :small? true :on-click #(do (do-find! {:type :again :prev? true}) (util/stop %))})
+
+       (ui/button
+         {:icon "chevron-down"
+          :intent "link"
+          :small? true :on-click #(do (do-find! {:type :again}) (util/stop %))})
+
+       (ui/button
+         {:icon "x"
+          :intent "link"
+          :small? true :on-click close-finder!})]
 
       [:div.result-inner
        (when-let [status (and entered-active?

src/main/frontend/handler/events.cljs

@@ -626,8 +626,7 @@
       (t :yes)
       :autoFocus "on"
       :class "ui__modal-enter"
-      :large? true
-      :on-click (fn []
+       :on-click (fn []
                   (state/close-modal!)
                   (nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]]))
 
@@ -676,7 +675,6 @@
          (t :yes)
          :autoFocus "on"
          :class "ui__modal-enter"
-         :large? true
          :on-click (fn []
                      (state/close-modal!)
                      (state/pub-event! [:graph/re-index])))]])))

src/main/frontend/ui.cljs

@@ -34,7 +34,9 @@
             [lambdaisland.glogi :as log]
             [medley.core :as medley]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [logseq.shui.core :as shui]
+            [frontend.shui :refer [make-shui-context]]))
 
 (declare icon)
 
@@ -1010,56 +1012,38 @@
              :options               {:theme (when (= (state/sub :ui/theme) "dark") "dark")}
              :on-tweet-load-success #(reset! *loading? false)})]]))
 
-(def get-adapt-icon-class
-  (memoize (fn [klass] (r/adapt-class klass))))
-
 (defn tabler-icon
   [name]
   (gobj/get js/tablerIcons (str "Icon" (csk/->PascalCase name))))
 
-(rum/defc icon
-  ([name] (icon name nil))
-  ([name {:keys [extension? font? class] :as opts}]
-   (when-not (string/blank? name)
-     (let [^js jsTablerIcons (gobj/get js/window "tablerIcons")]
-       (if (or extension? font? (not jsTablerIcons))
-         [:span.ui__icon (merge {:class
-                                 (util/format
-                                   (str "%s-" name
-                                        (when (:class opts)
-                                          (str " " (string/trim (:class opts)))))
-                                   (if extension? "tie tie" "ti ti"))}
-                                (dissoc opts :class :extension? :font?))]
-
-         ;; tabler svg react
-         (when-let [klass (tabler-icon name)]
-           (let [f (get-adapt-icon-class klass)]
-             [:span.ui__icon.ti
-              {:class (str "ls-icon-" name " " class)}
-              (f (merge {:size 18} (r/map-keys->camel-case (dissoc opts :class))))])))))))
-
-(rum/defc button
-  [text & {:keys [background href class intent on-click small? large? title icon icon-props disabled?]
-           :or   {small? false large? false}
-           :as   option}]
-  (let [klass (if-not intent ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700.text-center" intent)
-        klass (if background (string/replace klass "indigo" background) klass)
-        klass (if small? (str klass ".is-small") klass)
-        klass (if large? (str klass ".text-base") klass)
-        klass (if disabled? (str klass "disabled:opacity-75") klass)]
-    [:button.ui__button
-     (merge
-      {:type  "button"
-       :title title
-       :disabled disabled?
-       :class (str (util/hiccup->class klass) " " class)}
-      (dissoc option :background :class :small? :large? :disabled?)
-      (when href
-        {:on-click (fn []
-                     (util/open-url href)
-                     (when (fn? on-click) (on-click)))}))
-     (when icon (frontend.ui/icon icon (merge icon-props {:class (when-not (empty? text) "mr-1")})))
-     text]))
+(def icon shui/icon)
+
+(rum/defc button-inner
+  [text & {:keys [background href class intent on-click small? title icon icon-props disabled?]
+           :or   {small? false}}]
+  (let [opts {:text text
+              :theme (when (contains? #{"link" "border-link"} intent) :text)
+              :href href
+              :on-click on-click
+              :size (if small? :sm :md)
+              :icon icon
+              :icon-props icon-props
+              :button-props (when title {:title title})
+              :class (if (= intent "border-link") (str class " border") class)
+              :muted disabled?
+              :disabled? disabled?}]
+    (shui/button (cond->
+                  opts
+                   background
+                   (assoc :color background))
+      (make-shui-context))))
+
+(defn button
+  [text & {:keys []
+           :as opts}]
+  (if (map? text)
+    (button-inner nil text)
+    (button-inner text opts)))
 
 (rum/defc point
   ([] (point "bg-red-600" 5 nil))

src/main/frontend/ui.css

@@ -275,62 +275,6 @@ html.is-mobile {
   }
 }
 
-.ui__button {
-  @apply inline-flex items-center px-3 py-2 border border-transparent
-  text-sm leading-4 font-medium rounded-[6px] text-white
-  focus:outline-none transition ease-in-out duration-150;
-
-  /* background-color: or(--lx-accent-04, --color-indigo-600); */
-  /* color: or(--lx-accent-11, white); */
-  background-color: or(--logseq-og-button-background-color, --lx-accent-07, --color-indigo-600);
-  color: or(--logseq-og-button-text-color, --lx-accent-12, white);
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:hover:not([disabled]) {
-    /* opacity: or(--lx-accent-01, 0.8); */
-    opacity: 1;
-    background-color: or(--logseq-og-button-background-color-hover, --lx-accent-06, --color-indigo-700);
-  }
-
-  &.is-link {
-    @apply text-white;
-  }
-
-  &[intent='logseq'] {
-    @apply focus:border-gray-500 dark:hover:text-gray-200;
-
-    color: or(--logseq-og-notification-clear-button-text, --lx-gray-12, --ls-primary-text-color);
-    background: or(--logseq-og-notification-clear-button-background, --lx-gray-04, --ls-secondary-background-color);
-
-    &:hover {
-      color: or(--logseq-og-notification-clear-button-text-hover, --lx-accent-11, --ls-link-text-color);
-    }
-  }
-
-  &[intent='link'], &[intent='border-link'] {
-    @apply focus:border-gray-500 dark:hover:text-gray-200;
-
-    color: or(--logseq-og-link-text-color, --lx-gray-12, --ls-primary-text-color);
-    background: transparent;
-
-    &:hover {
-      color: or(--logseq-og-link-text-color-hover, --lx-accent-11, --ls-link-text-color);
-    }
-  }
-
-  &[intent='border-link'] {
-    border: 1px solid;
-  }
-
-  &.is-small {
-    @apply px-2.5 py-1;
-  }
-}
-
 .dropdown-wrapper {
   background-color: or(--logseq-og-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
   border: 1px solid or(--logseq-og-dropdown-border-color, --lx-gray-05, --ls-tertiary-background-color);