More consistent CSS styling, remove unnecessary code (#146)

kscalelabs · Jun 18, 2024 · 92bd77c · 92bd77c
1 parent 62f6b44
commit 92bd77c
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 79 deletions.
diff --git 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
@@ -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<PartFormProps> = ({
+  theme,
   title,
   message,
   part_name,
@@ -108,7 +111,11 @@ const PartForm: React.FC<PartFormProps> = ({
           </Row>
         ))}
         <Col>
-          <Button className="mb-3" variant="secondary" onClick={handleAddImage}>
+          <Button
+            className="mb-3"
+            variant={theme === "dark" ? "outline-light" : "outline-dark"}
+            onClick={handleAddImage}
+          >
             Add Image
           </Button>
         </Col>

diff --git 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<RobotFormProps> = ({
+  theme,
   title,
   message,
   robot_name,
@@ -183,7 +186,11 @@ const RobotForm: React.FC<RobotFormProps> = ({
           </Row>
         ))}
         <Col>
-          <Button className="mb-3" variant="secondary" onClick={handleAddImage}>
+          <Button
+            className="mb-3"
+            variant={theme === "dark" ? "outline-light" : "outline-dark"}
+            onClick={handleAddImage}
+          >
             Add Image
           </Button>
         </Col>
@@ -233,7 +240,11 @@ const RobotForm: React.FC<RobotFormProps> = ({
           </Row>
         ))}
         <Col>
-          <Button className="mb-3" variant="secondary" onClick={handleAddBom}>
+          <Button
+            className="mb-3"
+            variant={theme === "dark" ? "outline-light" : "outline-dark"}
+            onClick={handleAddBom}
+          >
             Add Part
           </Button>
         </Col>

diff --git 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<ThemeContextProps | undefined>(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 (
-    <ThemeContext.Provider
-      value={{ theme, setTheme: setThemeWrapper, colors: COLORS[theme] }}
-    >
+    <ThemeContext.Provider value={{ theme, setTheme: setThemeWrapper }}>
       {children}
     </ThemeContext.Provider>
   );

diff --git 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 (
     <PartForm
+      theme={theme}
       title="Edit Part"
       message={message}
       part_name={Part_name}

diff --git a/frontend/src/pages/EditRobotForm.tsx b/frontend/src/pages/EditRobotForm.tsx
@@ -3,10 +3,12 @@ import { humanReadableError } from "constants/backend";
 import { useAlertQueue } from "hooks/alerts";
 import { api, Bom, Image, Part, Robot } 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 EditRobotForm: React.FC = () => {
+  const { theme } = useTheme();
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
 
@@ -88,6 +90,7 @@ const EditRobotForm: React.FC = () => {
 
   return (
     <RobotForm
+      theme={theme}
       title="Edit Robot"
       robot_name={robot_name}
       setName={setName}

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -1,24 +1,14 @@
 import { useAuthentication } from "hooks/auth";
 import { useTheme } from "hooks/theme";
-import React, { useState } from "react";
+import React from "react";
 import { Button, Card, Col, Row } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
 const Home: React.FC = () => {
-  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 (
     <div className="flex-column pt-5 gap-4" style={{ display: "flex" }}>
       <Row className="mb-4">
@@ -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
@@ -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<string>("");
@@ -37,6 +39,7 @@ const NewPart: React.FC = () => {
 
   return (
     <PartForm
+      theme={theme}
       title="Add a New Part"
       message={message}
       part_name={part_name}

diff --git a/frontend/src/pages/NewRobot.tsx b/frontend/src/pages/NewRobot.tsx
@@ -1,10 +1,12 @@
 import RobotForm from "components/RobotForm";
 import { api, Bom, Image, Part, Robot } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
+import { useTheme } from "hooks/theme";
 import React, { FormEvent, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 const NewRobot: React.FC = () => {
+  const { theme } = useTheme();
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
   const [message, setMessage] = useState<string>("");
@@ -58,6 +60,7 @@ const NewRobot: React.FC = () => {
 
   return (
     <RobotForm
+      theme={theme}
       title="Add a New Robot"
       robot_name={robot_name}
       setName={setName}