[error-modal] Add more args

day8 · Jul 23, 2024 · d3ce13d · d3ce13d
1 parent 7342e14
commit d3ce13d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/re_com/error_modal.cljs b/src/re_com/error_modal.cljs
@@ -26,7 +26,8 @@
              implications implications-title
              what-to-do what-to-do-title
              details details-title
-             error error-title
+             error
+             context
              action instructions
              proceedable?
              undone?
@@ -54,11 +55,14 @@
                                "0,0")
         error             (if (string? error)
                             (fn [props] [:div props error]) error)
+        context           (if (string? context)
+                            (fn [props] [:div props context]) context)
         details           (if (string? details)
                             (fn [props] [:div props details]) details)]
     [mp/modal-panel
      (themed ::modal
        {:backdrop-on-click backdrop-on-click
+        :parts {:child-container {:style {:z-index 50}}}
         :child
         [box/v-box
          (themed ::inner-wrapper
@@ -113,13 +117,13 @@
                       [u/part heading (themed ::sub-title {:label what-to-do-title :level :level3}) text/title]
                       [u/part what-to-do args]])]
 
-                  (when (or details error)
+                  (when (or details error context)
                     [:<>
                      [u/part heading
                       (themed ::sub-title {:label details-title :level :level3}) text/title]
                      [u/part details args]
-
-                     #p (u/part error (themed ::error args))])
+                     [u/part error (themed ::error args)]
+                     [u/part context (themed ::context args)]])
 
                   (when footer
                     [u/part footer args])]})]]})]})]))
diff --git a/src/re_com/theme/default.cljs b/src/re_com/theme/default.cljs
@@ -119,7 +119,7 @@
                   :opacity    (when-not (:anchor-top state) 0)
                   :overflow-y "auto"
                   :overflow-x "visible"
-                  :z-index    99999}}
+                  :z-index    30}}
 
          ::nested-grid/cell-grid-container
          {:style {:position        "relative"
@@ -297,14 +297,16 @@
                   :opacity          "50%"}}
 
          ::error-modal/modal
-         {:wrap-nicely? false}
+         {:wrap-nicely? false
+          :style {:z-index 50}}
 
          ::error-modal/inner-wrapper
          {:style {:background-color (:white $)
                   :box-shadow       "2.82843px 2.82843px 4px rgba(1,1,1,0.2)"
                   :font-size        (:font-size/medium $)
                   :min-width        (px 474)
-                  :min-height       (px 300)}}
+                  :min-height       (px 300)
+                  :max-width        (px 525)}}
 
          ::error-modal/title-wrapper
          (let [{:keys [severity]} state]
@@ -334,8 +336,14 @@
 
          ::error-modal/error
          {:style {:font-family "monospace"
-                  :white-space "pre"
-                  :font-size   :font-size/small
+                  :white-space "pre-wrap"
+                  :font-size   :font-size/xx-small
+                  :color       (:neutral $)}}
+
+         ::error-modal/context
+         {:style {:font-family "monospace"
+                  :white-space "pre-wrap"
+                  :font-size   :font-size/xx-small
                   :color       (:neutral $)}}
 
          ::error-modal/body