Merge pull request #150 from simplitrac/home-button

added home button to all pages
simplitrac · Sep 12, 2024 · 07a0a4a · 07a0a4a
2 parents 6b1005a + 78b8e5b
commit 07a0a4a
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;