From 6276781dd35fd0903df9501d692e910b1ae7fd7b Mon Sep 17 00:00:00 2001
From: Daehee Han <handh1212@tamu.edu>
Date: Fri, 1 Dec 2023 11:32:28 -0600
Subject: [PATCH] design fix for edit in mycases

---
 app/static/css/homepage.css |  1 -
 app/templates/my_cases.html | 93 +++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css
index 03cbf82..a4d9c96 100644
--- a/app/static/css/homepage.css
+++ b/app/static/css/homepage.css
@@ -137,7 +137,6 @@ tr:nth-child(even) {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background: rgba(102, 36, 132, 0.8);
 	transition: opacity 500ms;
 	visibility: hidden;
 	opacity: 0;
diff --git a/app/templates/my_cases.html b/app/templates/my_cases.html
index 1a1dfcb..81d96a5 100644
--- a/app/templates/my_cases.html
+++ b/app/templates/my_cases.html
@@ -101,53 +101,58 @@ <h3>Case Number: {{ case.customer_id }}</h3>
 
     <div class="modal fade" id="editModal">
         <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="assignModalLabel">Edit Case</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-            <div class="form-group">
+            <div class="overlay">
                 <div class="wrapper">
-                    <h5 id="editIdHeader"></h5>                    
-                    <label for="editFirstName">First Name:</label><span id="editFirstName"></span><br/>
-                    <label for="editLastName">Last Name:</label> <span  id="editLastName"></span><br/>
-                    <label for="editNumChildren">No. of Children:</label><span id="editNumChildren"></span><br/>
-                    <label for="editOutreachDate">Outreach Date:</label><span id="editOutreachDate"></span><br/>
-                    <label for="editPacketReturnStatus">Packet Return Status:</label>
-                    <select class="form-control" id="editPacketReturnStatus"></select>        
-                    <div class="edit-group-user">
-                        <label for="editDecision">Decision:</label>
-                        <select class="form-control" id="editDecision"></select>
-                        <label for="editNumChildrenEnrolled">No. of Children Enrolled</label><input id="editNumChildrenEnrolled" type="number" value=""/>
-                        <label for="editPacketReceivedDate">Packet Received Date:</label>
-                        <div class="input-group">
-                            <input type="text" class="form-control datepicker" id="editPacketReceivedDate" value="">
-                            <div class="input-group-append">
-                                <span class="input-group-text">
-                                <i class="fas fa-calendar-alt"></i>
-                                </span>
-                            </div>
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="assignModalLabel">Edit Case</h5>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
                         </div>
-                        <label for="editDecisionDate">Decision Date:</label>
-                        <div class="input-group">
-                            <input type="text" class="form-control datepicker" id="editDecisionDate" value="">
-                            <div class="input-group-append">
-                                <span class="input-group-text">
-                                <i class="fas fa-calendar-alt"></i>
-                                </span>
+                        <div class="form-group">
+                            <h5 id="editIdHeader"></h5>
+                            <div class="popupContent">               
+                                <label for="editFirstName">First Name:</label><span id="editFirstName"></span><br/>
+                                <label for="editLastName">Last Name:</label> <span  id="editLastName"></span><br/>
+                                <label for="editNumChildren">No. of Children:</label><span id="editNumChildren"></span><br/>
+                                <label for="editOutreachDate">Outreach Date:</label><span id="editOutreachDate"></span><br/>
+                                <label for="editPacketReturnStatus">Packet Return Status:</label>
+                                <select class="form-control" id="editPacketReturnStatus"></select>        
+                                <div class="edit-group-user">
+                                    <label for="editDecision">Decision:</label>
+                                    <select class="form-control" id="editDecision"></select>
+                                    <label for="editNumChildrenEnrolled">No. of Children Enrolled</label><input id="editNumChildrenEnrolled" type="number" value=""/>
+                                    <label for="editPacketReceivedDate">Packet Received Date:</label>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control datepicker" id="editPacketReceivedDate" value="">
+                                        <div class="input-group-append">
+                                            <span class="input-group-text">
+                                            <i class="fas fa-calendar-alt"></i>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <label for="editDecisionDate">Decision Date:</label>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control datepicker" id="editDecisionDate" value="">
+                                        <div class="input-group-append">
+                                            <span class="input-group-text">
+                                            <i class="fas fa-calendar-alt"></i>
+                                            </span>
+                                        </div>
+                                    </div>               
+                                    <input type="hidden" id="editCaseId" name="case_id" value="">
+                                    <label for="editNotEnrolledReason">Not Enrolled Reason</label>
+                                    <br>
+                                    <input id="editNotEnrolledReason" value=""/>    
+                                </div>
                             </div>
-                        </div>               
-                        <input type="hidden" id="editCaseId" name="case_id" value="">
-                        <label for="editNotEnrolledReason">Not Enrolled Reason</label>
-                        <br>
-                        <input id="editNotEnrolledReason" value=""/>    
-                    </div>
-                    <div class="modal-footer">
-                        <div id="errorBox" class="alert alert-danger" style="display: none;"></div>
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <button type="button" class="btn btn-primary" id="editSubmit">Save Case</button>
+                            <div class="modal-footer">
+                                <div id="errorBox" class="alert alert-danger" style="display: none;"></div>
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                <button type="button" class="btn btn-primary" id="editSubmit">Save Case</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>