Merge pull request #178 from agiledev-students-fall2023/user_story_#80

bg change
agiledev-students-fall2023 · Dec 6, 2023 · 6d8c4b5 · 6d8c4b5
2 parents f1c26cf + a09321e
commit 6d8c4b5
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 13 deletions.
diff --git a/front-end/public/field.jpg b/front-end/public/field.jpg
diff --git a/front-end/public/river.jpeg b/front-end/public/river.jpeg
diff --git a/front-end/src/components/common/navBar.jsx b/front-end/src/components/common/navBar.jsx
@@ -15,7 +15,7 @@ const NavBar = ({children, relative}) => {
   return (
     <>
     <div className="h-[calc(3vh+2rem)]">
-      <nav className={`${relative?"relative":"fixed"} flex pt-[2vh] pb-[1vh] px-[10%] h-[calc(3vh+2rem)] w-full
+      <nav className={`${relative?"relative":"fixed"} my-2 flex pt-[2vh] pb-[1vh] px-[10%] h-[calc(3vh+2rem)] w-full
         bg-beige1 duration-700 ${navHidden} z-20`}>
         <div className="flex flex-row justify-between w-full max-w-[30rem] mx-auto">
           {children}

diff --git a/front-end/src/components/form/formBtn.jsx b/front-end/src/components/form/formBtn.jsx
@@ -3,9 +3,9 @@ const FormBtn = (props) => {
   return (
     <div className="w-full py-2">
       <button className="rounded-lg py-2 w-full
-      border-solid border-0 border-navyBlue bg-transparent text-navyBlue
-      hover:cursor-pointer hover:bg-navyBlue hover:text-beige1
-      active:cursor-pointer active:bg-transparent active:text-navyBlue"
+      border-solid border-2 border-navyBlue bg-navyBlue text-beige1
+        hover:cursor-pointer
+        active:cursor-pointer active:bg-white active:text-navyBlue"
       onClick={props?.handleClick}>
           {props?.value ?? "Submit"}
         </button>
@@ -25,9 +25,8 @@ const FormBtns = (props) =>  {
         return (
           <div className="w-full py-2" key={i}>
             <button className="rounded-lg py-2 w-full
-            border-solid border-0 border-navyBlue bg-transparent text-navyBlue
-            hover:cursor-pointer hover:bg-navyBlue hover:text-beige1
-            active:cursor-pointer active:bg-transparent active:text-navyBlue"
+             border-solid border-2 border-navyBlue bg-white text-navyBlue
+              hover:cursor-pointer active:cursor-pointer"
             onClick={props?.handleClick}>
                 {button?.value ?? "Submit"}
             </button>

diff --git a/front-end/src/components/map/lookupBtn.jsx b/front-end/src/components/map/lookupBtn.jsx
@@ -0,0 +1,16 @@
+const LookupBtn = (props) => {
+    //attribute: value, handleClick
+    return (
+      <div className="w-full py-2">
+        <button className="rounded-lg py-2 w-full
+        border-solid border-0 border-navyBlue bg-transparent text-navyBlue
+        hover:cursor-pointer hover:bg-navyBlue hover:text-beige1
+        active:cursor-pointer active:bg-transparent active:text-navyBlue"
+        onClick={props?.handleClick}>
+            {props?.value ?? "Submit"}
+          </button>
+      </div>
+    )
+  }
+
+  export default LookupBtn
diff --git a/front-end/src/pages/Authenticate/Login.jsx b/front-end/src/pages/Authenticate/Login.jsx
@@ -70,7 +70,26 @@ const Login = () => {
 
 
   return(
+    //<div className='bg-monet-login-pattern bg-cover w-screen h-screen bg-no-repeat'>
     <>
+     <style>
+     {`
+          body::before {
+            content: '';
+            position: fixed; /* Cover the entire viewport */
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background-image: url('/field.jpg');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            filter: blur(2px); /* Apply the blur effect */
+            z-index: -1; /* Ensure it's behind the content */
+          }
+        `}
+       </style>
       <AuthHeader header="Login" message={message}/>
       <form ref={formRef} onSubmit = {handleClick}>
         <FormInputs fields={fields} />

diff --git a/front-end/src/pages/Authenticate/Register.jsx b/front-end/src/pages/Authenticate/Register.jsx
@@ -34,6 +34,24 @@ const Register = () => {
 
   return (
     <>
+     <style>
+     {`
+          body::before {
+            content: '';
+            position: fixed; /* Cover the entire viewport */
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background-image: url('/river.jpeg');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            filter: blur(2px); /* Apply the blur effect */
+            z-index: -1; /* Ensure it's behind the content */
+          }
+        `}
+       </style>
       <AuthHeader header="Register" message={message} />
       <form>
         <FormInputs fields={fields} />

diff --git a/front-end/src/pages/MainMap/MainMap.jsx b/front-end/src/pages/MainMap/MainMap.jsx
@@ -2,24 +2,26 @@ import { useState, useRef } from 'react'
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents, GeoJSON } from 'react-leaflet'
 import { Icon } from 'leaflet';
 import { useOutletContext } from "react-router-dom"
-import FormBtn from '../../components/form/formBtn';
-
+import LookupBtn from '../../components/map/lookupBtn';
+import InfoCard from '../../components/map/InfoCard';
 const MainMap = () => {
   const mapRef = useRef(null)
 
   return(
-    <>
-      <MapContainer className='mapContainer'
+    <> 
+      <MapContainer className='mapContainer my-4'
         center={[51.505, -0.09]}
         zoom={4} 
         scrollWheelZoom={false}
         whenCreated={map => mapRef.current = map}>
+
         <TileLayer 
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           />
         <LocationMarker/>
       </MapContainer>
+
     </>
   )
 }
@@ -57,7 +59,7 @@ function LocationMarker(props) {
     <Marker icon={customIcon} position={position} ref={markerRef}>
       <Popup>
 
-      <FormBtn value="Look up" handleClick={handleClick}/>
+      <LookupBtn value="Look up 🔍" handleClick={handleClick}/>
       </Popup>
     </Marker>
 

diff --git a/front-end/src/pages/MainMap/MapLayout.jsx b/front-end/src/pages/MainMap/MapLayout.jsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import PopupSearch from "./popupSearch";
 import TimeRange from '../../components/timeline/TimeRange.jsx';
 import { format, setYear, endOfYear } from 'date-fns';
+import InfoCard from "../../components/map/InfoCard.jsx";
 
 //timeline-related
 const getSpecificYear = (year) => setYear(new Date(), year);
@@ -80,7 +81,6 @@ const MapLayout = () => {
   return (
     <>
     <div className="h-[calc(100vh-6rem)] flex flex-col relative">
-
       <div className="h-[12rem]">
         <nav className="fixed py-[2vh] px-[10%] w-full bg-beige1 flex flex-col justify-between">
           <div className="relative w-full my-1">
@@ -121,6 +121,7 @@ const MapLayout = () => {
 
       <div className="w-full h-full">
         <Outlet context={[searchData, foundData, setFoundData, setRefreshPopup]}/>
+
       </div>
 
       <PopupSearch foundData={foundData} refreshPopup={refreshPopup} setRefreshPopup={setRefreshPopup}/>

diff --git a/front-end/tailwind.config.js b/front-end/tailwind.config.js
@@ -21,6 +21,10 @@ export default {
       backgroundColor: {
         "beige1": "#F8F0E5",
       },
+      backgroundImage: {
+        'monet-login-pattern': "url('/field.jpg')",
+        'monet-register-pattern': "url('/sunset.jpg')"
+      },
       spacing: {
         "80%": "80%",
         "90%": "90%",