Start modal changes

csmberkeley · Aug 9, 2023 · 085b74c · 085b74c
1 parent 2009224
commit 085b74c
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 62 deletions.
diff --git a/csm_web/frontend/src/components/Modal.tsx b/csm_web/frontend/src/components/Modal.tsx
@@ -1,5 +1,8 @@
 import React, { useContext } from "react";
 
+// Images
+import XIcon from "../../static/frontend/img/x.svg";
+
 const ModalContext = React.createContext(Function.prototype);
 
 interface ModalProps {
@@ -17,14 +20,12 @@ export default function Modal({ children, closeModal, className = "" }: ModalPro
     <ModalContext.Provider value={closeModal}>
       <div className="modal-overlay" onClick={closeModal} />
       <div className={`modal ${className}`}>
-        <div className="modal-contents">
-          <div className="modal-close-x">
-            <button className="inline-plus-sign" aria-label="close" onClick={closeModal}>
-              <span>&times;</span>
-            </button>
-          </div>
-          {children}
+        <div className="modal-close-container">
+          <button className="modal-close-x inline-plus-sign" aria-label="close" onClick={closeModal}>
+            <XIcon className="icon" />
+          </button>
         </div>
+        <div className="modal-contents">{children}</div>
       </div>
     </ModalContext.Provider>
   );

diff --git a/csm_web/frontend/src/components/course/SectionCard.tsx b/csm_web/frontend/src/components/course/SectionCard.tsx
@@ -90,24 +90,24 @@ export const SectionCard = ({
     const iconHeight = "8em";
     if (enrollmentSuccessful) {
       return (
-        <React.Fragment>
+        <div className="enroll-confirm-modal-contents">
           <CheckCircle height={iconHeight} width={iconWidth} />
           <h3>Successfully enrolled</h3>
           <ModalCloser>
-            <button className="modal-btn">OK</button>
+            <button className="primary-btn">OK</button>
           </ModalCloser>
-        </React.Fragment>
+        </div>
       );
     }
     return (
-      <React.Fragment>
+      <div className="enroll-confirm-modal-contents">
         <XCircle color="#eb6060" height={iconHeight} width={iconWidth} />
         <h3>Enrollment failed</h3>
         <h4>{errorMessage}</h4>
         <ModalCloser>
-          <button className="modal-btn">OK</button>
+          <button className="primary-btn">OK</button>
         </ModalCloser>
-      </React.Fragment>
+      </div>
     );
   };
 
@@ -129,7 +129,7 @@ export const SectionCard = ({
 
   return (
     <React.Fragment>
-      {showModal && <Modal closeModal={closeModal}>{modalContents().props.children}</Modal>}
+      {showModal && <Modal closeModal={closeModal}>{modalContents()}</Modal>}
       <section className={`section-card ${isFull ? "full" : ""}`}>
         <div className="section-card-contents">
           {description && <span className="section-card-description">{description}</span>}

diff --git a/csm_web/frontend/src/components/course/SettingsModal.tsx b/csm_web/frontend/src/components/course/SettingsModal.tsx
@@ -106,7 +106,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
           </div>
         </div>
         <div className="course-settings-footer">
-          <button className="csm-btn course-settings-submit" type="button" onClick={submitSettings}>
+          <button className="primary-btn course-settings-submit" type="button" onClick={submitSettings}>
             Submit
           </button>
         </div>

diff --git a/csm_web/frontend/static/frontend/css/base/_variables.scss b/csm_web/frontend/static/frontend/css/base/_variables.scss
@@ -37,3 +37,6 @@ $default-font: "Montserrat", sans-serif;
 $day-btn-size: 70px;
 $arrow-size: 8px;
 $button-icon-gap: 4px;
+
+/** Height of the top close bar. */
+$modal-close-height: 2em;
diff --git a/csm_web/frontend/static/frontend/css/base/modal.scss b/csm_web/frontend/static/frontend/css/base/modal.scss
@@ -1,19 +1,11 @@
 /* Modal styling */
 
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 600px;
-  max-width: 90vw;
-  height: 400px;
-  max-height: 90vh;
-  z-index: 1000;
-  background-color: white;
-  border-radius: 20px;
-}
+@use "variables" as *;
+@use "button";
 
+/**
+ * Overlay for the modal window; grays out the screen behind the modal.
+ */
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -25,54 +17,74 @@
   background: rgba(0, 0, 0, 0.6);
 }
 
+/**
+ * Modal container; controls the positioning within the screen.
+ */
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 90vw;
+  max-height: 90vh;
+  width: max-content;
+  height: max-content;
+  z-index: 1000;
+  background-color: white;
+  border-radius: 20px;
+}
+
+/**
+ * Contents of the modal; all children are put into this container.
+ */
 .modal-contents {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: calc(100% - 40px);
   height: calc(100% - 40px);
   padding: 20px;
   overflow: auto;
 }
 
-.modal-contents svg {
-  display: block;
-  margin: auto;
-}
-
-.modal-contents h3 {
-  text-align: center;
-  color: #808080;
-  font-size: 2em;
-}
-
-.modal-contents h4 {
-  text-align: center;
-  margin: auto;
-  max-width: 75%;
-}
-
-.modal-close {
-  all: unset;
-}
+// .modal-contents svg {
+//   display: block;
+//   margin: auto;
+// }
+//
+// .modal-contents h3 {
+//   text-align: center;
+//   color: #808080;
+//   font-size: 2em;
+// }
+//
+// .modal-contents h4 {
+//   text-align: center;
+//   margin: auto;
+//   max-width: 75%;
+// }
 
-.modal-close-x {
+/**
+ * Top bar in the modal that contains the close button.
+ */
+.modal-close-container {
   position: sticky;
   display: flex;
-  top: -10px;
-  margin-top: -10px;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 6px;
+
+  height: $modal-close-height;
 }
 
-.modal-close-x > button {
-  background: none;
+.modal-close-x {
   border: none;
+  outline: none;
   cursor: pointer;
-  margin-left: auto;
-}
+  user-select: none;
+  background-color: inherit;
+  color: black;
 
-.modal-close-x > button > span {
-  display: inline-block;
-  color: #575757;
+  &:hover {
+    color: gray;
+  }
 }
 
 .modal-btn {

diff --git a/csm_web/frontend/static/frontend/css/course.scss b/csm_web/frontend/static/frontend/css/course.scss
@@ -74,6 +74,14 @@
   padding: 2px 5px;
 }
 
+.enroll-confirm-modal-contents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
 #day-selector {
   display: grid;
   grid-template-columns: repeat(auto-fit, $day-btn-size);

diff --git a/csm_web/frontend/static/frontend/css/section.scss b/csm_web/frontend/static/frontend/css/section.scss
@@ -83,7 +83,7 @@
 .drop-confirmation h5 {
   font-size: 25px;
   color: #727070;
-  margin: 30px auto 0.5rem;
+  margin: 0 auto 0.5rem;
 }
 
 .drop-confirmation p {