Moving develop to main as of 16:55 EST

client/src/components/App.js

@@ -53,9 +53,9 @@ const App = () => {
         <Skeleton path="/" handleLogin={handleLogin} handleLogout={handleLogout} userId={userId} />
         <About path="/about/"/>
         <Projects path="/projects/" userId={userId}/>
-        <Results path="/results/" />
-        <Inputs path="/inputs/" />
-        <NotFound default />
+        <Results path="/results/" userId={userId}/>
+        <Inputs path="/inputs/" userId={userId}/>
+        <NotFound default userId={userId}/>
       </Router>
     </>
   );

client/src/components/modules/Card.css

@@ -1,70 +1,105 @@
 .Card-Container {
   padding: var(--m) var(--m) var(--m);
+  background-color: white;
   flex-direction: column;
   display: flex;
   align-items: center;
-  background-color: white;
-
-  }
-
+  flex-grow: 0;
+  height: 68%;
+  border-radius: 8px;
+}
+
 .Project-Name {
-    color: var(--white);
-    font-size: 32px;
-    text-align: center;
-  }
-
+  color: black;
+  font-size: 32px;
+  text-align: center;
+  height: 10%;
+  background-color: white;
+  border-radius: 8px;
+  padding-top: 4px;
+  padding-bottom: 14px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .flex-Container {
-    padding: var(--m) var(--m) var(--m);
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    background-color: rgb(42, 50, 49);
-    width: 400px;
-    height: 400px;
-    margin: 40px;
-  }
-
+  padding: 0px var(--m) var(--m);
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  background-color: rgb(42, 50, 49);
+  width: 300px;
+  height: 350px;
+  margin: 40px;
+  flex-grow: 0;
+  border-radius: 8px;
+}
+
 .Project-Display {
   flex-direction: row;
   display: flex;
   justify-content: space-between;
+  width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20px;
+  padding: 10px;
 }
 .flex-items {
-  width: 250px;
-  height: 30px;
+  width: fit-content;
+  height: 20px;
   text-align: center;
-  font-size: 20px;
+  font-size: 18px;
   line-height: 0.5;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 2px;
+  max-width: 50%;
 }
 
 .Display-Pic {
-  flex-basis: 180px;
-  display:flex;
+  display: flex;
   margin: 2%;
   margin-left: auto;
   margin-right: auto;
-  padding: 25px;
-  display: block; 
-  width: 300px;
+  flex-basis: 20%;
+  max-height: 60%;
 }
+
+.Display-Pic1 {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 8px;
+}
+
 .SeeMore-Button {
   background-color: rgb(125, 203, 176);
   color: black;
   border: 3px solid black;
   font-size: 16px;
   border-radius: 16px;
-  padding: 12px;
-  }
-
+  margin-top: 5px;
+  padding: 12px 16px;
+  flex-basis: 10%;
+  flex-grow: 0;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.buttonDiv {
+  flex-basis: 30%;
+  flex-grow: 0;
+}
 
 .SeeMore-Button:hover {
   background-color: rgb(0, 85, 56);
-  color: white; 
-  }
-
-
+  color: white;
+}
 
 .NavBar-link.NavBar-login {
-    border-radius: 10px;
-  }
-
+  border-radius: 10px;
+}

client/src/components/modules/Card.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "@reach/router";
 import { get } from "../../utilities";
+import { useLocation, useNavigate } from "@reach/router";
 
 import "./Card.css";
 
@@ -10,7 +11,8 @@ import "./Card.css";
  * @param {string} _id
  * @param {string} project_type
  * @param {string} creator_id
- * @param {string} location
+ * @param {string} location_city
+ * @param {string} location_country
  * @param {string} picture
  * @param {string} emissions
  * @param {string} results_id
