Updated UI

StephCurry07 · Oct 2, 2024 · 833d011 · 833d011
1 parent 1060cd1
commit 833d011
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 76 deletions.
diff --git a/frontend/app/create-ride/layout.jsx b/frontend/app/create-ride/layout.jsx
@@ -1,7 +1,6 @@
 "use client";
 import { useSearchParams } from "next/navigation";
 import Header from "@components/Header";
-import Footer from "@components/Footer";
 
 const registerlayout = ({ children }) => {
   const searchParams = useSearchParams();
@@ -16,8 +15,6 @@ const registerlayout = ({ children }) => {
         role={role}
       />
       {children}
-
-      <Footer />
     </div>
   );
 };

diff --git a/frontend/app/global.css b/frontend/app/global.css
@@ -67,7 +67,7 @@ body {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.header {
+/* .header {
   background-color:yellow;
   display: flex;
   flex-direction: row;
@@ -84,12 +84,12 @@ body {
   padding: 10px;
   border-radius: 15px;
   transition: background-color 0.3s, color 0.3s;
-}
+} */
 
-.header-ele-links:hover {
+/* .header-ele-links:hover {
   background-color: white;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
-}
+} */
 
 .footer {
   margin-bottom : auto;

diff --git a/frontend/app/my-rides/layout.jsx b/frontend/app/my-rides/layout.jsx
@@ -1,7 +1,6 @@
 "use client";
 import React from "react";
 import Header from "@components/Header";
-import Footer from "@components/Footer";
 import { useSearchParams } from "next/navigation";
 
 const myRidesLayout = ({ children }) => {
@@ -17,8 +16,6 @@ const myRidesLayout = ({ children }) => {
         role={role}
       />
       {children}
-
-      <Footer />
     </div>
   );
 };

diff --git a/frontend/app/my-rides/page.jsx b/frontend/app/my-rides/page.jsx
@@ -136,6 +136,7 @@ const MyRides = () => {
         flexDirection: "column",
         alignItems: "center",
         minHeight: "82vh",
+        marginTop: "25px",
       }}
     >
       {role === "not chosen" || myRides.length == 0 ? (

diff --git a/frontend/app/register/layout.jsx b/frontend/app/register/layout.jsx
@@ -2,7 +2,6 @@
 import React from "react";
 import Header from "@components/Header";
 import { useSearchParams } from "next/navigation";
-import Footer from "@components/Footer";
 
 const registerlayout = ({ children }) => {
   const searchParams = useSearchParams();
@@ -17,8 +16,6 @@ const registerlayout = ({ children }) => {
         role={role}
       />
       {children}
-
-      <Footer />
     </div>
   );
 };

diff --git a/frontend/app/styles/get-rides.module.css b/frontend/app/styles/get-rides.module.css
@@ -4,7 +4,7 @@
   flex-direction: column; 
   align-items: center; 
   padding: 20px;
-  /* flex-grow: 1; */
+  margin-top: 55px;
 }
 
 .filterContainer {

diff --git a/frontend/app/styles/user-registration.module.css b/frontend/app/styles/user-registration.module.css
@@ -5,6 +5,7 @@
   max-width: 40%;
   margin: auto;
   min-height: 80vh;
+  margin-top: 55px;
 }
 
 .formGroup {

diff --git a/frontend/components/Footer.jsx b/frontend/components/Footer.jsx
diff --git a/frontend/components/Header.jsx b/frontend/components/Header.jsx
@@ -25,20 +25,41 @@ const Header = ({ role, balance, connectedAccount }) => {
 
   return (
     <AppBar
-      position="static"
+      position="relative"
       sx={{
-        backgroundColor: "#1e1e1e",
-        boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
-        padding: "8px",
+        background: "none",
       }}
     >
-      <Toolbar sx={{ display: "flex", alignItems: "center" }}>
+      <svg
+        width="105%"
+        height="120"
+        viewBox="0 0 200 100"
+        preserveAspectRatio="none"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transform: "rotate(180deg)",
+          zIndex: 0, 
+        }}
+      >
+        <path d="M0,60 Q20,0 50,30 Q80,60 100,30 Q120,0 150,30 Q180,60 200,30 L200,100 L0,100 Z" fill="#ad520c" />
+      </svg>
+
+      <Toolbar
+        sx={{
+          position: "relative",
+          zIndex: 1,
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
         <Avatar
           alt="Logo"
           src="../images/ewLogo.png"
           sx={{
-            width: 50,
-            height: 50,
+            width: 60,
+            height: 60,
             marginRight: 2,
             cursor: "pointer",
             "&:hover": {
@@ -93,8 +114,8 @@ const Header = ({ role, balance, connectedAccount }) => {
           </Link>
         </div>
 
-
-        <div style={{ 
+        <div
+          style={{
             marginRight: "30px",
             display: "inline-block",
             transition: "transform 0.2s ease-in-out",
@@ -104,8 +125,8 @@ const Header = ({ role, balance, connectedAccount }) => {
           }}
           onMouseLeave={(e) => {
             e.currentTarget.style.transform = "scale(1)";
-          }}>
-            
+          }}
+        >
           <Link
             href={{
               pathname: "/my-rides",
@@ -129,7 +150,6 @@ const Header = ({ role, balance, connectedAccount }) => {
           </Link>
         </div>
 
-
         <Typography
           variant="body1"
           sx={{