Changelog Modal

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 Footer from './component/Footer/Footer';
 import SearchPage from './pages/SearchPage';
 import CoursePage from './pages/CoursePage';
@@ -108,6 +109,7 @@ export default function App() {
             </Routes>
             <Footer />
           </div>
+          <div className="changelog-modal">{<ChangelogModal />}</div>
         </div>
       </ThemeContext.Provider>
     </Router>

site/src/component/ChangelogModal/ChangelogModal.scss

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

site/src/component/ChangelogModal/ChangelogModal.tsx

@@ -0,0 +1,49 @@
+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 (
+    <div onClick={closeModal}>
+      <Modal
+        className="changelog-modal"
+        show={showModal}
+        centered
+        animation={false}
+        onClick={(e: MouseEvent) => e.stopPropagation()}
+      >
+        <Modal.Header closeButton>
+          <h2>What's New - {new Date().toLocaleString('default', { month: 'long', year: 'numeric' })}</h2>
+        </Modal.Header>
+
+        <p className="modal-body">{DESCRIPTION}</p>
+        <img className="modal-img" src={IMAGE_URL} />
+      </Modal>
+    </div>
+  );
+};
+
+export default ChangelogModal;

site/src/pages/RoadmapPage/AddCoursePopup.tsx

@@ -122,7 +122,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">