postgresml · chillenberger · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023
diff --git a/pgml-dashboard/src/components/modal/mod.rs b/pgml-dashboard/src/components/modal/mod.rs
@@ -9,14 +9,18 @@ pub struct Modal {
     pub size_class: String,
     pub header: Option<Component>,
     pub body: Component,
+    pub default_style: bool,
 }
 
 component!(Modal);
 
 impl Modal {
     //github.com/ Create a new x-large modal with the given body.
     pub fn new(body: Component) -> Self {
-        let modal = Modal::default();
+        let modal = Modal {
+            default_style: true,
+            ..Modal::default()
+        };
         let id = format!("modal-{}", crate::utils::random_string(10));
 
         modal.id(&id).body(body).xlarge()
@@ -45,6 +49,20 @@ impl Modal {
         self.header = Some(header);
         self
     }
+
+    // Quick implimitation to toggle the modal
+    pub fn toggle(id: &str) -> String {
+        format!(r#"data-bs-toggle="modal" data-bs-target="{}{}""#, "#", id)
+    }
+
+    pub fn dismiss() -> String {
+        r#"data-bs-dismiss="modal""#.into()
+    }
+
+    pub fn no_default_style(mut self) -> Modal {
+        self.default_style = false;
+        self
+    }
 }
 
 #[cfg(test)]

diff --git a/pgml-dashboard/src/components/modal/modal.scss b/pgml-dashboard/src/components/modal/modal.scss
@@ -1,7 +1,8 @@
-.modal {
+div[data-controller="modal"].modal {
     --bs-modal-margin: 1.65rem;
     --bs-modal-header-padding: 0;
     --bs-modal-width: 75vw;
+    --bs-modal-padding: 40px;
 
     @include media-breakpoint-up(lg) {
         --bs-modal-width: 40rem;
@@ -29,4 +30,17 @@
         width: 100%;
         display: flex;
     }
+
+    .modal-body {
+        margin-top: 3rem;
+        background-color: #{$gray-600};
+        border: 2px solid #{$gray-100}; 
+        border-radius: $border-radius;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
 }
diff --git a/pgml-dashboard/src/components/modal/template.html b/pgml-dashboard/src/components/modal/template.html
@@ -1,15 +1,13 @@
-<div class="modal <%- size_class %>" id="<%= id %>" data-controller="modal" tabindex="-1" aria-modal="true" role="dialog" data-modal-target="modal">
+<div class="modal <%- size_class %>" id="<%= id %>" data-controller="modal" tabindex="-1" aria-modal="true" role="dialog" data-modal-target="modal" >
   <div class="modal-dialog">
     <div class="modal-content">
       <% if let Some(header) = header { %>
         <div class="modal-header">
           <%+ header %>
         </div>
       <% } %>
-      <div class="modal-body">
-        <div class="w-100 h-100 mt-5 py-5 px-3 d-flex flex-column justify-content-center align-items-center" style="background: black; border: 2px solid white; border-radius: 12px;">
-            <%+ body %>
-        </div>
+      <div <% if default_style { %>class="modal-body" <% } %>>
+          <%+ body %>
       </div>
     </div>
   </div>