Implemented Tailwind / Added Forms

src/components/App/App.css

@@ -5,5 +5,4 @@
   flex-direction: column;
   font-family: "Satisfy", cursive;
   justify-content: space-between;
-  padding-bottom: 5rem;
 }

src/components/BreadList/BreadList.css

@@ -89,8 +89,9 @@
 @media screen and (min-width: 1025px){
   .BreadListWrapper h2 {
     margin-top: 2rem;
-    font-size: xx-large;
+    font-size: 2rem;
     margin-bottom: 1rem;
+    margin-top: 3rem;
   }
 
   .BreadListWrapper p {

src/components/CreateAcctForm/CreateAcctForm.tsx

@@ -1,52 +1,58 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { NewUser } from "../../apiTypes";
-import './CreateAcctForm.css';
+import { useNavigate } from "react-router-dom";
+import "./CreateAcctForm.css";
 
 function CreateAcctForm() {
-    const [formData, setFormData] = useState<NewUser>({ name: '', email: '', password: '' })
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState<NewUser>({
+    name: "",
+    email: "",
+    password: "",
+  });
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, value } = event.target
-        setFormData({ ...formData, [name]: value })
-    };
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormData({ ...formData, [name]: value });
+  };
 
-    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault()
-        // console.log(formData)
-    };
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // console.log(formData)
+  };
 
-    return (
-        <div className="acct-form-container">
-         <h2>Create Account</h2>
-         <form onSubmit={handleSubmit}>
-            <input 
-                type="text" 
-                name="name" 
-                placeholder="Name"
-                value={formData.name} 
-                onChange={handleChange} 
-                required 
-            />
-            <input 
-                type="email" 
-                name="email" 
-                placeholder="Email"
-                value={formData.email} 
-                onChange={handleChange} 
-                required
-            />
-            <input 
-                type="password" 
-                name="password" 
-                placeholder="Password"
-                value={formData.password} 
-                onChange={handleChange} 
-                required 
-            />
+  return (
+    <div className="acct-form-container">
+      <h2>Create Account</h2>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          name="name"
+          placeholder="Name"
+          value={formData.name}
+          onChange={handleChange}
+          required
+        />
+        <input
+          type="email"
+          name="email"
+          placeholder="Email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          value={formData.password}
+          onChange={handleChange}
+          required
+        />
         <button type="submit">Submit</button>
       </form>
     </div>
-  )
+  );
 }
 
-export default CreateAcctForm;
+export default CreateAcctForm;

src/components/Error/Error.tsx

@@ -3,7 +3,7 @@ import React from "react";
 const Error = () => {
   return (
     <div className="error-container">
-      <h2 className="error-message">Sorry, this page doesn't exist.</h2>
+      <h2 className="error-message">Check out the world map to add breads to your breadBox!</h2>
     </div>
   );
 }

src/components/LoginForm/LoginForm.css

@@ -58,4 +58,4 @@
     width: 80%;
     max-width: 500px;
   }
-}
+}

src/components/LoginForm/LoginForm.tsx

