Merge branch 'master' into chore/landing-page

Author: cheney103

package.json

@@ -3,17 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^0.1.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "firebase": "^8.3.2",
     "mapbox-gl": "^2.1.1",
+    "postcss-loader": "^5.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^6.15.5",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1",
-    "worker-loader": "^3.0.7"
+    "worker-loader": "^3.0.7",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "npm run build:css && react-scripts start",

src/components/About.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import Header from "../components/Header";
+import Nature from "../images/coconut.jpg";
 
 const About = () => {
     return (
         <div className="w-full flex flex-col h-screen bg-gray-300 bg-gradient-to-b from-gray-100 to-gray-200">
             <Header title="Pothole App" />
             <div className=" flex-col w-full bg-white h-2/6">
-                <img className="object-cover h-full w-full" src="https://backroads-web.s3.amazonaws.com/images/trips/2016/slideshows/browser/MYTC-yellowstone-tetons-multisport-tour.jpg" alt="nature" />
+                <img className="object-cover h-full w-full" src={Nature} alt="nature" />
             </div>
             <div className="flex items-center justify-center h-screen ">
                 <div class="bg-white rounded-lg border shadow-lg p-10 w-6/12 absolute inset-x-auto bottom-0 h-5/6 "> 

src/components/Header.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 import { useAuth } from "../auth/Auth";
 
-const Header = ({ title }) => {
+const Header = () => {
   const { currentUser, logout } = useAuth();
   const history = useHistory();
 
@@ -21,33 +21,33 @@ const Header = ({ title }) => {
 
   return (
     <div className="App">
-      {currentUser ? (
-        <nav className="bg-gray-800">
-          <div className="container-xl mx-auto px-2 sm:px-6 lg:px-8">
-            <div className="relative flex items-center justify-between h-16">
-              <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                <div className="flex-shrink-0 flex items-center">
-                  <h1 className="text-white text-2xl font-bold leading-none w-auto">
-                    {title}
-                  </h1>
-                </div>
-                <div className="hidden sm:block sm:ml-8">
-                  <div className="flex space-x-4">
-                    <a
-                      className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium"
-                      href="/"
-                    >
-                      Home
-                    </a>
-                    <a
-                      className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
-                      href="/about"
-                    >
-                      About
-                    </a>
-                  </div>
+      <nav className="bg-gray-800">
+        <div className="container-xl mx-auto px-2 sm:px-6 lg:px-8">
+          <div className="relative flex items-center justify-between h-16">
+            <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+              <div className="flex-shrink-0 flex items-center">
+                <h1 className="text-white text-2xl font-bold leading-none w-auto">
+                  Road Side Report
+                </h1>
+              </div>
+              <div className="hidden sm:block sm:ml-8">
+                <div className="flex space-x-4">
+                  <a
+                    className="text-gray-300 px-3 py-2 rounded-md text-sm font-medium"
+                    href="/"
+                  >
+                    Home
+                  </a>
+                  <a
+                    className="text-gray-300 px-3 py-2 rounded-md text-sm font-medium"
+                    href="/about"
+                  >
+                    About
+                  </a>
                 </div>
               </div>
+            </div>
+            {currentUser ? (
               <div className="dropdown relative ml-3">
                 <div>
                   <img
@@ -76,30 +76,17 @@ const Header = ({ title }) => {
                   </ul>
                 </div>
               </div>
-            </div>
-          </div>
-        </nav>
-      ) : (
-        <nav className="bg-gray-800">
-          <div className="container-xl mx-auto px-2 sm:px-6 lg:px-8">
-            <div className="relative flex items-center justify-between h-16">
-              <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                <div className="flex-shrink-0 flex items-center">
-                  <h1 className="text-white text-2xl font-bold leading-none w-auto">
-                    {title}
-                  </h1>
-                </div>
-              </div>
+            ) : (
               <button
                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
                 onClick={handleSignIn}
               >
                 Sign In
               </button>
-            </div>
+            )}
           </div>
-        </nav>
-      )}
+        </div>
+      </nav>
     </div>
   );
 };

src/components/Map.js

@@ -64,8 +64,8 @@ const Map = () => {
           ) // add popup
           .setLngLat([point.Longitude, point.Latitude])
           .addTo(map);
-
           setpop(popup)
+
       });
 
       return () => ref();