Upload Photo Implementation

ubclaunchpad · Dec 1, 2024 · 5135c7e · 5135c7e
1 parent 181d89e
commit 5135c7e
Show file tree

Hide file tree

Showing 10 changed files with 604 additions and 301 deletions.
diff --git a/frontend/src/components/ContentHeader/ContentHeader.css b/frontend/src/components/ContentHeader/ContentHeader.css
@@ -6,7 +6,7 @@
     width: 80%;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 4px; /* Add padding to create space above border */
+    padding-bottom: 4px; 
     border-bottom: 1px solid #9AB0E1;
 }
 
@@ -16,6 +16,10 @@
     color: #1E1E1E;
 }
 
+.content-header[data-page="upload-photo"] h2 {
+    border-bottom: 2px solid #2B4B96;
+}
+
 .button-group {
     display: flex;
     gap: 12px;  /* Space between buttons */
@@ -68,4 +72,71 @@
 .down-icon {
     width: 18px;
     height: 18px;
+}
+
+.back-button {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: #2B4B96;
+}
+
+.preview-button {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: #333333;
+    font-weight: 400;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-direction: row-reverse;
+}
+
+.preview-icon {
+    width: 30px;
+    height: 30px;
+    stroke-width: 2;
+    color: #244B94;
+}
+
+.upload-back-icon {
+    width: 30px;
+    height: 30px;
+    stroke-width: 3;
+    color: #2B4B96;
+    transition: transform 0.2s ease;
+}
+
+.upload-back-icon:hover {
+    transform: translateX(-5px);
+}
+
+.title-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.upload-photo-title {
+    color: #1E1E1E;
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin: 0;
+  padding-bottom: 0.5rem;
+  width: fit-content; 
+  border-bottom: 2px solid #ECEBED;
+}
+
+.upload-photo-header {
+    position: absolute;
+    left: 230px;
+    top: 18%;
+    display: flex;
+    width: 80%;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 4px;
 }
diff --git a/frontend/src/components/ContentHeader/ContentHeader.jsx b/frontend/src/components/ContentHeader/ContentHeader.jsx
@@ -1,10 +1,34 @@
-import { useLocation } from "react-router-dom";
-import { PlusIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  PlusIcon,
+  ChevronDownIcon,
+  ChevronDoubleLeftIcon,
+  ChevronLeftIcon,
+} from "@heroicons/react/24/outline";
 import "./ContentHeader.css";
 
-export default function ContentHeader() {
+export default function ContentHeader({ onPreviewClick }) {
   const location = useLocation();
+  const navigate = useNavigate();
   const isHistory = location.pathname === "/history";
+  const isUploadPhoto = location.pathname === "/upload-photo";
+
+  if (isUploadPhoto) {
+    return (
+      <div className="upload-photo-header">
+        <button className="back-button" onClick={() => navigate("/home")}>
+          <ChevronLeftIcon className="upload-back-icon" />
+        </button>
+        <div className="title-wrapper">
+          <h2 className="upload-photo-title">Upload Photos</h2>
+        </div>
+        <button className="preview-button" onClick={onPreviewClick}>
+          Preview
+          <ChevronDoubleLeftIcon className="preview-icon" />
+        </button>
+      </div>
+    );
+  }
 
   return (
     <div className="content-header">

diff --git a/frontend/src/components/UploadPhoto/PreviewSection.css b/frontend/src/components/UploadPhoto/PreviewSection.css
diff --git a/frontend/src/components/UploadPhoto/PreviewSection.jsx b/frontend/src/components/UploadPhoto/PreviewSection.jsx
diff --git a/frontend/src/components/UploadPhoto/UploadArea.css b/frontend/src/components/UploadPhoto/UploadArea.css
diff --git a/frontend/src/components/UploadPhoto/UploadArea.jsx b/frontend/src/components/UploadPhoto/UploadArea.jsx
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -8,7 +8,7 @@ import NotFound from "./pages/not_found/NotFound.jsx";
 import Home from "./pages/home/Home.jsx";
 import Logbooks from "./pages/logbooks/Logbooks.jsx";
 import LogHistory from "./pages/log_history/LogHistory.jsx";
-import UploadPhotos from "./pages/upload_photo/UploadPhoto.jsx";
+import UploadPhoto from "./pages/upload_photo/UploadPhoto.jsx";
 import ManualEntry from "./pages/manual_entry/ManualEntry.jsx";
 import LogCode from "./pages/log_code/LogCode.jsx";
 import "./index.css";
@@ -23,7 +23,7 @@ createRoot(document.getElementById("root")).render(
           <Route path="/logbooks" element={<Logbooks />} />
           <Route path="/home" element={<Home />} />
           <Route path="/history" element={<LogHistory />} />
-          <Route path="/uploadPhotos" element={<UploadPhotos />} />
+          <Route path="/upload-photo" element={<UploadPhoto />} />
           <Route path="/manualEntry" element={<ManualEntry />} />
           <Route path="/logCode" element={<LogCode />} />
         </Route>

diff --git a/frontend/src/pages/home/Home.jsx b/frontend/src/pages/home/Home.jsx
@@ -25,7 +25,7 @@ function MainContent() {
   const { session } = useAuth();
 
   const handleCreateNewLog = () => {
-    navigate("/uploadPhotos");
+    navigate("/upload-photo");
   };
 
   const handleAddLogbook = () => {