Merge pull request #57 from ChangePlusPlusVandy/notifications-page

Notifications page

src/layout/App.module.css

@@ -35,3 +35,8 @@
   overflow-x: hidden;
   padding: 4rem 6rem;
 }
+
+.notificationsPage .contentContainer {
+  padding: 0;
+  background: linear-gradient(to bottom, #d3ddf0, #f1f5fb);
+}

src/layout/App.tsx

@@ -2,7 +2,7 @@ import styles from "./App.module.css";
 import SideBar from "./SideBar/Sidebar";
 import { getUserByAirtableRecordId } from "../api/queries";
 import { useUserContext } from "../context/User.context";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
 import { useUser, useAuth } from "@clerk/clerk-react";
 import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
@@ -11,9 +11,13 @@ import type { PassengerData } from "../interfaces/passenger.interface";
 const App = () => {
   const { user } = useUser();
   const navigate = useNavigate();
+  const location = useLocation();
   const { getToken } = useAuth();
   const { currentUser, setCurrentUser } = useUserContext();
 
+  // Notifications logic
+  const isNotificationsPage = location.pathname === "/notifications";
+
   const { data: userData, error } = useQuery({
     queryKey: ["user", user?.id],
     queryFn: async () =>
@@ -38,18 +42,24 @@ const App = () => {
     }
   }, [currentUser]);
 
-  /*useEffect(() => {
-    if (error && !currentUser) {
-      navigate("/onboard");
-    }
-  }, [user, userData]);*/
-
   return (
-    <div className={styles.appContainer}>
+    <div
+      className={`${styles.appContainer} ${
+        isNotificationsPage ? styles.notificationsPage : ""
+      }`}
+    >
       <div className={styles.sideBarContainer}>
         <SideBar />
       </div>
-      <div className={styles.contentContainer}>
+      <div
+        className={styles.contentContainer}
+        style={{
+          background: isNotificationsPage
+            ? "linear-gradient(to bottom, #d3ddf0, #f1f5fb)"
+            : "#ffffff",
+          padding: isNotificationsPage ? "0" : "4rem 6rem",
+        }}
+      >
         {!currentUser ? <div>Loading...</div> : <Outlet />}
       </div>
     </div>

src/pages/NotificationsPage/NotificationsPage.module.css

@@ -0,0 +1,110 @@
+.container {
+  background-color: #ffffff;
+  height: 90%;
+  font-family: Arial, sans-serif;
+  border-radius: 15px;
+  margin-top: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 2.5rem;
+  padding-top: 3rem;
+  box-sizing: border-box;
+}
+
+.headerSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  position: relative;
+}
+
+.toggleSection {
+  position: absolute;
+  top: -20px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 6px;
+}
+
+.toggleSection span {
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+}
+
+.header {
+  font-family: "Inter", sans-serif;
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 36.31px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.subHeader {
+  font-family: "Inter", sans-serif;
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 18.15px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  margin-top: 16px;
+  margin-left: 10px;
+}
+
+.toggleSwitch {
+  position: relative;
+  display: inline-block;
+  width: 82px;
+  height: 43px;
+}
+
+.toggleSwitch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggleSwitch label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 30px;
+  cursor: pointer;
+}
+
+.toggleSwitch label::before {
+  position: absolute;
+  content: "";
+  height: 37px;
+  width: 37px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.4s ease;
+}
+
+.toggleSwitch input:checked + label {
+  background-color: #7096d0;
+}
+
+.toggleSwitch input:checked + label::before {
+  transform: translateX(40px);
+}
+
+.notificationSection {
+  margin-top: 2rem;
+}

src/pages/NotificationsPage/NotificationsPage.tsx

@@ -1,3 +1,36 @@
-export default function NotificationsPage() {
-  return <div>NotificationsPage</div>;
-}
+import styles from "./NotificationsPage.module.css";
+import { useNavigationContext } from "../../context/Navigation.context";
+import { Tabs } from "../../layout/SideBar/SideBar.definitions";
+import React, { useEffect } from "react";
+
+const NotificationsPage = () => {
+  const { setCurrentTab } = useNavigationContext();
+
+  useEffect(() => {
+    setCurrentTab(Tabs.NOTIFICATIONS);
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.headerSection}>
+        <div className={styles.toggleSection}>
+          <span>Enable real-time notifications</span>
+          <div className={styles.toggleSwitch}>
+            <input type="checkbox" id="realTimeToggle" />
+            <label htmlFor="realTimeToggle" />
+          </div>
+        </div>
+
+        <h1 className={styles.header}>Notifications</h1>
+
+        <p className={styles.subHeader}>
+          Stay updated with your latest notifications.
+        </p>
+      </div>
+
+      <div className={styles.notificationsContent} />
+    </div>
+  );
+};
+
+export default NotificationsPage;