From f9b9f6e5d9d22b7af6cb8c33af1465a82bd01626 Mon Sep 17 00:00:00 2001 From: Khushi Khan <76977629+khushikhan0@users.noreply.github.com> Date: Wed, 9 Apr 2025 10:09:43 -0400 Subject: [PATCH 1/3] fixed settings ............ --- .../toggleDarkLightComponent/index.css | 231 +++++++++++++++++- .../toggleDarkLightComponent/index.tsx | 164 ++++++++++++- client/src/tool/index.tsx | 77 +++++- 3 files changed, 452 insertions(+), 20 deletions(-) diff --git a/client/src/components/profileSettings/toggleDarkLightComponent/index.css b/client/src/components/profileSettings/toggleDarkLightComponent/index.css index 0b16e1d..03c8a10 100644 --- a/client/src/components/profileSettings/toggleDarkLightComponent/index.css +++ b/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; +} diff --git a/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx b/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx index 742fcd2..9335b1c 100644 --- a/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx +++ b/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx @@ -1,31 +1,173 @@ import React, { useState, useEffect } from 'react'; -import { setTheme } from '../../../tool'; +import { setTheme, setTextSize, setColorblindMode, setNotifications } from '../../../tool'; import './index.css'; function ToggleDarkLightComponent() { const [togClass, setTogClass] = useState('dark'); + const [textClass, setTextClass] = useState(localStorage.getItem('text-size') || 'medium'); + const [colorblindClass, setColorblindClass] = useState( + localStorage.getItem('colorblind-mode') === 'true', + ); + const [notificationsClass, setNotificationsClass] = useState( + localStorage.getItem('notifications') === 'true', + ); + const [isCollapsed, setIsCollapsed] = useState(false); const handleOnClick = () => { - const currentTheme = localStorage.getItem('theme'); + const currentTheme = localStorage.getItem('theme') || 'theme-dark'; const newTheme = currentTheme === 'theme-dark' ? 'theme-light' : 'theme-dark'; setTheme(newTheme); - setTogClass(newTheme === 'theme-dark' ? 'dark' : 'light'); + setTogClass(newTheme); + document.documentElement.className = newTheme; + localStorage.setItem('theme', newTheme); }; useEffect(() => { - const currentTheme = localStorage.getItem('theme'); - if (currentTheme === 'theme-dark') { - setTogClass('dark'); + const currentTheme = localStorage.getItem('theme') || 'theme-dark'; + setTogClass(currentTheme); + setTextClass(localStorage.getItem('text-size') || 'medium'); + setColorblindClass(localStorage.getItem('colorblind-mode') === 'true'); + setNotificationsClass(localStorage.getItem('notifications') === 'true'); + document.documentElement.className = currentTheme; + + if (textClass === 'small') { + document.body.classList.add('theme-small'); + document.body.classList.remove('theme-medium', 'theme-large'); + } else if (textClass === 'large') { + document.body.classList.add('theme-large'); + document.body.classList.remove('theme-medium', 'theme-small'); + } else { + document.body.classList.add('theme-medium'); + document.body.classList.remove('theme-small', 'theme-large'); + } + + if (colorblindClass) { + document.documentElement.classList.add('colorblind-mode'); } else { - setTogClass('light'); + document.documentElement.classList.remove('colorblind-mode'); } - }, []); + }, [colorblindClass, textClass]); + + const handleTextSizeChange = (e: React.ChangeEvent) => { + const newSize = e.target.value; + setTextSize(newSize); + setTextClass(newSize); + localStorage.setItem('text-size', newSize); + }; + + const handleColorblindModeChange = (e: React.ChangeEvent) => { + const isChecked = e.target.checked; + setColorblindMode(String(isChecked)); + setColorblindClass(isChecked); + localStorage.setItem('colorblind-mode', isChecked.toString()); + const currentTheme = localStorage.getItem('theme') || 'theme-dark'; + document.documentElement.classList.toggle('colorblind-mode', isChecked); + document.documentElement.classList.add(currentTheme); + }; + + const handleLightModeChange = (e: React.ChangeEvent) => { + const isChecked = e.target.checked; + setTogClass(isChecked ? 'theme-light' : 'theme-dark'); + document.documentElement.className = isChecked ? 'theme-light' : 'theme-dark'; + localStorage.setItem('theme', isChecked ? 'theme-light' : 'theme-dark'); + }; + + const handleNotificationsChange = (e: React.ChangeEvent) => { + const isChecked = e.target.checked; + setNotifications(String(isChecked)); + setNotificationsClass(isChecked); + localStorage.setItem('notifications', isChecked.toString()); + }; + + const toggleCollapse = () => { + setIsCollapsed(prevState => !prevState); + }; return ( -
-
-
+
+
+

Settings

+
+ + {!isCollapsed && ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ )}
); } diff --git a/client/src/tool/index.tsx b/client/src/tool/index.tsx index 795cf43..2f5a381 100644 --- a/client/src/tool/index.tsx +++ b/client/src/tool/index.tsx @@ -42,6 +42,69 @@ const keepTheme = () => { } }; +/** + * Helper function to set the website's text size. + * @param textSize - The string object which identifies the text size. + */ +const setTextSize = (textSize: string): void => { + localStorage.setItem('textSize', textSize); + document.documentElement.className = textSize; +}; + +/** + * Helper function to store a user's text size so it is kept when browser reopened. + */ +const keepTextSize = (): void => { + const textSize = localStorage.getItem('textSize'); + if (textSize) { + setTextSize(textSize); + } else { + setTextSize('medium'); + } +}; + +/** + * Helper function to set the website's colorblind mode. + * @param colorblindMode - The string object which identifies the colorblind mode. + */ +const setColorblindMode = (colorblindMode: string): void => { + localStorage.setItem('colorblindMode', colorblindMode); + document.documentElement.className = colorblindMode; +}; + +/** + * Helper function to store a user's colorblind mode so it is kept when browser reopened. + */ +const keepColorblindMode = (): void => { + const colorblindMode = localStorage.getItem('colorblindMode'); + if (colorblindMode) { + setColorblindMode(colorblindMode); + } else { + setColorblindMode('false'); + } +}; + +/** + * Helper function to set the website's notifications enabled state. + * @param notificationsEnabled - The string object which identifies the notifications state. + */ +const setNotifications = (notificationsEnabled: string): void => { + localStorage.setItem('notificationsEnabled', notificationsEnabled); + document.documentElement.className = notificationsEnabled; +}; + +/** + * Helper function to store a user's notifications enabled state so it is kept when browser reopened. + */ +const keepNotificationsEnabled = (): void => { + const notificationsEnabled = localStorage.getItem('notificationsEnabled'); + if (notificationsEnabled) { + setNotifications(notificationsEnabled); + } else { + setNotifications('false'); + } +}; + /** * Helper function to format the day of the month with leading zero if necessary. * It returns a string representing the day of the month with a leading zero if it's less than 10. @@ -155,4 +218,16 @@ const handleHyperlink = (text: string) => { return
{content}
; }; -export { getMetaData, setTheme, keepTheme, handleHyperlink, validateHyperlink }; +export { + getMetaData, + setTheme, + keepTheme, + setTextSize, + keepTextSize, + setColorblindMode, + keepColorblindMode, + setNotifications, + keepNotificationsEnabled, + handleHyperlink, + validateHyperlink, +}; From 619554c06ef5f270b2a4204a73afe403e7f3ae22 Mon Sep 17 00:00:00 2001 From: Khushi Khan <76977629+khushikhan0@users.noreply.github.com> Date: Wed, 9 Apr 2025 10:14:37 -0400 Subject: [PATCH 2/3] fixed lint --- .../profileSettings/toggleDarkLightComponent/index.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx b/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx index 9335b1c..e537867 100644 --- a/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx +++ b/client/src/components/profileSettings/toggleDarkLightComponent/index.tsx @@ -13,15 +13,6 @@ function ToggleDarkLightComponent() { ); const [isCollapsed, setIsCollapsed] = useState(false); - const handleOnClick = () => { - const currentTheme = localStorage.getItem('theme') || 'theme-dark'; - const newTheme = currentTheme === 'theme-dark' ? 'theme-light' : 'theme-dark'; - setTheme(newTheme); - setTogClass(newTheme); - document.documentElement.className = newTheme; - localStorage.setItem('theme', newTheme); - }; - useEffect(() => { const currentTheme = localStorage.getItem('theme') || 'theme-dark'; setTogClass(currentTheme); From d910dc59345ba0666933cfbc823a035b0564f597 Mon Sep 17 00:00:00 2001 From: jessicazha0 Date: Wed, 9 Apr 2025 11:05:07 -0400 Subject: [PATCH 3/3] toggle text --- .../src/components/profileSettings/toggleNotification/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/profileSettings/toggleNotification/index.tsx b/client/src/components/profileSettings/toggleNotification/index.tsx index 045e81f..94e0913 100644 --- a/client/src/components/profileSettings/toggleNotification/index.tsx +++ b/client/src/components/profileSettings/toggleNotification/index.tsx @@ -19,7 +19,7 @@ function ToggleNotification() { return (
-

Enable notifications

+

Notifications