@@ -1,44 +1,58 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { UserCredentials } from "../../apiTypes";
-import './LoginForm.css';
+import { useNavigate } from "react-router-dom";
+import "./LoginForm.css";
 
 function LoginForm() {
-    const [credentials, setCredentials] = useState<UserCredentials>({ email: '', password: '' });
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const { name, value } = event.target;
-      setCredentials({ ...credentials, [name]: value })
-    };
-
-    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
+  const navigate = useNavigate();
+
+  const [credentials, setCredentials] = useState<UserCredentials>({
+    email: "",
+    password: "",
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setCredentials({ ...credentials, [name]: value });
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
     //   console.log(credentials)
-    };
-
-    return (
-        <div className="login-form-container">
-          <h2>Login</h2>
-          <form onSubmit={handleSubmit}>
-            <input 
-                type="email" 
-                name="name" 
-                placeholder="Email"
-                value={credentials.email} 
-                onChange={handleChange} 
-                required 
-            />
-            <input 
-                type="password" 
-                name="password" 
-                placeholder="Password"
-                value={credentials.password} 
-                onChange={handleChange} 
-                required 
-                />
-            <button type="submit">Submit</button>
-          </form>
-        </div>
-      )
-    }
-
-  export default LoginForm;
+  };
+
+  return (
+    <div className="login-form-container">
+      <h2>Login</h2>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="email"
+          name="email"
+          placeholder="Email"
+          value={credentials.email}
+          onChange={handleChange}
+          required
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          value={credentials.password}
+          onChange={handleChange}
+          required
+        />
+        <button type="submit">Submit</button>
+
+        <button
+          type="button"
+          onClick={() => navigate("/create-account")}
+          className="sign-up-button"
+        >
+          New user? Sign up here
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default LoginForm;

src/components/Main/Main.css

@@ -18,11 +18,7 @@ body, html {
     height: 90%;
     width: 90%;
     align-items: center;
-
-}
-
-.map-wrapper >h2 {
-    font-size: large;
+    margin-top: -2rem;
 }
 
 .error-message {
@@ -38,7 +34,6 @@ body, html {
     .map-wrapper >h2 {
         font-size: xx-large;
     }
-
 }
 
 /* LARGE BREAKPOINT */

src/components/Main/Main.tsx

@@ -7,7 +7,7 @@ const Main = () => {
   return (
     <div className="main">
       <div className='map-wrapper'>
-        <h2>Select a country from our world bakery</h2>
+        <h2>Select a country from our world bakery!</h2>
       <div className="map-background">
         <div className="map-container">
           <MapComponent />

src/components/Map/Map.css

@@ -1,34 +1,36 @@
 .map-container {
-    width: 100%;
-    height: 60vh;
-    border-radius: 1.5rem;
-    overflow: hidden;
-
+  width: 100%;
+  height: 60vh;
+  border-radius: 1.5rem;
+  overflow: hidden;
 }
-  
+
 .map-background {
-    margin-top: 4rem;
-    background-color: #f0a202; 
-    padding: 1.5rem;
-    border-radius: 1.5rem;
-    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
-    width: 60%;
-    display: flex;
-    justify-content: center;
+  margin-top: 1rem;
+  background-color: #f0a202;
+  padding: 1.5rem;
+  border-radius: 1.5rem;
+  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+  width: 60%;
+  display: flex;
+  justify-content: center;
 }
 
 /* SMALL BREAKPOINT */
 @media screen and (max-width: 750px) {
-    .map-background {
-        margin-bottom: 10rem;
-        width: 95%;
-    }
- }
-
+  .map-background {
+    margin-bottom: 10rem;
+    width: 95%;
+  }
+
+  .map-container {
+    height: 50vh; /* Adjust for smaller devices */
+  }
+}
+
 /* MEDIUM BREAKPOINT (altered for map filling container) */
 @media screen and (max-width: 1195px) and (min-width: 750px) {
-    .map-background {
-        width: 90%;
-
-    }
-}
+  .map-background {
+    width: 90%;
+  }
+}

src/components/Navbar/Navbar.css

@@ -5,7 +5,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 3rem;
+    height: 4rem;
     z-index: 1000;
     display: flex;
     justify-content: space-between;
@@ -14,28 +14,29 @@
 }
 
 .navbar h1 {
-    margin: 0;
-    font-size: 1rem;
-    color: #000000;
+  font-size: 1rem;
+  white-space: nowrap;
+  max-width: 100%;
 }
 
 .navbar .nav-links {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    width: 30%;
+    justify-content: flex-end;
+    width: 100%;
+    padding: 1rem
 }
 
 .navbar a {
     color: #000000;
     text-decoration: none;
-    padding: 0.5rem;
+    padding: 1rem;
     font-size: .9rem;
 }
 
 .navbar a:hover {
     text-decoration: underline;
-    color: white
+    color: #f0a202
 }
 
 /* RESETTING THE NAV ORIENTATION */