Implemented Tailwind to add forms, updated GeoJSON

2308-Bread · Feb 29, 2024 · be13c53 · be13c53
1 parent 29c70b4
commit be13c53
Show file tree

Hide file tree

Showing 8 changed files with 393 additions and 56 deletions.
diff --git a/src/components/CreateAcctForm/CreateAcctForm.css b/src/components/CreateAcctForm/CreateAcctForm.css
@@ -3,14 +3,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 5rem;
   background-color: rgba(255, 255, 255, 0.8);
   border-radius: 0.9375rem;
   box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
   padding: 2rem;
-  margin: 5rem auto 2rem;
-  width: 90%;
-  max-width: 25rem;
+  margin: 3rem auto;
+  width: calc(100% - 4rem);
+  max-width: 31.25rem;
   font-family: "Abel", sans-serif;
   gap: 1.25rem;
 }
@@ -22,17 +21,18 @@ form {
   width: 100%;
 }
 
+
 .acct-form-container h2 {
   text-align: center;
   color: #333;
   font-family: "Satisfy", cursive;
   font-size: 2rem;
-
+  
 }
 
 .acct-form-container input {
-  border: 2px solid #82aa9f;
-  border-radius: 5px;
+  border: .125rem solid #82aa9f;
+  border-radius: 0.3125rem;
   padding: 0.625rem;
   font-size: 1rem;
   color: #333;
@@ -45,11 +45,11 @@ form {
 }
 
 .acct-form-container button {
-  background-color: #82aa9f;
+  background: #82aa9f;
   color: white;
   padding: 0.625rem 1.25rem;
   border: none;
-  border-radius: 5px;
+  border-radius: 3125rem;
   cursor: pointer;
   transition: background-color 0.5s ease;
   width: 100%;
@@ -64,6 +64,6 @@ form {
 @media screen and (min-width: 750px) {
   .acct-form-container {
     width: 80%;
-    max-width: 500px;
+    max-width: 31.25rem;
   }
 }
diff --git a/src/components/CreateAcctForm/CreateAcctForm.tsx b/src/components/CreateAcctForm/CreateAcctForm.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { NewUser } from "../../apiTypes";
 import { useNavigate } from "react-router-dom";
-import "./CreateAcctForm.css";
 
 function CreateAcctForm() {
   const navigate = useNavigate();
@@ -22,34 +21,47 @@ function CreateAcctForm() {
   };
 
   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>
+    <div className="flex flex-col items-center justify-center bg-white bg-opacity-80 shadow rounded-lg p-8 my-20 mx-auto w-9/12 max-w-2xl lg:w-8/12 lg:max-w-5xl gap-5 font-satisfy">
+      <h2 className="text-2xl text-center">Create Account</h2>
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col items-center justify-center gap-1 w-full"
+      >
+        <div className="container mx-auto px-4 item-center">
+          <input
+            type="text"
+            name="name"
+            placeholder="Name"
+            className="border-2 border-green rounded px-2.5 py-1.5 text-xl text-gray-800 w-full mb-4"
+            value={formData.name}
+            onChange={handleChange}
+            required
+          />
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            className="border-2 border-green rounded px-2.5 py-1.5 text-xl text-gray-800 w-full mb-4"
+            value={formData.email}
+            onChange={handleChange}
+            required
+          />
+          <input
+            type="password"
+            name="password"
+            className="border-2 border-green rounded px-2.5 py-1.5 text-xl text-gray-800 w-full mb-4"
+            placeholder="Password"
+            value={formData.password}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          className="bg-green rounded text-xl text-black px-5 py-2.5 transition-colors duration-500 ease-in-out hover:text-white"
+        >
+          Submit
+        </button>
       </form>
     </div>
   );

diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
@@ -22,13 +22,15 @@ function LoginForm() {
   };
 
   return (
-    <div className="login-form-container">
-      <h2>Login</h2>
-      <form onSubmit={handleSubmit}>
+    <div className="flex flex-col items-center justify-center bg-white bg-opacity-80 shadow rounded-lg p-8 my-20 mx-auto w-9/12 max-w-xl lg:w-8/12 lg:max-w-5xl gap-5 font-satisfy">
+      <h2 className="text-3xl text-center">Login</h2>
+      <form onSubmit={handleSubmit} className="flex flex-col items-center justify-center gap-1 w-full">
+      <div className="container mx-auto px-4 item-center">
         <input
           type="email"
           name="email"
           placeholder="Email"
+          className="border-2 border-green rounded px-2.5 py-1.5 text-xl text-gray-800 w-full mb-4"
           value={credentials.email}
           onChange={handleChange}
           required
@@ -37,16 +39,17 @@ function LoginForm() {
           type="password"
           name="password"
           placeholder="Password"
+          className="border-2 border-green rounded px-2.5 py-1.5 text-xl text-gray-800 w-full mb-4"
           value={credentials.password}
           onChange={handleChange}
           required
         />
-        <button type="submit">Submit</button>
-
+        </div>
+        <button type="submit" className="bg-green rounded text-xl text-black w-7/12 px-5 py-2.5 transition-colors duration-500 ease-in-out mb-4 hover:text-white">Submit</button>
         <button
-          type="button"
+          type="submit"
           onClick={() => navigate("/create-account")}
-          className="sign-up-button"
+          className="bg-green rounded text-xl text-black px-5 py-2.5 transition-colors duration-500 ease-in-out hover:text-white"
         >
           New user? Sign up here
         </button>

diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css
@@ -18,7 +18,7 @@ body, html {
     height: 90%;
     width: 90%;
     align-items: center;
-    margin-top: -2rem;
+    margin-top: 3rem;
 }
 
 .error-message {
@@ -32,17 +32,17 @@ body, html {
 
 @media screen and (min-width: 750px) and (max-width: 1024px ) and (orientation: portrait) {
     .map-wrapper >h2 {
-        font-size: xx-large;
+        font-size: 2rem;
     }
 }
 
 /* LARGE BREAKPOINT */
 @media screen and (min-width: 1025px) {
     .map-wrapper {
-        padding-top: 5rem;
+        padding-top: 2rem;
     }
 
     .map-wrapper >h2 {
-        font-size: xx-large;
+        font-size: 2rem;
     }
 }
diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -36,7 +36,7 @@
 
 .navbar a:hover {
     text-decoration: underline;
-    color: #f0a202
+    color: #ffffff
 }
 
 /* RESETTING THE NAV ORIENTATION */ 

diff --git a/src/data/countries.json b/src/data/countries.json
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Abel&family=Satisfy&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
     margin: 0;
     padding: 0;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,8 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
+  content: [
+    "./src/**/*.{html,js,jsx,ts,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily:{
+        satisfy:["Satisfy", "cursive"]
+      }
+    },
+    colors: {
+      green: "#82aa9f",
+      white: "#ffffff",
+    },
   },
-  plugins: [],
 };