enhance(ui): refactor classic login modal with the shui dialog

src/main/frontend/components/user/login.cljs

@@ -1,5 +1,8 @@
 (ns frontend.components.user.login
-  (:require [rum.core :as rum]
+  (:require [clojure.string :as string]
+            [logseq.shui.ui :as shui]
+            [rum.core :as rum]
+            [dommy.core :refer-macros [sel]]
             [frontend.rum :refer [adapt-class]]
             [frontend.modules.shortcut.core :as shortcut]
             [frontend.handler.user :as user]
@@ -79,9 +82,10 @@
 
 (defn open-login-modal!
   []
-  (state/set-modal!
+  (shui/dialog-open!
     (fn [_close] (page))
-    {:close-btn?      true
-     :label           "user-login"
-     :close-backdrop? false
-     :center?         false}))
+    {:label "user-login"
+     :content-props {:onPointerDownOutside #(let [inputs (sel "form[data-amplify-form] input:not([type=checkbox])")
+                                                  inputs (some->> inputs (map (fn [^js e] (.-value e))) (remove string/blank?))]
+                                              (when (seq inputs)
+                                                (.preventDefault %)))}}))

src/main/frontend/components/user/login.css

@@ -51,15 +51,10 @@
   }
 }
 
-.ui__modal[label=user-login] {
-  @apply flex items-center top-0;
+.ui__dialog-content[label=user-login] {
+  @apply flex items-center top-0 p-0 border-none w-auto;
 
-  .ui__modal-panel {
-    transition: transform .3s;
-    transform: translateY(-50px);
-  }
-
-  .panel-content {
+  .ui__dialog-main-content {
     @apply p-0 min-w-fit relative max-w-[600px] sm:max-w-[90vw] sm:w-[500px];
   }