fix: move tailwind ui buttons to the new button

src/main/frontend/components/commit.cljs

@@ -8,7 +8,8 @@
             [goog.dom :as gdom]
             [goog.object :as gobj]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [logseq.shui.core :as shui]))
 
 (defn- commit-all!
   []
@@ -63,11 +64,10 @@
           [:h3#modal-headline.text-lg.leading-6.font-medium
            "No changes to commit!"]]]
         [:div.mt-5.sm:mt-4.flex
-         [:span.flex.w-full.rounded-md.shadow-sm
-          [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-           {:type "button"
-            :on-click #(state/close-modal!)}
-           "Close"]]]]
+         (shui/button
+          {:text "Close"
+           :on-click state/close-modal!}
+          (shui/make-context))]]
 
        [:<>
         [:div.sm:flex.sm:items-start
@@ -82,11 +82,10 @@
          {:auto-focus true
           :default-value ""}]
         [:div.mt-5.sm:mt-4.flex
-         [:span.flex.w-full.rounded-md.shadow-sm
-          [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-           {:type "button"
-            :on-click commit-all!}
-           "Commit"]]]])]))
+         (shui/button
+           {:text "Commit"
+           :on-click commit-all!}
+          (shui/make-context))]])]))
 
 (defn show-commit-modal! [e]
   (state/set-modal! add-commit-message)

src/main/frontend/components/git.cljs

@@ -34,17 +34,15 @@
       {:on-change (fn [e]
                     (reset! email (util/evalue e)))}]
 
-     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-      [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :on-click (fn []
+     [:div.mt-5.sm:mt-4.flex
+      (ui/button
+        "Submit"
+        {:on-click (fn []
                      (let [username @username
                            email @email]
                        (when (and (not (string/blank? username))
                                   (not (string/blank? email)))
-                         (shell/set-git-username-and-email username email))))}
-        "Submit"]]]]))
+                         (shell/set-git-username-and-email username email))))})]]))
 
 (rum/defc file-specific-version
   [path hash content]

src/main/frontend/components/page.cljs

@@ -867,22 +867,21 @@
           (when-not orphaned-pages? [:td.created-at [:span (if created-at (date/int->local-time-2 created-at) "Unknown")]])
           (when-not orphaned-pages? [:td.updated-at [:span (if updated-at (date/int->local-time-2 updated-at) "Unknown")]])])]]
 
-     [:div.pt-6.flex.justify-end
-
-      [:span.pr-2
-       (ui/button
-         (t :cancel)
-         :intent "logseq"
-         :on-click close-fn)]
+     [:div.pt-6.flex.justify-end.gap-4
 
       (ui/button
-        (t :yes)
-        :on-click (fn []
-                    (close-fn)
-                    (doseq [page-name (map :block/name pages)]
-                      (page-handler/delete! page-name #()))
-                    (notification/show! (t :tips/all-done) :success)
-                    (js/setTimeout #(refresh-fn) 200)))]]))
+       (t :cancel)
+       :theme :gray
+       :on-click close-fn)
+
+      (ui/button
+       (t :yes)
+       :on-click (fn []
+                   (close-fn)
+                   (doseq [page-name (map :block/name pages)]
+                     (page-handler/delete! page-name #()))
+                   (notification/show! (t :tips/all-done) :success)
+                   (js/setTimeout #(refresh-fn) 200)))]]))
 
 (rum/defc pagination
   "Pagination component, like `<< <Prev 1/10 Next> >>`.

src/main/frontend/components/page_menu.cljs

@@ -40,19 +40,17 @@
        [:h3#modal-headline.text-lg.leading-6.font-medium
         (t :page/delete-confirmation)]]]
 
-     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-      [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :class "ui__modal-enter"
-         :on-click (fn []
-                     (delete-page! page-name))}
-        (t :yes)]]
-      [:span.mt-3.flex.w-full.rounded-md.shadow-sm.sm:mt-0.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :on-click close-fn}
-        (t :cancel)]]]]))
+     [:div.mt-5.sm:mt-4.flex.gap-4
+      (ui/button
+       (t :cancel)
+       {:theme :gray
+        :on-click close-fn})
+      (ui/button
+       (t :yes)
+       {:class "ui__modal-enter"
+        :on-click (fn []
+                    (delete-page! page-name))
+        :button-props {:autoFocus "on"}})]]))
 
 (defn ^:large-vars/cleanup-todo page-menu
   [page-name]

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

@@ -17,7 +17,8 @@
             [frontend.util :as util]
             [medley.core :as medley]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.ui :as ui]))
 
 (declare pdf-container system-embed-playground)
 
