From 55225ad2212df49e25f8cb7fb83d83b318386fcf Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Sun, 15 Dec 2024 23:11:50 +0800 Subject: [PATCH 01/17] feat: initial dark theme switch component --- .../Components/ThemeSwitch/SunAndMoonIcon.jsx | 95 +++++++++++++++++++ Client/src/Components/ThemeSwitch/index.css | 77 +++++++++++++++ Client/src/Components/ThemeSwitch/index.jsx | 49 ++++++++++ Client/src/index.css | 1 + 4 files changed, 222 insertions(+) create mode 100644 Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx create mode 100644 Client/src/Components/ThemeSwitch/index.css create mode 100644 Client/src/Components/ThemeSwitch/index.jsx diff --git a/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx new file mode 100644 index 000000000..91d54df22 --- /dev/null +++ b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx @@ -0,0 +1,95 @@ +import "./index.css"; + +const SunAndMoonIcon = () => { + return ( + + ); +}; + +export default SunAndMoonIcon; diff --git a/Client/src/Components/ThemeSwitch/index.css b/Client/src/Components/ThemeSwitch/index.css new file mode 100644 index 000000000..23a76bc2c --- /dev/null +++ b/Client/src/Components/ThemeSwitch/index.css @@ -0,0 +1,77 @@ +.sun-and-moon > :is(.moon, .sun, .sun-beams) { + transform-origin: center; +} + +.sun-and-moon > :is(.moon, .sun) { + fill: var(--icon-fill); +} + +.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) { + fill: var(--icon-fill-hover); +} + +.sun-and-moon > .sun-beams { + stroke: var(--icon-fill); + stroke-width: 2px; +} + +.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams { + stroke: var(--icon-fill-hover); +} + +[data-theme="dark"] .sun-and-moon > .sun { + transform: scale(1.75); +} + +[data-theme="dark"] .sun-and-moon > .sun-beams { + opacity: 0; +} + +[data-theme="dark"] .sun-and-moon > .moon > circle { + transform: translateX(-7px); +} + +@supports (cx: 1) { + [data-theme="dark"] .sun-and-moon > .moon > circle { + cx: 17; + transform: translateX(0); + } +} + +@media (prefers-reduced-motion: no-preference) { + .sun-and-moon > .sun { + transition: transform 0.5s var(--ease-elastic-3); + } + + .sun-and-moon > .sun-beams { + transition: + transform 0.5s var(--ease-elastic-4), + opacity 0.5s var(--ease-3); + } + + .sun-and-moon .moon > circle { + transition: transform 0.25s var(--ease-out-5); + } + + @supports (cx: 1) { + .sun-and-moon .moon > circle { + transition: cx 0.25s var(--ease-out-5); + } + } + + [data-theme="dark"] .sun-and-moon > .sun { + transition-timing-function: var(--ease-3); + transition-duration: 0.25s; + transform: scale(1.75); + } + + [data-theme="dark"] .sun-and-moon > .sun-beams { + transition-duration: 0.15s; + transform: rotateZ(-25deg); + } + + [data-theme="dark"] .sun-and-moon > .moon > circle { + transition-duration: 0.5s; + transition-delay: 0.25s; + } +} diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx new file mode 100644 index 000000000..b25b72218 --- /dev/null +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -0,0 +1,49 @@ +import React, { useEffect, useState } from "react"; +// import "./index.css"; +import { IconButton } from "@mui/material"; +import SunAndMoonIcon from "./SunAndMoonIcon"; +// import SunAndMoonIcon from "./SunAndMoonIcon"; + +const ThemeSwitch = () => { + const [currentTheme, setCurrentTheme] = useState("light"); + const toggleTheme = () => + setCurrentTheme((prevState) => (prevState === "light" ? "dark" : "light")); + + useEffect(() => { + document.body.setAttribute("data-theme", currentTheme); + console.log(currentTheme); + }, [currentTheme]); + + return ( + circle": { + // transform: currentTheme === "dark" ? "translateX(-7px)" : "none", + // transition: "transform 0.25s ease", + // }, + }} + > + + + ); +}; + +export default ThemeSwitch; diff --git a/Client/src/index.css b/Client/src/index.css index 173551ba6..f821df6ee 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -1,4 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); +@import "https://unpkg.com/open-props/easings.min.css"; * { box-sizing: border-box; From 6d6a13a833be75c11557be54f7c0fd55709c331f Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Sun, 15 Dec 2024 23:46:16 +0800 Subject: [PATCH 02/17] feat: fix sun beams icon bug --- Client/src/Components/ThemeSwitch/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Components/ThemeSwitch/index.css b/Client/src/Components/ThemeSwitch/index.css index 23a76bc2c..2f3814702 100644 --- a/Client/src/Components/ThemeSwitch/index.css +++ b/Client/src/Components/ThemeSwitch/index.css @@ -10,7 +10,7 @@ fill: var(--icon-fill-hover); } -.sun-and-moon > .sun-beams { +.theme-toggle .sun-and-moon > .sun-beams { stroke: var(--icon-fill); stroke-width: 2px; } From dd488fecb42c35e1153e552db1fc2c724856f298 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Sun, 15 Dec 2024 23:50:48 +0800 Subject: [PATCH 03/17] feat: cleanup --- Client/src/Components/ThemeSwitch/index.jsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx index b25b72218..533b026b2 100644 --- a/Client/src/Components/ThemeSwitch/index.jsx +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -1,8 +1,7 @@ import React, { useEffect, useState } from "react"; -// import "./index.css"; +import "./index.css"; import { IconButton } from "@mui/material"; import SunAndMoonIcon from "./SunAndMoonIcon"; -// import SunAndMoonIcon from "./SunAndMoonIcon"; const ThemeSwitch = () => { const [currentTheme, setCurrentTheme] = useState("light"); @@ -11,7 +10,6 @@ const ThemeSwitch = () => { useEffect(() => { document.body.setAttribute("data-theme", currentTheme); - console.log(currentTheme); }, [currentTheme]); return ( @@ -27,18 +25,6 @@ const ThemeSwitch = () => { display: "flex", alignItems: "center", justifyContent: "center", - // "& .sun-and-moon": { - // transformOrigin: "center", - // }, - // "& .sun": { - // fill: "var(--icon-fill)", - // transition: "transform 0.5s ease", - // ...(currentTheme === "dark" && { transform: "scale(1.75)" }), - // }, - // "& .moon > circle": { - // transform: currentTheme === "dark" ? "translateX(-7px)" : "none", - // transition: "transform 0.25s ease", - // }, }} > From efa106f732878917d54dae7ea2620154ffdeb321 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Sun, 15 Dec 2024 23:51:53 +0800 Subject: [PATCH 04/17] feat: add comment for temporary theme logic --- Client/src/Components/ThemeSwitch/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx index 533b026b2..e5758eab1 100644 --- a/Client/src/Components/ThemeSwitch/index.jsx +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -4,6 +4,7 @@ import { IconButton } from "@mui/material"; import SunAndMoonIcon from "./SunAndMoonIcon"; const ThemeSwitch = () => { + // TODO: change to use the MUI theme const [currentTheme, setCurrentTheme] = useState("light"); const toggleTheme = () => setCurrentTheme((prevState) => (prevState === "light" ? "dark" : "light")); From a97b2f0887d0c44cda362f149c401a1826f6bced Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Sun, 15 Dec 2024 23:52:07 +0800 Subject: [PATCH 05/17] feat: cleanup --- Client/src/Components/ThemeSwitch/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx index e5758eab1..df3c813ab 100644 --- a/Client/src/Components/ThemeSwitch/index.jsx +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; -import "./index.css"; import { IconButton } from "@mui/material"; import SunAndMoonIcon from "./SunAndMoonIcon"; +import "./index.css"; const ThemeSwitch = () => { // TODO: change to use the MUI theme From 3ab8b1241e950599571c7abb5250f8c1e5d72652 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Mon, 16 Dec 2024 14:05:56 +0800 Subject: [PATCH 06/17] feat: Add theme switch in login page --- Client/src/Pages/Auth/Login.jsx | 49 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx index a7554a7c1..b07f7aa84 100644 --- a/Client/src/Pages/Auth/Login.jsx +++ b/Client/src/Pages/Auth/Login.jsx @@ -17,6 +17,7 @@ import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; import PropTypes from "prop-types"; import { logger } from "../../Utils/Logger"; import "./index.css"; +import ThemeSwitch from "../../Components/ThemeSwitch"; const DEMO = import.meta.env.VITE_APP_DEMO; /** @@ -327,33 +328,25 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => { - - - Forgot password? - - - Reset password - - + + + Forgot password? + + + Reset password + + ); }; @@ -520,6 +513,7 @@ const Login = () => { px={{ xs: theme.spacing(12), lg: theme.spacing(20) }} pb={theme.spacing(20)} mx="auto" + gap={theme.spacing(8)} sx={{ "& > .MuiStack-root": { border: 1, @@ -554,6 +548,9 @@ const Login = () => { /> ) )} + + + ); From cdcefb1106744323cec9c00c1c946f17d8165235 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Mon, 16 Dec 2024 14:16:58 +0800 Subject: [PATCH 07/17] feat: add theme switch in sidebar --- Client/src/Components/Sidebar/index.jsx | 48 ++++++++++++++----------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 95abe1d20..feed25f24 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -21,6 +21,7 @@ import { useDispatch, useSelector } from "react-redux"; import { clearAuthState } from "../../Features/Auth/authSlice"; import { toggleSidebar } from "../../Features/UI/uiSlice"; import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice"; +import ThemeSwitch from "../ThemeSwitch"; import Avatar from "../Avatar"; import LockSvg from "../../assets/icons/lock.svg?react"; import UserSvg from "../../assets/icons/user.svg?react"; @@ -551,28 +552,35 @@ function Sidebar() { {authState.user?.role} - - openPopup(event, "logout")} + + - - - + openPopup(event, "logout")} + > + + + + )} Date: Mon, 16 Dec 2024 14:28:58 +0800 Subject: [PATCH 08/17] cleanup --- Client/src/Pages/Auth/Login.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx index b07f7aa84..f007600f7 100644 --- a/Client/src/Pages/Auth/Login.jsx +++ b/Client/src/Pages/Auth/Login.jsx @@ -548,7 +548,7 @@ const Login = () => { /> ) )} - + From 663f2334d1c703bb67bbf3c2fb2a9d995e859304 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Tue, 17 Dec 2024 01:24:15 +0800 Subject: [PATCH 09/17] feat: added dark mode functionality --- .../Components/ThemeSwitch/SunAndMoonIcon.jsx | 11 +++++++---- Client/src/Components/ThemeSwitch/index.css | 13 ------------- Client/src/Components/ThemeSwitch/index.jsx | 16 ++++++++++------ 3 files changed, 17 insertions(+), 23 deletions(-) diff --git a/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx index 91d54df22..820daeb3f 100644 --- a/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx +++ b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx @@ -1,6 +1,9 @@ +import { useTheme } from "@mui/material"; import "./index.css"; const SunAndMoonIcon = () => { + const theme = useTheme(); + return ( { y="0" width="100%" height="100%" - fill="white" + fill="#fff" /> { cx="12" cy="12" r="6" - fill="currentColor" + fill={theme.palette.text.secondary} mask="url(#moon-mask)" /> :is(.moon, .sun) { - fill: var(--icon-fill); -} - -.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) { - fill: var(--icon-fill-hover); -} - .theme-toggle .sun-and-moon > .sun-beams { - stroke: var(--icon-fill); stroke-width: 2px; } -.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams { - stroke: var(--icon-fill-hover); -} - [data-theme="dark"] .sun-and-moon > .sun { transform: scale(1.75); } diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx index df3c813ab..1e98dfe27 100644 --- a/Client/src/Components/ThemeSwitch/index.jsx +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -2,16 +2,20 @@ import React, { useEffect, useState } from "react"; import { IconButton } from "@mui/material"; import SunAndMoonIcon from "./SunAndMoonIcon"; import "./index.css"; +import { useDispatch, useSelector } from "react-redux"; +import { setMode } from "../../Features/UI/uiSlice"; const ThemeSwitch = () => { - // TODO: change to use the MUI theme - const [currentTheme, setCurrentTheme] = useState("light"); - const toggleTheme = () => - setCurrentTheme((prevState) => (prevState === "light" ? "dark" : "light")); + const mode = useSelector((state) => state.ui.mode); + const dispatch = useDispatch(); + + const toggleTheme = () => { + dispatch(setMode(mode === "light" ? "dark" : "light")); + }; useEffect(() => { - document.body.setAttribute("data-theme", currentTheme); - }, [currentTheme]); + document.body.setAttribute("data-theme", mode); + }, [mode]); return ( Date: Tue, 17 Dec 2024 23:57:12 +0800 Subject: [PATCH 10/17] feat: add attribution for theme switch --- Client/src/Components/ThemeSwitch/index.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx index 1e98dfe27..4cb6c3a14 100644 --- a/Client/src/Components/ThemeSwitch/index.jsx +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -1,4 +1,15 @@ -import React, { useEffect, useState } from "react"; +/** + * ThemeSwitch Component + * Dark and Light Theme Switch + * Original Code: https://web.dev/patterns/theming/theme-switch + * License: Apache License 2.0 + * Copyright © Google LLC + * + * This code has been adapted for use in this project. + * Apache License: https://www.apache.org/licenses/LICENSE-2.0 + */ + +import React, { useEffect } from "react"; import { IconButton } from "@mui/material"; import SunAndMoonIcon from "./SunAndMoonIcon"; import "./index.css"; From 7c5c3507d8c332bf469d758b69641f7f8950bb76 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Wed, 18 Dec 2024 18:57:38 +0800 Subject: [PATCH 11/17] feat: removed useEffect in toggling theme --- Client/src/Components/ThemeSwitch/index.css | 14 +++++++------- Client/src/Components/ThemeSwitch/index.jsx | 14 +++++--------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/Client/src/Components/ThemeSwitch/index.css b/Client/src/Components/ThemeSwitch/index.css index c80a0f2d1..2519a0be8 100644 --- a/Client/src/Components/ThemeSwitch/index.css +++ b/Client/src/Components/ThemeSwitch/index.css @@ -6,20 +6,20 @@ stroke-width: 2px; } -[data-theme="dark"] .sun-and-moon > .sun { +.theme-dark .sun-and-moon > .sun { transform: scale(1.75); } -[data-theme="dark"] .sun-and-moon > .sun-beams { +.theme-dark .sun-and-moon > .sun-beams { opacity: 0; } -[data-theme="dark"] .sun-and-moon > .moon > circle { +.theme-dark .sun-and-moon > .moon > circle { transform: translateX(-7px); } @supports (cx: 1) { - [data-theme="dark"] .sun-and-moon > .moon > circle { + .theme-dark .sun-and-moon > .moon > circle { cx: 17; transform: translateX(0); } @@ -46,18 +46,18 @@ } } - [data-theme="dark"] .sun-and-moon > .sun { + .theme-dark .sun-and-moon > .sun { transition-timing-function: var(--ease-3); transition-duration: 0.25s; transform: scale(1.75); } - [data-theme="dark"] .sun-and-moon > .sun-beams { + .theme-dark .sun-and-moon > .sun-beams { transition-duration: 0.15s; transform: rotateZ(-25deg); } - [data-theme="dark"] .sun-and-moon > .moon > circle { + .theme-dark .sun-and-moon > .moon > circle { transition-duration: 0.5s; transition-delay: 0.25s; } diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx index 4cb6c3a14..b751f542a 100644 --- a/Client/src/Components/ThemeSwitch/index.jsx +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -9,14 +9,13 @@ * Apache License: https://www.apache.org/licenses/LICENSE-2.0 */ -import React, { useEffect } from "react"; import { IconButton } from "@mui/material"; import SunAndMoonIcon from "./SunAndMoonIcon"; -import "./index.css"; import { useDispatch, useSelector } from "react-redux"; import { setMode } from "../../Features/UI/uiSlice"; +import "./index.css"; -const ThemeSwitch = () => { +const ThemeSwitch = ({ width = 48, height = 48 }) => { const mode = useSelector((state) => state.ui.mode); const dispatch = useDispatch(); @@ -24,20 +23,17 @@ const ThemeSwitch = () => { dispatch(setMode(mode === "light" ? "dark" : "light")); }; - useEffect(() => { - document.body.setAttribute("data-theme", mode); - }, [mode]); - return ( Date: Thu, 19 Dec 2024 21:18:23 +0800 Subject: [PATCH 12/17] feat: removed import for easings functionality --- Client/src/index.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Client/src/index.css b/Client/src/index.css index f821df6ee..093eb4866 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -1,5 +1,4 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); -@import "https://unpkg.com/open-props/easings.min.css"; * { box-sizing: border-box; @@ -55,6 +54,12 @@ html { --env-var-shadow-1: 0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03); + + /* ThemeSwitch Component Stylings */ + --ease-elastic-3: cubic-bezier(0.68, -0.55, 0.27, 1.55); + --ease-elastic-4: cubic-bezier(0.68, -0.55, 0.27, 1.55); + --ease-3: cubic-bezier(0.25, 0.1, 0.25, 1); + --ease-out-5: cubic-bezier(0.4, 0, 0.2, 1); } .MuiInputBase-root.Mui-disabled input { From b97e70f1629b2083f74f8e16c33124afb290b454 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Fri, 20 Dec 2024 23:07:36 +0800 Subject: [PATCH 13/17] feat: moved theme switch stylings --- Client/src/Components/ThemeSwitch/index.css | 12 ++++++------ Client/src/index.css | 6 ------ 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/Client/src/Components/ThemeSwitch/index.css b/Client/src/Components/ThemeSwitch/index.css index 2519a0be8..d5db1c1ca 100644 --- a/Client/src/Components/ThemeSwitch/index.css +++ b/Client/src/Components/ThemeSwitch/index.css @@ -27,27 +27,27 @@ @media (prefers-reduced-motion: no-preference) { .sun-and-moon > .sun { - transition: transform 0.5s var(--ease-elastic-3); + transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .sun-and-moon > .sun-beams { transition: - transform 0.5s var(--ease-elastic-4), - opacity 0.5s var(--ease-3); + transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), + opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); } .sun-and-moon .moon > circle { - transition: transform 0.25s var(--ease-out-5); + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @supports (cx: 1) { .sun-and-moon .moon > circle { - transition: cx 0.25s var(--ease-out-5); + transition: cx 0.25s cubic-bezier(0.4, 0, 0.2, 1); } } .theme-dark .sun-and-moon > .sun { - transition-timing-function: var(--ease-3); + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); transition-duration: 0.25s; transform: scale(1.75); } diff --git a/Client/src/index.css b/Client/src/index.css index 093eb4866..173551ba6 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -54,12 +54,6 @@ html { --env-var-shadow-1: 0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03); - - /* ThemeSwitch Component Stylings */ - --ease-elastic-3: cubic-bezier(0.68, -0.55, 0.27, 1.55); - --ease-elastic-4: cubic-bezier(0.68, -0.55, 0.27, 1.55); - --ease-3: cubic-bezier(0.25, 0.1, 0.25, 1); - --ease-out-5: cubic-bezier(0.4, 0, 0.2, 1); } .MuiInputBase-root.Mui-disabled input { From 9ef1c3572efa1c7a0fa13cf1424ce69cdaf54072 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Fri, 20 Dec 2024 23:37:58 +0800 Subject: [PATCH 14/17] feat: created ForgotPasswordLabel.jsx component --- .../Login/Components/ForgotPasswordLabel.jsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx diff --git a/Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx b/Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx new file mode 100644 index 000000000..0a5fa8153 --- /dev/null +++ b/Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx @@ -0,0 +1,43 @@ +import { Box, Typography, useTheme } from "@mui/material"; +import PropTypes from "prop-types"; +import { useNavigate } from "react-router"; + +const ForgotPasswordLabel = ({ email, errorEmail }) => { + const theme = useTheme(); + const navigate = useNavigate(); + + const handleNavigate = () => { + if (email !== "" && !errorEmail) { + sessionStorage.setItem("email", email); + } + navigate("/forgot-password"); + }; + + return ( + + + Forgot password? + + + Reset password + + + ); +}; + +ForgotPasswordLabel.proptype = { + email: PropTypes.string.isRequired, + emailError: PropTypes.string.isRequired, +}; + +export default ForgotPasswordLabel; From 3f7d3efe2b8baa1e655f185ecde3bead898c9460 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Fri, 20 Dec 2024 23:38:16 +0800 Subject: [PATCH 15/17] feat: removed forgot password label in email and password step --- .../Pages/Auth/Login/Components/EmailStep.jsx | 34 ------------------ .../Auth/Login/Components/PasswordStep.jsx | 36 +------------------ 2 files changed, 1 insertion(+), 69 deletions(-) diff --git a/Client/src/Pages/Auth/Login/Components/EmailStep.jsx b/Client/src/Pages/Auth/Login/Components/EmailStep.jsx index 08ae51c4f..952ebbf89 100644 --- a/Client/src/Pages/Auth/Login/Components/EmailStep.jsx +++ b/Client/src/Pages/Auth/Login/Components/EmailStep.jsx @@ -19,7 +19,6 @@ import { useNavigate } from "react-router"; const EmailStep = ({ form, errors, onSubmit, onChange }) => { const theme = useTheme(); const inputRef = useRef(null); - const navigate = useNavigate(); useEffect(() => { if (inputRef.current) { @@ -27,13 +26,6 @@ const EmailStep = ({ form, errors, onSubmit, onChange }) => { } }, []); - const handleNavigate = () => { - if (form.email !== "" && !errors.email) { - sessionStorage.setItem("email", form.email); - } - navigate("/forgot-password"); - }; - return ( <> { - - - Forgot password? - - - Reset password - - ); diff --git a/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx b/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx index 34df4959d..1719199cb 100644 --- a/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx +++ b/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx @@ -22,7 +22,6 @@ import PropTypes from "prop-types"; */ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => { const theme = useTheme(); - const navigate = useNavigate(); const inputRef = useRef(null); const authState = useSelector((state) => state.auth); @@ -32,13 +31,6 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => { } }, []); - const handleNavigate = () => { - if (form.email !== "" && !errors.email) { - sessionStorage.setItem("email", form.email); - } - navigate("/forgot-password"); - }; - return ( <> { - - - Forgot password? - - - Reset password - - ); @@ -156,4 +122,4 @@ PasswordStep.propTypes = { onBack: PropTypes.func.isRequired, }; -export default PasswordStep \ No newline at end of file +export default PasswordStep; From b5a125b388fcea27a69c2e535079c63f4566c4ff Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Fri, 20 Dec 2024 23:38:55 +0800 Subject: [PATCH 16/17] feat: added theme switch and forgot password label in login page --- Client/src/Pages/Auth/Login/Login.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/Client/src/Pages/Auth/Login/Login.jsx b/Client/src/Pages/Auth/Login/Login.jsx index c1687a0ec..890c87eb7 100644 --- a/Client/src/Pages/Auth/Login/Login.jsx +++ b/Client/src/Pages/Auth/Login/Login.jsx @@ -13,6 +13,8 @@ import { logger } from "../../../Utils/Logger"; import "../index.css"; import EmailStep from "./Components/EmailStep"; import PasswordStep from "./Components/PasswordStep"; +import ThemeSwitch from "../../../Components/ThemeSwitch"; +import ForgotPasswordLabel from "./Components/ForgotPasswordLabel"; const DEMO = import.meta.env.VITE_APP_DEMO; @@ -174,6 +176,7 @@ const Login = () => { px={{ xs: theme.spacing(12), lg: theme.spacing(20) }} pb={theme.spacing(20)} mx="auto" + rowGap={theme.spacing(8)} sx={{ "& > .MuiStack-root": { border: 1, @@ -205,6 +208,13 @@ const Login = () => { /> ) )} + + + + ); From 0c16a621313e674c711d2fb7074b0c6ae1e731d4 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Fri, 20 Dec 2024 23:48:25 +0800 Subject: [PATCH 17/17] feat: removed unused imports --- Client/src/Pages/Auth/Login/Components/EmailStep.jsx | 1 - Client/src/Pages/Auth/Login/Components/PasswordStep.jsx | 1 - 2 files changed, 2 deletions(-) diff --git a/Client/src/Pages/Auth/Login/Components/EmailStep.jsx b/Client/src/Pages/Auth/Login/Components/EmailStep.jsx index 952ebbf89..ac796e627 100644 --- a/Client/src/Pages/Auth/Login/Components/EmailStep.jsx +++ b/Client/src/Pages/Auth/Login/Components/EmailStep.jsx @@ -3,7 +3,6 @@ import { Box, Button, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import TextInput from "../../../../Components/Inputs/TextInput"; import PropTypes from "prop-types"; -import { useNavigate } from "react-router"; /** * Renders the email step of the login process which includes an email field. diff --git a/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx b/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx index 1719199cb..b7384ba98 100644 --- a/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx +++ b/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx @@ -1,5 +1,4 @@ import { useRef, useEffect } from "react"; -import { useNavigate } from "react-router-dom"; import { Box, Button, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import LoadingButton from "@mui/lab/LoadingButton";