diff --git a/frontend/src/components/EditBasicInfoModal.css b/frontend/src/components/EditBasicInfoModal.css index 07fb6df..6101e1f 100644 --- 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,11 +68,18 @@ 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 { @@ -79,11 +87,12 @@ h2 { 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 index 51e085a..efcaa41 100644 --- a/frontend/src/components/EditBasicInfoModal.tsx +++ b/frontend/src/components/EditBasicInfoModal.tsx @@ -60,12 +60,12 @@ export const EditBasicInfoModal = ({ return isOpen ? (