@@ -844,14 +845,12 @@
        :on-change (fn [e]
                     (reset! password (util/evalue e)))}]
 
-     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-      [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :on-click (fn []
+     [:div.mt-5.sm:mt-4.flex
+      (ui/button
+        "Submit"
+        {:on-click (fn []
                      (let [password @password]
-                       (confirm-fn password)))}
-        "Submit"]]]]))
+                       (confirm-fn password)))})]]))
 
 (rum/defc ^:large-vars/data-var pdf-loader
   [{:keys [url hls-file identity filename] :as pdf-current}]

src/main/frontend/ui.cljs

@@ -242,6 +242,7 @@
          wrapper-children)))
    opts))
 
+(declare button)
 (rum/defc notification-content
   [state content status uid]
   (when (and content status)
@@ -275,18 +276,19 @@
                                             :overflow-x "hidden"}}
          [:div.p-4
           [:div.flex.items-start
-           [:div.flex-shrink-0
+           [:div.flex-shrink-0.pt-2
             svg]
-           [:div.ml-3.w-0.flex-1
+           [:div.ml-3.w-0.flex-1.pt-2
             [:div.text-sm.leading-5.font-medium.whitespace-pre-line {:style {:margin 0}}
              content]]
-           [:div.ml-4.flex-shrink-0.flex
-            [:button.inline-flex.text-gray-400.focus:outline-none.focus:text-gray-500.transition.ease-in-out.duration-150.notification-close-button
-             {:aria-label "Close"
-              :on-click (fn []
-                          (notification/clear! uid))}
-
-             (icon "x" {:fill "currentColor"})]]]]]]])))
+           [:div.flex-shrink-0.flex {:style {:margin-top -9
+                                             :margin-right -18}}
+            (button
+              {:button-props {:aria-label "Close"}
+               :intent "link"
+               :on-click (fn []
+                           (notification/clear! uid))
+               :icon "x"})]]]]]])))
 
 (declare button)
 
@@ -691,21 +693,18 @@
              (t sub-title)
              sub-title)]]]]
 
-       [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-        [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-         [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-          {:type     "button"
-           :autoFocus "on"
-           :class "ui__modal-enter"
+       [:div.mt-5.sm:mt-4.flex.gap-4
+        (button
+          (t :cancel)
+          {:theme :gray
+           :on-click (comp on-cancel close-fn)})
+        (button
+          (t :yes)
+          {:class "ui__modal-enter"
            :on-click #(and (fn? on-confirm)
                            (on-confirm % {:close-fn close-fn
-                                          :sub-selected (and *sub-checkbox-selected @*sub-checkbox-selected)}))}
-          (t :yes)]]
-        [:span.mt-3.flex.w-full.rounded-md.shadow-sm.sm:mt-0.sm:w-auto
-         [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-          {:type     "button"
-           :on-click (comp on-cancel close-fn)}
-          (t :cancel)]]]])))
+                                          :sub-selected (and *sub-checkbox-selected @*sub-checkbox-selected)}))
+           :button-props {:autoFocus "on"}})]])))
 
 (rum/defc sub-modal < rum/reactive
   []
@@ -1008,11 +1007,11 @@
 (def icon shui/icon)
 
 (rum/defc button-inner
-  [text & {:keys [background href class intent on-click small? icon icon-props disabled? button-props]
+  [text & {:keys [theme background href class intent on-click small? icon icon-props disabled? button-props]
            :or   {small? false}
            :as   option}]
   (let [opts {:text text
-              :theme (when (contains? #{"link" "border-link"} intent) :text)
+              :theme (or (when (contains? #{"link" "border-link"} intent) :text) theme)
               :href href
               :on-click on-click
               :size (if small? :sm :md)