Fixed up modal Stylings

TritonSE · Feb 18, 2025 · daaf5d9 · daaf5d9
1 parent b6ac0f8
commit daaf5d9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/frontend/src/components/EditBasicInfoModal.css b/frontend/src/components/EditBasicInfoModal.css
@@ -13,31 +13,28 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow-y: auto;
 }
 
 /* Modal Container */
 .modal-container {
   background: white;
-  padding: 1.5rem;
+  padding: 2rem 3rem;
   border-radius: 0.75rem;
   width: 90vw;
-  max-width: 22rem;
-  height: auto;
-  max-height: 56vh;
+  max-width: 500px;
+  height: 80vh;
+  max-height: 500px;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
   position: relative;
   box-sizing: border-box;
-  overflow: auto;
 }
 
 /* Close Button */
 .close-button {
   position: absolute;
-  top: 1.5vw;
-  right: 1.5vw;
+  top: 1.5rem;
+  right: 1.5rem;
 }
 
 /* Heading Style */
@@ -47,13 +44,17 @@ h2 {
   line-height: 1.75rem;
   color: black;
 }
+.modal-header {
+  margin-top: 0.5rem;
+  margin-bottom: 0.8rem;
+}
 
 /* Save Button Container */
 .modal-footer button {
   width: 100%;
   height: 2.25rem;
   background: #2b1d53;
-  border-radius: 0.3125rem;
+  border-radius: 4px;
 }
 
 .modal-footer button:hover {
@@ -67,23 +68,31 @@ h2 {
   color: white;
 }
 
+/* Form */
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  overflow-y: auto;
+}
+
 /* Input Field Sections */
 .inputField {
-  margin-top: 0.5rem;
-  width: 100%;
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .inputField label {
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.25rem;
   color: black;
+  margin-bottom: 0.5rem;
 }
 
 .inputField input {
   width: 100%;
-  height: 2rem;
+  height: 2.2rem;
   border-radius: 0.3125rem;
   border: 1px solid grey;
   color: black;

diff --git a/frontend/src/components/EditBasicInfoModal.tsx b/frontend/src/components/EditBasicInfoModal.tsx
@@ -60,12 +60,12 @@ export const EditBasicInfoModal = ({
   return isOpen ? (
     <div className="modal-overlay">
       <div className="modal-container">
-        <div className="modal-header">
-          <h2> Edit Basic Info</h2>
-        </div>
         <button className="close-button" onClick={onClose}>
           <Image src={ExitButtonSrc} alt="Exit" />
         </button>
+        <div className="modal-header">
+          <h2> Edit Basic Info</h2>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault();