modal feature

oss-slu · Nov 16, 2024 · 2eae705 · 2eae705
1 parent 264340c
commit 2eae705
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 33 deletions.
diff --git a/client-app/src/components/DraftOrcaDashboard.js b/client-app/src/components/DraftOrcaDashboard.js
@@ -329,19 +329,21 @@ const DraftOrcaDashboard = () => {
           </button>
         </div>    
         {showPreviewModal && (
-          <div className="card mt-3">
-            <div className="card-body">
-              <h5 className="card-title">Document Preview</h5>
-              <div className="preview-box">
-                <pre>{previewContent}</pre>
-              </div>
-              <div className="d-flex justify-content-end">
-                <button
-                  className="btn btn-danger"
-                  onClick={() => setShowPreviewModal(false)}
-                >
-                  Close
-                </button>
+          <div className="modal" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }}>
+            <div className="modal-dialog">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <h5 className="modal-title">Document Preview</h5>
+                  <button type="button" className="btn-close" aria-label="Close" onClick={() => setShowPreviewModal(false)}></button>
+                </div>
+                <div className="modal-body">
+                  <pre>{previewContent}</pre>
+                </div>
+                <div className="modal-footer">
+                  <button className="btn btn-secondary" onClick={() => setShowPreviewModal(false)}>
+                    Close
+                  </button>
+                </div>
               </div>
             </div>
           </div>

diff --git a/client-app/src/styles/TempComponent.css b/client-app/src/styles/TempComponent.css
@@ -17,26 +17,57 @@ span {
   margin-bottom: 10px;
 }
 
-.card {
-    max-height: 400px; /* Limit the card height */
-    overflow-y: auto;  /* Allow scrolling if content overflows */
-    margin-bottom: 20px; /* Adjust bottom margin for spacing */
-  }
-
-  .card-body {
-    padding: 15px; /* Reduce padding to make it less bulky */
-  }
-
-  .card-title {
-    font-size: 1.25rem; /* Adjust font size */
-    margin-bottom: 10px; /* Adjust spacing */
-  }
-
-  .card-text {
-    font-size: 1rem; /* Adjust font size */
-    margin-bottom: 8px; /* Adjust spacing */
-  }
-
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  display: none;
+  overflow: hidden;
+  outline: 0;
+}
+
+.modal-dialog {
+  position: relative;
+  margin: auto;
+  max-width: 500px;
+  z-index: 1055;
+}
+
+.modal-content {
+  position: relative;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.3rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  padding: 1rem;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.modal-title {
+  margin-bottom: 0;
+  font-size: 1.25rem;
+}
+
+.modal-body {
+  position: relative;
+  padding: 1rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #dee2e6;
+}
 
 /* :host ::ng-deep .custom-ms 
         .p-multiselect-label {