Changelog Modal (#440)

* draft

* css mobile resolution

* placeholder content

* updated style

* track last update

* lint

* Update site/src/component/ChangelogModal/ChangelogModal.tsx

Co-authored-by: Jacob Sommer <[email protected]>

* Update site/src/component/ChangelogModal/ChangelogModal.scss

Co-authored-by: Jacob Sommer <[email protected]>

* Update site/src/component/ChangelogModal/ChangelogModal.tsx

Co-authored-by: Jacob Sommer <[email protected]>

* lint

* comment out

* comment out

* lint

---------

Co-authored-by: Jacob Sommer <[email protected]>

Author: ptruong0

site/src/App.tsx

@@ -7,6 +7,7 @@ import './style/theme.scss';
 import './App.scss';
 
 import AppHeader from './component/AppHeader/AppHeader';
+// import ChangelogModal from './component/ChangelogModal/ChangelogModal';
 import SearchPage from './pages/SearchPage';
 import CoursePage from './pages/CoursePage';
 import ProfessorPage from './pages/ProfessorPage';
@@ -106,6 +107,7 @@ export default function App() {
               <Route path="*" element={<ErrorPage />} />
             </Routes>
           </div>
+          {/* <div className="changelog-modal">{<ChangelogModal />}</div> */}
         </div>
       </ThemeContext.Provider>
     </Router>

site/src/component/ChangelogModal/ChangelogModal.scss

@@ -0,0 +1,42 @@
+.changelog-modal {
+  .modal-content {
+    border: none;
+    background-color: var(--overlay2);
+    padding: 4px 8px 8px;
+  }
+
+  .modal-header {
+    align-items: center;
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  h2 {
+    margin-bottom: 0;
+    font-size: 1.8rem;
+    font-weight: 600;
+  }
+
+  .modal-body {
+    font-size: 1.2rem;
+    margin: 0;
+  }
+
+  .modal-img {
+    margin: 1rem;
+    max-width: 70vw;
+    max-height: 50vh;
+    object-fit: contain;
+  }
+
+  button.close {
+    font-size: 32px;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .modal-img {
+      max-width: 90vw;
+      max-height: 50vh;
+    }
+  }
+}

site/src/component/ChangelogModal/ChangelogModal.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import './ChangelogModal.scss';
+import Modal from 'react-bootstrap/Modal';
+
+const DESCRIPTION = 'You can now view recently added features to the PeterPortal website, listed in this modal.';
+const IMAGE_URL =
+  'https://media.tenor.com/ufm_0t3ACEAAAAAM/ginger-cat-ginger-cat-eating-then-staring-at-the-camera.gif';
+const LAST_UPDATED = '02/27/2024';
+
+const ChangelogModal = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    // display the changelog modal if it is the user's first time seeing it (tracked in local storage)
+    const lastSeen = localStorage.getItem('changelogSeen');
+
+    if (lastSeen !== LAST_UPDATED) {
+      setShowModal(true);
+
+      // mark as seen so it is not displayed after seeing it once
+      localStorage.setItem('changelogSeen', LAST_UPDATED);
+    }
+  }, []);
+
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <Modal className="changelog-modal" show={showModal} centered onHide={closeModal}>
+      <Modal.Header closeButton>
+        <h2>What's New - {new Date(LAST_UPDATED).toLocaleString('default', { month: 'long', year: 'numeric' })}</h2>
+      </Modal.Header>
+
+      <p className="modal-body">{DESCRIPTION}</p>
+      <img className="modal-img" src={IMAGE_URL} alt="Screenshot or gif of new changes" />
+    </Modal>
+  );
+};
+
+export default ChangelogModal;

site/src/pages/RoadmapPage/AddCoursePopup.tsx

@@ -121,7 +121,7 @@ const AddCoursePopup: FC<AddCoursePopupProps> = () => {
               );
             })}
           </Form.Control>
-          <Form.Control.Feedback type="invalid">Missing qurter</Form.Control.Feedback>
+          <Form.Control.Feedback type="invalid">Missing quarter</Form.Control.Feedback>
         </Form.Group>
       )}
       <div className="d-flex justify-content-end">