Profile Settings UI

client/package.json

@@ -8,6 +8,7 @@
     "axios": "^1.7.9",
     "highlight.js": "^11.11.1",
     "katex": "^0.16.21",
+    "lucide-react": "^0.487.0",
     "mongodb": "6.12.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

client/src/components/main/homePage/notification/index.css

@@ -18,6 +18,12 @@
   margin: 0;
 }
 
+.section-title-off {
+  font-size: 1.25rem;
+  color: var(--home-text);
+  margin-top: 1rem;
+}
+
 .notification-box {
   padding-top: 0.7rem;
 }

client/src/components/main/homePage/notification/index.tsx

@@ -1,11 +1,28 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useNotifications from '../../../../hooks/useNotification';
 import './index.css';
 
 const NotificationView = () => {
   const navigate = useNavigate();
   const { notifications, viewNotification, clearNotifications } = useNotifications();
+  const [notificationsOn, setNotificationsOn] = useState(true);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('notificationsEnabled');
+    setNotificationsOn(saved ? JSON.parse(saved) : true);
+  }, []);
+
+  if (!notificationsOn) {
+    return (
+      <div className='homepage-box notification-box'>
+        <div className='notification-header'>
+          <h2 className='section-title-off'>Notification Catch-up</h2>
+        </div>
+        <p>Notifications are turned off.</p>
+      </div>
+    );
+  }
 
   return (
     <div className='homepage-box notification-box'>

client/src/components/profileSettings/index.tsx

@@ -5,6 +5,7 @@ import useProfileSettings from '../../hooks/useProfileSettings';
 import UserContributionsComponent from './userContributionsComponent';
 import ShortcutsComponent from './shortcutsComponent';
 import ToggleDarkLightComponent from './toggleDarkLightComponent';
+import ToggleNotification from './toggleNotification';
 
 const ProfileSettings: React.FC = () => {
   const {
@@ -59,6 +60,7 @@ const ProfileSettings: React.FC = () => {
         {userData ? (
           <>
             <ToggleDarkLightComponent />
+            <ToggleNotification />
             <h4>General Information</h4>
             <p>
               <strong>Username:</strong> {userData.username}
@@ -110,10 +112,10 @@ const ProfileSettings: React.FC = () => {
               {userData.dateJoined ? new Date(userData.dateJoined).toLocaleDateString() : 'N/A'}
             </p>
 
-            <ShortcutsComponent username={userData.username || ''} shortcuts={shortcuts} />
-
             <UserContributionsComponent userID={userData?.username || ''} />
 
+            <ShortcutsComponent username={userData.username || ''} shortcuts={shortcuts} />
+
             {/* ---- Reset Password Section ---- */}
             {canEditProfile && (
               <>

client/src/components/profileSettings/toggleDarkLightComponent/index.css

@@ -1,9 +1,9 @@
 :root {
-  --dark-text: #292929;
-  --light-text: #f9f8f8;
-  --dark-background: #2f4550;
-  --light-background: #586f7c;
-  --accent: #b8dbd9;
+  --dark-text: #f9f8f8;
+  --light-text: #292929;
+  --dark-background: #13091b;
+  --light-background: #efe2fc;
+  --accent: #be9fdb;
   --button-border: #b8dbd9;
 }
 
@@ -12,7 +12,7 @@
   --dark-background: #13091b;
   --light-background: #efe2fc;
   --accent: #be9fdb;
-  --comment:#be9fdb;
+  --comment: #be9fdb;
   --header: #1429af21;
   --container: #281738;
   --nav-bar: #372a43;
@@ -27,16 +27,91 @@
   --dark-background: #f3f3ed;
   --light-background: #d8d8d8;
   --accent: #380666;
-  --comment:white;
+  --comment: white;
   --header: #8896f16d;
   --container: #DDCDEC;
   --nav-bar: #d4aef8;
   --button: #4d2a6d;
   --button-hover: #9d81b7;
-  --notification:  rgb(236, 236, 236);
+  --notification: rgb(236, 236, 236);
   --home-text: #32206C;
 }
 
+.theme-flatly {
+  --text: #495057;
+  --dark-background: #f8f9fa;
+  --light-background: #f8f9fa;
+  --accent: #0d6efd;
+  --comment: #0d6efd;
+  --header: #e9ecef;
+  --container: #f8f9fa;
+  --nav-bar: #f8f9fa;
+  --button: #0d6efd;
+  --button-hover: #0d6efd;
+}
+
+.theme-darkly {
+  --text: #ffffff;
+  --dark-background: #343a40;
+  --light-background: #343a40;
+  --accent: #6610f2;
+  --comment: #6610f2;
+  --header: #343a40;
+  --container: #343a40;
+  --nav-bar: #343a40;
+  --button: #6610f2;
+  --button-hover: #6610f2;
+}
+
+.theme-minty {
+  --text: #2e3a34;
+  --dark-background: #eaf0e1;
+  --light-background: #eaf0e1;
+  --accent: #4fa3d1;
+  --comment: #4fa3d1;
+  --header: #eaf0e1;
+  --container: #eaf0e1;
+  --nav-bar: #eaf0e1;
+  --button: #83c5be;
+  --button-hover: #83c5be;
+}
+
+.theme-quartz {
+  --text: #212529;
+  --dark-background: #f8f9fa;
+  --light-background: #f8f9fa;
+  --accent: #7952b3;
+  --comment: #7952b3;
+  --header: #f8f9fa;
+  --container: #f8f9fa;
+  --nav-bar: #f8f9fa;
+  --button: #7952b3;
+  --button-hover: #7952b3;
+}
+
+.theme-colorblind-mode {
+  --primary-color: #000000;
+  --background-color-light: #f5f5f5;
+  --text-color: #000000;
+  --success-color: #3366cc;
+  --warning-color: #ff9933;
+  --danger-color: #cc0000;
+  --button-background: #3366cc;
+  /* --button-text: #ffffff; */
+  --link-color: #3366cc;
+  --border-color: #ced4da;
+}
+
+.colorblind-mode {
+  --text: var(--text-color);
+  --dark-background: var(--background-color-light);
+  --light-background: var(--background-color-light);
+  --button: var(--button-background);
+  --button-hover: var(--button-background);
+  --link: var(--link-color);
+  --border: var(--border-color);
+}
+
 html,
 #root {
   background-color: var(--dark-background);
@@ -98,3 +173,143 @@ nav {
 .toggle-switch.light .toggle-thumb {
   transform: translateX(30px);
 }
+
+:root {
+  --text-small: 0.8rem;
+  --text-medium: 1rem;
+  --text-large: 1.2rem;
+}
+
+body {
+  font-size: var(--text-medium);
+}
+
+.theme-small {
+  font-size: var(--text-small);
+}
+
+.theme-large {
+  font-size: var(--text-large);
+}
+
+.settings-container {
+  padding: 10px;
+  background-color: var(--background);
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 250px;
+  font-family: 'Arial', sans-serif;
+  transition: all 0.3s ease;
+}
+
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.settings-header h2 {
+  font-size: 1em; /* Smaller header */
+  color: var(--primary-color);
+  margin: 0;
+}
+
+.collapse-button {
+  background-color: #f1f1f1;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 0.9em;
+  color: var(--primary-color);
+  border-radius: 4px;
+  transition: transform 0.2s ease;
+}
+
+.collapse-button:hover {
+  transform: scale(1.1);
+}
+
+.settings-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-item {
+  margin-bottom: 12px;
+  padding-bottom: 12px; /* Space between items */
+  border-bottom: 1px solid var(--border-color); /* Divider between items */
+}
+
+.settings-item:last-child {
+  border-bottom: none; /* Remove the bottom border from the last item */
+}
+
+
+.setting-label {
+  font-size: 1em;
+  margin-bottom: 5px;
+  color: var(--secondary-color);
+  margin: 10px;
+}
+
+.setting-select {
+  padding: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background-color: var(--input-background);
+  font-size: 0.9em; /* Smaller font size */
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 22px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #4CAF50;
+}
+
+input:checked + .slider:before {
+  transform: translateX(23px); /* Adjusted for smaller switch */
+}
+
+/* Colors */
+:root {
+  --primary-color: #333;
+  --secondary-color: #555;
+  --background: #fff;
+  --input-background: #f1f1f1;
+  --border-color: #ddd;
+}