From 78b8e5ba47e0d945fb982647e9ebc0334ad8a4da Mon Sep 17 00:00:00 2001
From: anpaulan <paulan21095@gmail.com>
Date: Thu, 12 Sep 2024 01:51:49 -0400
Subject: [PATCH] added home button to all pages

---
 client/src/App.css                            |  3 +-
 client/src/components/Camera.jsx              | 65 ++++++++++---------
 client/src/components/Chart.jsx               |  7 +-
 .../src/components/EditTransactionsPage.jsx   |  8 ++-
 client/src/components/HomeButton.jsx          | 55 ++++++++++++++++
 5 files changed, 102 insertions(+), 36 deletions(-)
 create mode 100644 client/src/components/HomeButton.jsx

diff --git a/client/src/App.css b/client/src/App.css
index dd2f3e4..57f3854 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -51,12 +51,13 @@ button, .custom-button {
   border-radius: 5px;
   color: white;
   font-size: 1rem;
+  margin-bottom: 10px;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 
 button:hover, .custom-button:hover {
-  background-color: red;
+  background-color: #e0e1dd;
 }
 
 /* buttons on edit page */
diff --git a/client/src/components/Camera.jsx b/client/src/components/Camera.jsx
index 76690fc..6448559 100644
--- a/client/src/components/Camera.jsx
+++ b/client/src/components/Camera.jsx
@@ -6,6 +6,7 @@ import { Spinner } from "react-bootstrap";
 import { Button } from "@chakra-ui/react";
 import '../App.css';
 import Updating from "./Updating.jsx";
+import HomeButton from './HomeButton.jsx';
 
 const Camera = () => {
     const { capturedPhoto, setCapturedPhoto, screen, setScreen, ocrData, setOcrData, device, setOcrModalOpen, isUpdating, setIsUpdating } = useContext(AppContext);
@@ -152,38 +153,42 @@ const Camera = () => {
     // }
 
     return (
-        <div style={styles.container}>
-            {isUpdating && <Updating />} {/* Show overlay when isUpdating is true */}
-            {device === 'mobile' && !capturedPhoto && (
-                <div>
-                    <input
-                        type="file"
-                        accept="image/*"
-                        capture="environment"
-                        ref={fileInputRef}
-                        onChange={handleFileChange}
-                        style={styles.fileInput}
-                    />
-                </div>
-            )}
-            {device === 'desktop' && !capturedPhoto && (
-                <div>
-                    <video ref={videoRef} style={styles.video} />
-                    <Button className="custom-button" onClick={capturePhoto} style={styles.button}>Capture Photo</Button>
-                </div>
-            )}
-            {capturedPhoto && device === 'desktop' && (
-                <div>
-                    <div style={styles.imageContainer}>
-                        <p>Captured Photo:</p>
-                        <img src={capturedPhoto} alt="Captured" style={styles.image} />
+        <div style={{ marginTop: '1rem' }}>
+            <HomeButton/>
+            <div style={styles.container}>
+                {isUpdating && <Updating />} {/* Show overlay when isUpdating is true */}
+                {device === 'mobile' && !capturedPhoto && (
+                    <div>
+                        <input
+                            type="file"
+                            accept="image/*"
+                            capture="environment"
+                            ref={fileInputRef}
+                            onChange={handleFileChange}
+                            style={styles.fileInput}
+                        />
                     </div>
-                    <Button className="custom-button" onClick={submitPhoto} style={styles.button}>Submit</Button>
-                    <Button className="custom-button" onClick={activateDesktopCamera} style={styles.button}>Retake</Button>
-                    <BackButton />
-                </div>
                 )}
-            <canvas ref={canvasRef} style={styles.hiddenCanvas}></canvas>
+                {device === 'desktop' && !capturedPhoto && (
+                    <div>
+                        <video ref={videoRef} style={styles.video} />
+                        <Button className="custom-button" onClick={capturePhoto} style={styles.button}>Capture Photo</Button>
+                    </div>
+                )}
+                {capturedPhoto && device === 'desktop' && (
+                    <div>
+                        {/* <HomeButton/> */}
+                        <div style={styles.imageContainer}>
+                            <p>Captured Photo:</p>
+                            <img src={capturedPhoto} alt="Captured" style={styles.image} />
+                        </div>
+                        <Button className="custom-button" onClick={submitPhoto} style={styles.button}>Submit</Button>
+                        <Button className="custom-button" onClick={activateDesktopCamera} style={styles.button}>Retake</Button>
+                        {/* <BackButton/> */}
+                    </div>
+                    )}
+                <canvas ref={canvasRef} style={styles.hiddenCanvas}></canvas>
+            </div>
         </div>
     );
 };
diff --git a/client/src/components/Chart.jsx b/client/src/components/Chart.jsx
index 1df1ca4..777fe8b 100644
--- a/client/src/components/Chart.jsx
+++ b/client/src/components/Chart.jsx
@@ -5,6 +5,7 @@ import '../App.css';
 import HamburgerMenuEdit from "./HamburgerMenuEdit.jsx";
 import { AppContext } from '../context/AppContext.jsx';
 import ExpenseChartJoyride from './ExpenseChartJoyride.jsx';
+import HomeButton from './HomeButton.jsx';
 
 
 
@@ -44,9 +45,9 @@ function App() {
   }, []);
 
   return (
-    <div className="App">
-      < ExpenseChartJoyride />
-      <h1>SimpliTrac</h1>
+    <div className="App" style={{ marginTop: '2rem' }}>
+      <HomeButton/>
+      <ExpenseChartJoyride />
       <HamburgerMenuEdit />
       <LookerStudioChart dimensions={dimensions} userEmail={userEmail} />
       <BackButton />
diff --git a/client/src/components/EditTransactionsPage.jsx b/client/src/components/EditTransactionsPage.jsx
index 5c48198..f0b151f 100644
--- a/client/src/components/EditTransactionsPage.jsx
+++ b/client/src/components/EditTransactionsPage.jsx
@@ -9,6 +9,7 @@ import { Button } from "@chakra-ui/react";
 import EditTransactionsJoyride from './EditTransactionJoyride.jsx';
 import HamburgerMenuEdit from "./HamburgerMenuEdit.jsx";
 import { Spinner } from "react-bootstrap";
+import HomeButton from './HomeButton.jsx';
 
 const EditTransactionsPage = () => {
     const { user, setUser, setScreen, setServerResponse, runEditTransactionsTour, setRunEditTransactionsTour } = useContext(AppContext);
@@ -96,8 +97,10 @@ const EditTransactionsPage = () => {
     return (
         <>
         <HamburgerMenuEdit />
-            <EditTransactionsJoyride />
-            <Spinner />
+        <EditTransactionsJoyride />
+        <Spinner />
+        <HomeButton onClick={() => setScreen('home')} />
+          <div style={{ marginTop: '3rem' }}> 
             <form onSubmit={handleSubmit(onSubmit)} data-tour="edit-transactions-form">
                 <div className="edit-buttons">
                     <div className="edit-left-button">
@@ -180,6 +183,7 @@ const EditTransactionsPage = () => {
                     </tbody>
                 </table>
             </form>
+            </div>
         </>    
     );
 };
diff --git a/client/src/components/HomeButton.jsx b/client/src/components/HomeButton.jsx
new file mode 100644
index 0000000..91d4528
--- /dev/null
+++ b/client/src/components/HomeButton.jsx
@@ -0,0 +1,55 @@
+// eslint-disable-next-line react/prop-types
+import {useContext} from "react";
+import { AppContext } from "../context/AppContext.jsx";
+import { Button } from "@chakra-ui/react";
+
+
+const HomeButton = () => {
+
+    const {setScreen} = useContext(AppContext)
+
+    const onHome = () => {
+        // if (videoRef.current.srcObject) {
+        //     const stream = videoRef.current.srcObject;
+        //     if (stream) {
+        //         stream.getTracks().forEach(track => track.stop());
+        //         videoRef.current.srcObject = null;
+        //         console.log("Camera access stopped");
+        //     }
+        //     videoRef.current.pause();
+        // }
+        setScreen("landing");
+    };
+
+    return (
+        <Button
+            onClick={onHome}
+            background="none"
+            color="#415a77"
+            fontSize="30px"
+            _hover={{ 
+                border: 'none', 
+                boxShadow: 'none', 
+                background: 'none'
+            }}
+            position="absolute"
+            top="1rem"
+            left="50%"
+            transform="translateX(-50%)"
+            zIndex="10"
+            border='none'
+
+        >
+            <h2 style={{ margin: 0, fontWeight: 'bold' }}>Simplitrac</h2>
+            {/* <Image
+                src="../simplitrac_frontend/public/assets/pictures/background_logo.png"
+                alt="Home"
+                width="100%"
+                height="100%"
+                objectFit="cover"
+            /> */}
+        </Button>
+    );
+}
+
+export default HomeButton;