dark mode implementatin

kscalelabs · May 31, 2024 · 605893a · 605893a
1 parent 41de426
commit 605893a
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 62 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
     "nth-check": ">=2.0.1",
     "postcss": ">=8.4.31",
     "react": "^18.3.1",
+    "react-bootstrap-icons": "^1.11.4",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-scripts": "5.0.1",
@@ -42,28 +43,28 @@
     ]
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.24.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-typescript": "^7.24.6",
+    "@eslint/compat": "*",
+    "@eslint/js": "*",
     "@types/jest": "^29.5.12",
     "axios": "^1.7.2",
+    "babel-eslint": "*",
     "bootstrap": "^5.3.3",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "*",
+    "eslint-import-resolver-typescript": "*",
+    "eslint-plugin-import": "*",
+    "eslint-plugin-prettier": "*",
+    "eslint-plugin-react": "*",
     "globals": "^15.3.0",
     "nodemon": "^3.1.0",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
     "react-bootstrap": "^2.10.2",
     "react-router-dom": "^6.23.1",
     "ts-jest": "^29.1.4",
-    "eslint": "^8.0.0",
-    "@babel/eslint-parser": "^7.24.6",
-    "babel-eslint": "*",
-    "@eslint/compat": "*",
-    "@eslint/js": "*",
-    "eslint-config-prettier": "*",
-    "eslint-import-resolver-typescript": "*",
-    "eslint-plugin-prettier": "*",
-    "eslint-plugin-react": "*",
-    "eslint-plugin-import": "*",
     "typescript-eslint": "*"
   }
 }
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -0,0 +1,15 @@
+body.dark {
+  background-color: #343a40 !important;
+  color: #ffffff !important;
+}
+
+body.light {
+  background-color: #f8f9fa !important;
+  color: #000000 !important;
+}
+
+.navbar {
+  width: 100% !important;
+  margin: 0;
+  padding: 5px;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,10 +1,11 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import TopNavbar from "components/nav/TopNavbar";
 import NotFoundRedirect from "components/NotFoundRedirect";
-import ComponentDetails from "pages/ComponentDetails";
-import Components from "pages/Components";
+import { ThemeProvider } from "hooks/theme";
 import Home from "pages/Home";
 import NotFound from "pages/NotFound";
+import PartDetails from "pages/PartDetails";
+import Parts from "pages/Parts";
 import RobotDetails from "pages/RobotDetails";
 import Robots from "pages/Robots";
 import { Container } from "react-bootstrap";
@@ -13,23 +14,25 @@ import "./App.css";
 
 const App = () => {
   return (
-    <BrowserRouter>
-      <Container>
-        <TopNavbar />
+    <ThemeProvider>
+      <BrowserRouter>
+        <Container>
+          <TopNavbar />
 
-        <Container className="mt-3">
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/robots/" element={<Robots />} />
-            <Route path="/robot/:id" element={<RobotDetails />} />
-            <Route path="/components/" element={<Components />} />
-            <Route path="/component/:id" element={<ComponentDetails />} />
-            <Route path="/404" element={<NotFound />} />
-            <Route path="*" element={<NotFoundRedirect />} />
-          </Routes>
+          <Container className="mt-3">
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/robots/" element={<Robots />} />
+              <Route path="/robot/:id" element={<RobotDetails />} />
+              <Route path="/parts/" element={<Parts />} />
+              <Route path="/part/:id" element={<PartDetails />} />
+              <Route path="/404" element={<NotFound />} />
+              <Route path="*" element={<NotFoundRedirect />} />
+            </Routes>
+          </Container>
         </Container>
-      </Container>
-    </BrowserRouter>
+      </BrowserRouter>
+    </ThemeProvider>
   );
 };
 

diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
@@ -10,16 +10,10 @@ const Sidebar = ({ show, onHide }: Props) => {
   return (
     <Offcanvas show={show} onHide={onHide} placement="end">
       <Offcanvas.Header closeButton>
-        <Offcanvas.Title>Offcanvas</Offcanvas.Title>
+        <Offcanvas.Title>Settings</Offcanvas.Title>
       </Offcanvas.Header>
       <Offcanvas.Body>
         <Col>
-          <Row>
-            <p>
-              Some text as placeholder. In real life you can have the elements
-              you have chosen. Like, text, images, lists, etc.
-            </p>
-          </Row>
           <Row>
             <Authentication />
           </Row>

diff --git a/frontend/src/components/nav/TopNavbar.tsx b/frontend/src/components/nav/TopNavbar.tsx
@@ -1,28 +1,32 @@
 import Sidebar from "components/nav/Sidebar";
+import { useTheme } from "hooks/theme";
 import { useState } from "react";
 import { Container, Nav, Navbar } from "react-bootstrap";
+import { GearFill, MoonFill, SunFill } from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
 
 const TopNavbar = () => {
   const [showSidebar, setShowSidebar] = useState<boolean>(false);
+  const { theme, setTheme } = useTheme();
 
   return (
     <>
-      <Navbar className="bg-body-tertiary">
+      <Navbar className="bg-body-tertiary" expand="lg">
         <Container>
           <Navbar.Brand as={Link} to="/">
             robolist
           </Navbar.Brand>
           <Navbar.Toggle />
           <Navbar.Collapse className="justify-content-end">
             <Nav>
-              <Nav.Link as={Link} to="/robots/">
-                Robots
+              <Nav.Link
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              >
+                {theme === "dark" ? <MoonFill /> : <SunFill />}
               </Nav.Link>
-              <Nav.Link as={Link} to="/components/">
-                Components
+              <Nav.Link onClick={() => setShowSidebar(true)}>
+                <GearFill />
               </Nav.Link>
-              <Nav.Link onClick={() => setShowSidebar(true)}>Login</Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Container>

diff --git a/frontend/src/hooks/theme.tsx b/frontend/src/hooks/theme.tsx
@@ -17,11 +17,11 @@ interface ThemeColors {
 
 const COLORS: { [key in Theme]: ThemeColors } = {
   light: {
-    backgroundColor: "#f5f2ef",
+    backgroundColor: "#ffffff",
     color: "#201a42",
   },
   dark: {
-    backgroundColor: "#201a42",
+    backgroundColor: "#000000",
     color: "#f5f2ef",
   },
 };
@@ -62,6 +62,8 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
 
   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]);

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -1,16 +1,37 @@
-import { Col, Row } from "react-bootstrap";
+import { Card, Col, Row } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
 
 const RobotDetails = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="p-5 rounded-lg">
-      <Row>
-        <Col>
+      <Col>
+        <Row className="mb-5">
           <h1 className="display-4">robolist</h1>
           <p className="lead">
             Buy, sell and build robot hardware and software
           </p>
-        </Col>
-      </Row>
+        </Row>
+        <Row>
+          <Col md={6} sm={12} className="mt-2">
+            <Card onClick={() => navigate(`/robots`)}>
+              <Card.Body>
+                <Card.Title>Robots</Card.Title>
+                <Card.Text>Buy and sell robot</Card.Text>
+              </Card.Body>
+            </Card>
+          </Col>
+          <Col md={6} sm={12} className="mt-2">
+            <Card onClick={() => navigate(`/parts`)}>
+              <Card.Body>
+                <Card.Title>Parts</Card.Title>
+                <Card.Text>Buy and sell robot parts</Card.Text>
+              </Card.Body>
+            </Card>
+          </Col>
+        </Row>
+      </Col>
     </div>
   );
 };

diff --git a/frontend/src/pages/ComponentDetails.tsx → frontend/src/pages/PartDetails.tsx b/frontend/src/pages/ComponentDetails.tsx → frontend/src/pages/PartDetails.tsx
@@ -12,7 +12,7 @@ import {
 import Markdown from "react-markdown";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
-interface ComponentDetailsResponse {
+interface PartDetailsResponse {
   name: string;
   owner: string;
   description: string;
@@ -21,7 +21,7 @@ interface ComponentDetailsResponse {
   used_by: { name: string; id: string; stars: number }[];
 }
 
-const ComponentDetails = () => {
+const PartDetails = () => {
   const { id } = useParams();
   const [show, setShow] = useState(false);
   const [imageIndex, setImageIndex] = useState(0);
@@ -30,7 +30,7 @@ const ComponentDetails = () => {
   const handleShow = () => setShow(true);
 
   // This is a placeholder before the backend is hooked up.
-  const response: ComponentDetailsResponse = {
+  const response: PartDetailsResponse = {
     name: "RMD X8",
     owner: "MyActuator",
     description: `The RMD X8 is a quasi-direct drive motor from MyActuator.`,
@@ -72,14 +72,14 @@ const ComponentDetails = () => {
     <Container>
       <Breadcrumb>
         <Breadcrumb.Item onClick={() => navigate("/")}>Home</Breadcrumb.Item>
-        <Breadcrumb.Item onClick={() => navigate("/components/")}>
-          Components
+        <Breadcrumb.Item onClick={() => navigate("/parts/")}>
+          Parts
         </Breadcrumb.Item>
         <Breadcrumb.Item active>{name}</Breadcrumb.Item>
       </Breadcrumb>
 
-      <Row className="mt-5">
-        <Col lg={6} md={12} className="mb-3">
+      <Row className="mt-3">
+        <Col lg={6} md={12} className="mb-5">
           <Row>
             <Col>
               <h1>{name}</h1>
@@ -248,4 +248,4 @@ const ComponentDetails = () => {
   );
 };
 
-export default ComponentDetails;
+export default PartDetails;
diff --git a/frontend/src/pages/Components.tsx → frontend/src/pages/Parts.tsx b/frontend/src/pages/Components.tsx → frontend/src/pages/Parts.tsx
@@ -1,7 +1,7 @@
 import { Breadcrumb, Card, Col, Container, Row } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
-interface ComponentsResponse {
+interface PartsResponse {
   robots: {
     name: string;
     owner: string;
@@ -11,8 +11,8 @@ interface ComponentsResponse {
   }[];
 }
 
-const Components = () => {
-  const response: ComponentsResponse = {
+const Parts = () => {
+  const response: PartsResponse = {
     robots: [
       {
         name: "RMD X8",
@@ -30,13 +30,13 @@ const Components = () => {
     <Container>
       <Breadcrumb>
         <Breadcrumb.Item onClick={() => navigate("/")}>Home</Breadcrumb.Item>
-        <Breadcrumb.Item active>Components</Breadcrumb.Item>
+        <Breadcrumb.Item active>Parts</Breadcrumb.Item>
       </Breadcrumb>
 
       <Row className="mt-5">
         {response.robots.map(({ name, owner, description, id, photo }, key) => (
           <Col key={key} md={3} xs={6}>
-            <Card onClick={() => navigate(`/component/${id}`)}>
+            <Card onClick={() => navigate(`/part/${id}`)}>
               {photo && (
                 <Card.Img
                   style={{ aspectRatio: "1/1" }}
@@ -59,4 +59,4 @@ const Components = () => {
   );
 };
 
-export default Components;
+export default Parts;
diff --git a/frontend/src/pages/RobotDetails.tsx b/frontend/src/pages/RobotDetails.tsx
@@ -133,7 +133,7 @@ Stompy is designed to be a versatile platform for research and development in le
                 {response.bom.map((part, key) => (
                   <tr key={key}>
                     <td>
-                      <Link to={`/component/${part.id}`}>{part.name}</Link>
+                      <Link to={`/part/${part.id}`}>{part.name}</Link>
                     </td>
                     <td>{part.quantity}</td>
                     <td>${part.price}</td>