Homepage UI changes

frontend/src/App.css

@@ -11,5 +11,20 @@ div.content {
 
 html,
 body {
-  transition: color 0.4s ease;
+  transition: color 0.1s ease;
 }
+
+/* .custom-button {
+  color: var(--button-color);
+  background-color: var(--button-bg-color);
+  border-color: var(--button-border-color);
+  padding: 10px;
+  width: 100%;
+  transition: all 0.3s ease;
+}
+
+.custom-button:hover {
+  color: var(--button-hover-color);
+  background-color: var(--button-hover-bg-color);
+  border-color: var(--button-hover-border-color);
+} */

frontend/src/hooks/theme.tsx

@@ -13,16 +13,25 @@ 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",
   },
 };
 
@@ -66,7 +75,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     document.body.classList.toggle("light-mode", theme === "light");
     document.body.style.backgroundColor = COLORS[theme].backgroundColor;
     document.body.style.color = COLORS[theme].color;
-  }, [theme]);
+  }, [theme, COLORS]);
 
   return (
     <ThemeContext.Provider

frontend/src/pages/Home.tsx

@@ -1,11 +1,24 @@
 import { useAuthentication } from "hooks/auth";
+import { useTheme } from "hooks/theme";
+import React, { useState } from "react";
 import { Button, Card, Col, Row } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
-const Home = () => {
+const Home: React.FC = () => {
+  const { theme, colors } = 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">
@@ -16,15 +29,15 @@ const Home = () => {
         <Col md={6} sm={12}>
           <Card onClick={() => navigate(`/robots`)}>
             <Card.Body>
-              <Card.Title>Robots</Card.Title>
-              <Card.Text>Buy and sell robot</Card.Text>
+              <Card.Title>Browse Robots</Card.Title>
+              <Card.Text>Buy and sell robots</Card.Text>
             </Card.Body>
           </Card>
         </Col>
         <Col md={6} sm={12}>
           <Card onClick={() => navigate(`/parts`)}>
             <Card.Body>
-              <Card.Title>Parts</Card.Title>
+              <Card.Title>Browse Parts</Card.Title>
               <Card.Text>Buy and sell robot parts</Card.Text>
             </Card.Body>
           </Card>
@@ -34,11 +47,11 @@ const Home = () => {
         <Row className="row-two">
           <Col md={6} sm={12}>
             <Button
-              variant="primary"
+              variant={theme === "dark" ? "outline-light" : "outline-dark"}
               size="lg"
               style={{
                 backgroundColor: "light-purple",
-                borderColor: "black",
+                borderColor: "secondary",
                 padding: "10px",
                 width: "100%",
               }}
@@ -51,11 +64,11 @@ const Home = () => {
           </Col>
           <Col md={6} sm={12}>
             <Button
-              variant="primary"
+              variant={theme === "dark" ? "outline-light" : "outline-dark"}
               size="lg"
               style={{
                 backgroundColor: "dark-purple",
-                borderColor: "black",
+                borderColor: "secondary",
                 padding: "10px",
                 width: "100%",
               }}
@@ -72,14 +85,17 @@ const Home = () => {
         <Row className="row-two">
           <Col md={6} sm={12}>
             <Button
-              variant="success"
+              variant="outline-primary"
               size="lg"
               style={{
-                backgroundColor: "light-green",
-                borderColor: "black",
+                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");
               }}
@@ -89,14 +105,17 @@ const Home = () => {
           </Col>
           <Col md={6} sm={12}>
             <Button
-              variant="success"
+              variant="outline-primary"
               size="lg"
               style={{
-                backgroundColor: "light-green",
-                borderColor: "black",
+                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");
               }}

frontend/src/pages/RobotDetails.tsx

@@ -289,14 +289,14 @@ const RobotDetails = () => {
       <>
         {robot.owner === userId && (
           <>
-            <Row>
+            <Row className="justify-content-end mt-2">
               <Col md={3} sm={12}>
                 <Button
-                  variant="success"
+                  variant="primary"
                   size="lg"
                   style={{
                     backgroundColor: "light-green",
-                    borderColor: "black",
+                    borderColor: "",
                     padding: "10px",
                     width: "100%",
                   }}
@@ -313,7 +313,7 @@ const RobotDetails = () => {
                   size="lg"
                   style={{
                     backgroundColor: "light-green",
-                    borderColor: "black",
+                    borderColor: "",
                     padding: "10px",
                     width: "100%",
                   }}
@@ -335,7 +335,7 @@ const RobotDetails = () => {
             >
               <Modal.Header closeButton>
                 <Modal.Title>
-                  Are you sure you want to delete this robot? :{"("}
+                  Are you sure you want to delete this robot?
                 </Modal.Title>
               </Modal.Header>
               <Modal.Footer className="d-flex justify-content-start">