From 92bd77c23de74a3af50817d17d7085f18a81ba33 Mon Sep 17 00:00:00 2001 From: Dennis Chen <41879777+chennisden@users.noreply.github.com> Date: Tue, 18 Jun 2024 09:58:26 -0700 Subject: [PATCH] More consistent CSS styling, remove unnecessary code (#146) --- frontend/src/App.css | 34 +++++++++++++++++++ frontend/src/components/PartForm.tsx | 9 ++++- frontend/src/components/RobotForm.tsx | 15 ++++++-- frontend/src/hooks/theme.tsx | 49 ++------------------------- frontend/src/pages/EditPartForm.tsx | 3 ++ frontend/src/pages/EditRobotForm.tsx | 3 ++ frontend/src/pages/Home.tsx | 32 ++--------------- frontend/src/pages/NewPart.tsx | 3 ++ frontend/src/pages/NewRobot.tsx | 3 ++ 9 files changed, 72 insertions(+), 79 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 69e77761..a6fa18df 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -40,3 +40,37 @@ p.card-text { display: -webkit-box; -webkit-box-orient: vertical; } + +.btn-primary { + background-color: white; + color: #0d6efd; + border-color: #0d6efd; +} + +body.dark-mode .btn-primary { + background-color: black; + color: #8ab9fe; + border-color: #8ab9fe; +} + +body.dark-mode .btn-primary:hover { + background-color: #8ab9fe; + color: #201a42; +} + +.btn-danger { + background-color: white; + color: #dc3545; + border-color: #dc3545; +} + +body.dark-mode .btn-danger { + background-color: black; + color: #f0cbce; + border-color: #f0cbce; +} + +body.dark-mode .btn-danger:hover { + background-color: #f0cbce; + color: #201a42; +} diff --git a/frontend/src/components/PartForm.tsx b/frontend/src/components/PartForm.tsx index 1e1fdbab..36480a5b 100644 --- a/frontend/src/components/PartForm.tsx +++ b/frontend/src/components/PartForm.tsx @@ -1,9 +1,11 @@ import { Image } from "hooks/api"; +import { Theme } from "hooks/theme"; import { ChangeEvent, Dispatch, FormEvent, SetStateAction } from "react"; import { Button, Col, Form, Row } from "react-bootstrap"; import ImageUploadComponent from "./files/UploadImage"; interface PartFormProps { + theme: Theme; title: string; message: string; part_name: string; @@ -16,6 +18,7 @@ interface PartFormProps { } const PartForm: React.FC = ({ + theme, title, message, part_name, @@ -108,7 +111,11 @@ const PartForm: React.FC = ({ ))} - diff --git a/frontend/src/components/RobotForm.tsx b/frontend/src/components/RobotForm.tsx index d9f28bee..ebad3174 100644 --- a/frontend/src/components/RobotForm.tsx +++ b/frontend/src/components/RobotForm.tsx @@ -1,9 +1,11 @@ import { Bom, Image, Part } from "hooks/api"; +import { Theme } from "hooks/theme"; import { ChangeEvent, Dispatch, FormEvent, SetStateAction } from "react"; import { Button, Col, Form, Row } from "react-bootstrap"; import ImageUploadComponent from "./files/UploadImage"; interface RobotFormProps { + theme: Theme; title: string; message: string; robot_name: string; @@ -25,6 +27,7 @@ interface RobotFormProps { } const RobotForm: React.FC = ({ + theme, title, message, robot_name, @@ -183,7 +186,11 @@ const RobotForm: React.FC = ({ ))} - @@ -233,7 +240,11 @@ const RobotForm: React.FC = ({ ))} - diff --git a/frontend/src/hooks/theme.tsx b/frontend/src/hooks/theme.tsx index f18abd07..79f33673 100644 --- a/frontend/src/hooks/theme.tsx +++ b/frontend/src/hooks/theme.tsx @@ -1,40 +1,9 @@ -import { - createContext, - ReactNode, - useContext, - useEffect, - useState, -} from "react"; +import { createContext, ReactNode, useContext, useState } from "react"; -type Theme = "light" | "dark"; +export type Theme = "light" | "dark"; const THEME_KEY = "__THEME"; -interface ThemeColors { - backgroundColor: string; - color: string; - buttonBorder: string; - buttonHover: string; - text_color: string; -} - -const COLORS: { [key in Theme]: ThemeColors } = { - light: { - backgroundColor: "#ffffff", - color: "#201a42", - buttonBorder: "#0D6EFD", - buttonHover: "#0D6EFD", - text_color: "#f5f2ef", - }, - dark: { - backgroundColor: "#000000", - color: "#f5f2ef", - buttonBorder: "#8AB9FE", - buttonHover: "#0D6EFD", - text_color: "#201a42", - }, -}; - const getThemeFromLocalStorage = (): Theme => { const theme = localStorage.getItem(THEME_KEY); if (theme === null) { @@ -50,7 +19,6 @@ const setThemeWithLocalStorage = (theme: Theme) => { interface ThemeContextProps { theme: Theme; setTheme: (theme: Theme) => void; - colors: ThemeColors; } const ThemeContext = createContext(undefined); @@ -68,19 +36,8 @@ export const ThemeProvider = (props: ThemeProviderProps) => { setTheme(theme); setThemeWithLocalStorage(theme); }; - - useEffect(() => { - document.body.setAttribute("data-bs-theme", theme); - document.body.classList.toggle("dark-mode", theme === "dark"); - document.body.classList.toggle("light-mode", theme === "light"); - document.body.style.backgroundColor = COLORS[theme].backgroundColor; - document.body.style.color = COLORS[theme].color; - }, [theme, COLORS]); - return ( - + {children} ); diff --git a/frontend/src/pages/EditPartForm.tsx b/frontend/src/pages/EditPartForm.tsx index 6f88305b..faeaaa9c 100644 --- a/frontend/src/pages/EditPartForm.tsx +++ b/frontend/src/pages/EditPartForm.tsx @@ -3,10 +3,12 @@ import { humanReadableError } from "constants/backend"; import { useAlertQueue } from "hooks/alerts"; import { api, Image, Part } from "hooks/api"; import { useAuthentication } from "hooks/auth"; +import { useTheme } from "hooks/theme"; import React, { FormEvent, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; const EditPartForm: React.FC = () => { + const { theme } = useTheme(); const auth = useAuthentication(); const auth_api = new api(auth.api); @@ -62,6 +64,7 @@ const EditPartForm: React.FC = () => { return ( { + const { theme } = useTheme(); const auth = useAuthentication(); const auth_api = new api(auth.api); @@ -88,6 +90,7 @@ const EditRobotForm: React.FC = () => { return ( { - const { theme, colors } = useTheme(); + const { theme } = useTheme(); const navigate = useNavigate(); const { isAuthenticated } = useAuthentication(); - const [isHoveredR, setIsHoveredR] = useState(false); - - const handleMouseEnterR = () => setIsHoveredR(true); - const handleMouseLeaveR = () => setIsHoveredR(false); - - const [isHoveredL, setIsHoveredL] = useState(false); - - const handleMouseEnterL = () => setIsHoveredL(true); - const handleMouseLeaveL = () => setIsHoveredL(false); - return (
@@ -51,9 +41,6 @@ const Home: React.FC = () => { variant={theme === "dark" ? "outline-light" : "outline-dark"} size="lg" style={{ - backgroundColor: "light-purple", - borderColor: "secondary", - padding: "10px", width: "100%", }} onClick={() => { @@ -68,9 +55,6 @@ const Home: React.FC = () => { variant={theme === "dark" ? "outline-light" : "outline-dark"} size="lg" style={{ - backgroundColor: "dark-purple", - borderColor: "secondary", - padding: "10px", width: "100%", }} onClick={() => { @@ -87,14 +71,8 @@ const Home: React.FC = () => { variant="outline-primary" size="lg" style={{ - color: isHoveredR ? colors.text_color : colors.buttonBorder, - backgroundColor: isHoveredR ? colors.buttonBorder : "", - borderColor: colors.buttonBorder, - padding: "10px", width: "100%", }} - onMouseEnter={handleMouseEnterR} - onMouseLeave={handleMouseLeaveR} onClick={() => { navigate("/robots/add"); }} @@ -107,14 +85,8 @@ const Home: React.FC = () => { variant="outline-primary" size="lg" style={{ - color: isHoveredL ? colors.text_color : colors.buttonBorder, - backgroundColor: isHoveredL ? colors.buttonBorder : "", - borderColor: colors.buttonBorder, - padding: "10px", width: "100%", }} - onMouseEnter={handleMouseEnterL} - onMouseLeave={handleMouseLeaveL} onClick={() => { navigate("/parts/add"); }} diff --git a/frontend/src/pages/NewPart.tsx b/frontend/src/pages/NewPart.tsx index 1a2e0c8f..5cd45e1e 100644 --- a/frontend/src/pages/NewPart.tsx +++ b/frontend/src/pages/NewPart.tsx @@ -1,10 +1,12 @@ import PartForm from "components/PartForm"; import { api, Image, Part } from "hooks/api"; import { useAuthentication } from "hooks/auth"; +import { useTheme } from "hooks/theme"; import React, { FormEvent, useState } from "react"; import { useNavigate } from "react-router-dom"; const NewPart: React.FC = () => { + const { theme } = useTheme(); const auth = useAuthentication(); const auth_api = new api(auth.api); const [message, setMessage] = useState(""); @@ -37,6 +39,7 @@ const NewPart: React.FC = () => { return ( { + const { theme } = useTheme(); const auth = useAuthentication(); const auth_api = new api(auth.api); const [message, setMessage] = useState(""); @@ -58,6 +60,7 @@ const NewRobot: React.FC = () => { return (