feat: refine modals styles and integrate overlays changes

3 files changed, 18 insertions, 10 deletions

diff --git a/src/frontend/tubo/modals/events.cljs b/src/frontend/tubo/modals/events.cljs
index 971fcac..d947ce8 100644
--- a/src/frontend/tubo/modals/events.cljs
+++ b/src/frontend/tubo/modals/events.cljs
@@ -32,12 +32,20 @@
                      [:modals/delete
                       (-> (:modals db)
                           last
-                          :id)]]]
+                          :id)]]
+                    (when (<= (count (:modals db)) 1)
+                      [:dispatch
+                       [:layout/hide-bg-overlay]])]
     :body-overflow false}))
 
 (rf/reg-event-fx
  :modals/open
  (fn [_ [_ child]]
    {:fx            [[:dispatch
-                     [:modals/add {:show? true :child child :id (nano-id)}]]]
+                     [:modals/add {:show? true :child child :id (nano-id)}]]
+                    [:dispatch
+                     [:layout/show-bg-overlay
+                      {:extra-classes ["z-30"]
+                       :on-click      #(rf/dispatch [:modals/close])}
+                      true]]]
     :body-overflow true}))
diff --git a/src/frontend/tubo/modals/views.cljs b/src/frontend/tubo/modals/views.cljs
index 69ccd85..af05fce 100644
--- a/src/frontend/tubo/modals/views.cljs
+++ b/src/frontend/tubo/modals/views.cljs
@@ -17,15 +17,14 @@
       [layout/primary-button "Ok" #(rf/dispatch [:modals/close])])]])
 
 (defn modal-panel
-  [{:keys [child show?]}]
-  [:div.fixed.flex.flex-col.items-center.justify-center.w-full.z-30.top-0
-   {:class ["min-h-[100dvh]" "h-[100dvh]"]}
-   [layout/focus-overlay #(rf/dispatch [:modals/close]) show?]
-   [:div.flex.items-center.justify-center.flex-auto.shrink-0.w-full.max-h-full.p-5
-    {:class ["sm:w-3/4" "md:w-3/5" "lg:w-1/2" "xl:w-1/3"]}
+  [{:keys [child]}]
+  [:div.fixed.z-30.flex.flex-col.items-center.justify-center
+   {:class ["top-1/2" "left-1/2" "-translate-x-1/2" "-translate-y-1/2"
+            "w-4/5" "sm:w-3/4" "md:w-3/5" "lg:w-1/2" "xl:w-1/3"]}
+   [:div.w-full.max-h-full
     child]])
 
-(defn modal
+(defn modals-container
   []
   (fn []
     (let [modals        @(rf/subscribe [:modals])
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index 074596e..7ccce0d 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -13,7 +13,6 @@
   []
   (let [current-match @(rf/subscribe [:navigation/current-match])
         dark-theme?   @(rf/subscribe [:dark-theme])]
-      [modals/modal]
     [:div
      {:class    (when dark-theme? :dark)
       :on-click #(rf/dispatch [:layout/destroy-tooltips-on-click-out
@@ -21,6 +20,8 @@
      [:div.font-nunito-sans.min-h-screen.h-full.relative.flex.flex-col.dark:text-white.bg-neutral-100.dark:bg-neutral-900.z-10
       [layout/background-overlay]
       [layout/mobile-tooltip]
+      [modals/modals-container]
+      [navigation/mobile-menu current-match]
       [navigation/navbar current-match]
       [notifications/notifications-panel]
       [:div.flex.flex-col.flex-auto.justify-between.relative