@@ -19,20 +21,29 @@ import "./Card.css";
 
 
 const Card = (props) => {
+  let navigate = useNavigate();
+  const navigateResults = () => {
+    navigate("/results", { state: { project_id: props.project_id, user_id: props.creator_id } })
+  }
+
   return (
     <div className="flex-Container">
       <h1 className="Project-Name">{props.project_name}</h1>
-        <div className="Card-Container">
-  
-          <div className="Project-Display">
-            <div className = "flex-items">{props.location}</div>
-            <div className = "flex-items">{props.emissions}</div>
-          </div>
-          <img className="Display-Pic" src={props.picture} alt="This is a nice image" />
-          <Link to="/results/" className="SeeMore-Button">See More</Link>
+      <div className="Card-Container">
+
+        <div className="Project-Display">
+          <div className="flex-items">{props.project_type}</div>
+          <div className="flex-items">{props.location_city}, {props.location_country}</div>
+        </div>
+        <div className="Display-Pic">
+          <img className="Display-Pic1" src={props.picture} />
         </div>
+        <div className="buttonDiv">
+          <button type="button" className="SeeMore-Button"  onClick={() => { navigateResults() }}>See More</button>
+        </div>
+      </div>
     </div>
-    
+
   );
 };
 

client/src/components/modules/Dropdown.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "@reach/router";
+
+import "./Dropdown.css";
+
+
+/**
+ * The navigation bar at the top of all pages. Takes no props.
+ */
+const Dropdown = (props) => {
+  //   function favTutorial() {
+  //     var mylist = document.getElementById("myList");
+  //     document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;
+  //     }
+  return (
+    <div>
+      <select id="myList"
+        value={projectType}
+        onChange={props.handleProjectTypeChange} >
+        <option> ---Select--- </option>
+        <option> Table </option>
+        <option> Garden Pot </option>
+        <option> Lamp </option>
+        <option> Kitchen Appliance </option>
+        <option> Backyard Shed </option>
+      </select>
+
+    </div>);
+};
+
+export default Dropdown;

client/src/components/modules/NavBar.css

@@ -1,44 +1,97 @@
 .NavBar-container {
-    padding: var(--s) var(--l);
-    background-color: var(--white);
-    display: flex;
-    justify-content: space-between;
-    align-items:center;
-    position: sticky;
-    top: 0;
-
-  }
-
+  padding: var(--s) var(--l);
+  background-color: var(--white);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+}
+
+.logo-container {
+  padding: var(--s) var(--l);
+  background-color: var(--white);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  cursor: pointer;
+}
+
 .NavBar-title {
-    color: var(--black);
-    font-size: 32px;
-  }
-
+  transition: text-shadow 0.2s ease-in-out;
+}
+.logo-container:hover .NavBar-title {
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
+}
+.logo {
+  width: 40px;
+  margin-right: 2px;
+}
+
+.NavBar-title {
+  color: var(--black);
+  font-size: 32px;
+  font-weight: bold;
+  text-decoration: none;
+}
+
 .NavBar-linkContainer {
-    padding: var(--m) var(--m) var(--m);
-    display: flex;
-    align-items: center;
-  }
-  
+  padding: var(--m) var(--m) var(--m);
+  display: flex;
+  align-items: center;
+}
+
 .NavBar-link,
 .NavBar-link:visited {
-    color: black;
-    font-size: 18px;
-    text-decoration: none;
-    height: 20px;
-    margin: 0px 32px 0px 0px;
-    padding-bottom: 3px; 
-    border-bottom-width: 3px;
-    border-bottom-style: solid;
-    border-bottom-color: transparent;
-  }
-  
+  color: black;
+  font-size: 18px;
+  text-decoration: none;
+  height: 20px;
+  margin: 0px 32px 0px 0px;
+  padding-bottom: 3px;
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+  border-bottom-color: transparent;
+}
+
 .NavBar-link:hover {
-    color: rgb(9, 156, 124);
-    border-bottom-color: rgb(9, 156, 124);
-  }
+  color: rgb(9, 156, 124);
+  border-bottom-color: rgb(9, 156, 124);
+}
 
 .NavBar-link.NavBar-login {
-    border-radius: 10px;
-  }
-
+  border-radius: 10px;
+}
+
+.logo-text {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+}
+
+.signout-button {
+  background-color: rgb(220, 223, 221);
+  color: black;
+  border: 1.5px solid black;
+  font-size: 16px;
+  border-radius: 5.75px;
+  margin-top: 5px;
+  margin-left: 15px;
+  padding: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  flex-basis: 10%;
+  flex-grow: 0;
+  min-width: 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.signout-button:hover {
+  background-color: darkgray;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
+  transform: translateY(-2px);
+}