Merge pull request #54 from 2308-Bread/feat/styling-refactor

Feat/styling refactor
2308-Bread · Apr 19, 2024 · c3cc746 · c3cc746
2 parents 154f1d1 + 0e43de7
commit c3cc746
Show file tree

Hide file tree

Showing 15 changed files with 1,379 additions and 221 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
+    "tailwindcss-textshadow": "^2.1.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -1,30 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta name="theme-color" content="#000000" />
-		<meta
-			name="description"
-			content="An application showing breads of the world, sharing recipes and breaking bread together."
-		/>
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Abel&family=Satisfy&display=swap"
-			rel="stylesheet"
-		/>
-		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-		<link rel="manifest" href="/site.webmanifest" />
-		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
-		<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
-		<title>Belongea's Boulangerie</title>
-	</head>
-	<body>
-		<!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
-		<div id="root"></div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="An application showing breads of the world, sharing recipes and breaking bread together."
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Abel&family=Satisfy&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:[email protected]&family=Gluten:slnt,[email protected],100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <title>Belongea's Boulangerie</title>
+  </head>
+  <body>
+    <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
+    <div id="root"></div>
+  </body>
 </html>
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -3,10 +3,10 @@
 @tailwind utilities;
 
 .App {
-  background: linear-gradient(#D0C5B9, #E7AB86 30%, #DC7333);
+  background: linear-gradient(#F6E9DA 70%, #f4e4b3);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  font-family: "Satisfy", cursive;
+  font-family: "Caveat", cursive;
   justify-content: space-between;
 }
diff --git a/src/components/BreadDetail/BreadDetail.tsx b/src/components/BreadDetail/BreadDetail.tsx
@@ -4,54 +4,71 @@ import { fetchBreadsForCountry } from "../../apiCalls";
 import { BreadAttributes } from "../../apiTypes";
 
 const BreadDetail = () => {
-    const { id: countryName, breadId } = useParams<{ id: string; breadId: string; }>();
-    const [breadDetail, setBreadDetail] = useState<BreadAttributes | null>(null);
-    const navigate = useNavigate();
+  const { id: countryName, breadId } = useParams<{
+    id: string;
+    breadId: string;
+  }>();
+  const [breadDetail, setBreadDetail] = useState<BreadAttributes | null>(null);
+  const navigate = useNavigate();
 
-    useEffect(() => {
-        if (countryName) {
-            fetchBreadsForCountry(countryName)
-                .then((data) => {
-                    const bread = data.breads.data.find(bread => bread.attributes.name === breadId);
-                    if (bread) {
-                        setBreadDetail(bread.attributes);
-                    } else {
-                        navigate('/error'); // Redirect to error page
-                    }
-                })
-                .catch((error) => {
-                    navigate('/error'); // Redirect to error page
-                });
-        }
-    }, [countryName, breadId, navigate]);
+  useEffect(() => {
+    if (countryName) {
+      fetchBreadsForCountry(countryName)
+        .then((data) => {
+          const bread = data.breads.data.find(
+            (bread) => bread.attributes.name === breadId
+          );
+          if (bread) {
+            setBreadDetail(bread.attributes);
+          } else {
+            navigate("/error"); // Redirect to error page
+          }
+        })
+        .catch((error) => {
+          navigate("/error"); // Redirect to error page
+        });
+    }
+  }, [countryName, breadId, navigate]);
 
-    if (!breadDetail) return <div>Loading...</div>;
+  if (!breadDetail) return <div>Loading...</div>;
 
-    return (
-        <div className='recipeWrapper'>
-            <section className="BreadDetail font-abel text-center mt-6 mb-4 flex flex-col items-center sm:text-center sm:mt-16">
-                <h2 className="font-satisfy text-[2rem] mb-4">{breadDetail.name}</h2>
-                <h3 className="text-base mb-6 sm:text-xl sm:px-[10rem]">{breadDetail.description}</h3>
-                <img src={breadDetail.imageUrl} alt={breadDetail.name} className='breadImage w-[300px] h-full rounded-[65px] sm:w-[502px]'/>
-            </section>
-            <section className="recipeSection w-screen h-[calc(100vh_+_120px)] bg-[url('/public/shutterstock\_174816359.jpg')] bg-cover bg-no-repeat bg-center flex absolute items-center justify-center sm:h-auto min-h-0 py-[17.5%]">
-                <div className="recipeDetail font-abel bg-[rgba(231,171,134,0.7)] w-4/5 h-4/5 overflow-y-auto flex flex-col items-center text-base mx-auto my-0 pt-8 p-[1.7rem] rounded-[65px] sm:text-[1.2rem] sm:h-auto min-h-0 py-[10%]">
-                    <h4 className="text-[black] pt-3 pb-1 sm:pb-5 sm:text-[1.7rem]">Ingredients</h4>
-                    <ul className="sm:text-[1.3rem] sm:pb-5">
-                        {breadDetail.recipe.ingredients.map((ingredient, index) => (
-                            <li key={index}>{ingredient}</li>
-                        ))}
-                    </ul>
-                    <h4 className="text-[black] pt-3 pb-1 sm:pb-3 sm:text-[1.7rem]">Instructions</h4>
-                    <ol>
-                        {breadDetail.recipe.instructions.map((instruction, index) => (
-                            <li className="sm:text-[1.3rem] sm:pb-2" key={index}>{instruction}</li>
-                        ))}
-                    </ol>
-                </div>
-            </section>
+  return (
+    <div className="recipeWrapper">
+      <section className="BreadDetail font-caveat font-fat text-center mt-20 mb-5 px-3 flex flex-col items-center sm:text-center sm:mt-16">
+        <h2 className="font-satisfy text-[2rem] mb-4">{breadDetail.name}</h2>
+        <h3 className="text-base mb-6 sm:text-xl sm:px-[10rem]">
+          {breadDetail.description}
+        </h3>
+        <img
+          src={breadDetail.imageUrl}
+          alt={breadDetail.name}
+          className="breadImage w-[300px] h-full rounded-[65px] sm:w-[502px]"
+        />
+      </section>
+      <section className="recipeSection w-screen h-[calc(100vh)] bg-[url('/public/shutterstock\_174816359.jpg')] font-bold p-0 bg-cover bg-no-repeat bg-center flex absolute items-center justify-center sm:h-auto min-h-0 py-[17.5%] lg:text-2xl">
+        <div className="recipeDetail font-caveat bg-[rgba(231,171,134,0.7)] w-4/5 h-4/5 overflow-y-auto flex flex-col items-center text-base mx-auto my-0 pt-8 p-[1.7rem] rounded-[65px] sm:text-[1.2rem] sm:h-auto min-h-0 py-[10%]">
+          <h4 className="text-[black] pb-1 sm:pb-5 sm:text-[1.7rem]">
+            Ingredients
+          </h4>
+          <ul className="sm:text-[1.3rem] sm:pb-5">
+            {breadDetail.recipe.ingredients.map((ingredient, index) => (
+              <li key={index}>{ingredient}</li>
+            ))}
+          </ul>
+          <h4 className="text-[black] pt-3 pb-1 sm:pb-3 sm:text-[1.7rem]">
+            Instructions
+          </h4>
+          <ol>
+            {breadDetail.recipe.instructions.map((instruction, index) => (
+              <li className="sm:text-[1.3rem] sm:pb-2" key={index}>
+                {instruction}
+              </li>
+            ))}
+          </ol>
         </div>
-    );
+      </section>
+    </div>
+  );
 };
 
 export default BreadDetail;
diff --git a/src/components/BreadList/BreadList.tsx b/src/components/BreadList/BreadList.tsx
@@ -4,46 +4,62 @@ import { fetchBreadsForCountry } from "../../apiCalls";
 import { BreadData, CountryData, ApiResponse } from "../../apiTypes";
 
 const BreadList = () => {
-	const { id: countryName } = useParams();
-	const [breads, setBreads] = useState<BreadData[]>([]);
-	const [country, setCountry] = useState<CountryData | null>(null);
-	const navigate = useNavigate();
+  const { id: countryName } = useParams();
+  const [breads, setBreads] = useState<BreadData[]>([]);
+  const [country, setCountry] = useState<CountryData | null>(null);
+  const navigate = useNavigate();
 
-	useEffect(() => {
-		if (countryName) {
-			fetchBreadsForCountry(countryName)
-				.then((data: ApiResponse) => {
-					setCountry(data.country.data);
-					setBreads(data.breads.data);
-				})
-				.catch((error) => {
-					navigate("/error"); // Redirect to error page
-				});
-		}
-	}, [countryName, navigate]);
+  useEffect(() => {
+    if (countryName) {
+      fetchBreadsForCountry(countryName)
+        .then((data: ApiResponse) => {
+          setCountry(data.country.data);
+          setBreads(data.breads.data);
+        })
+        .catch((error) => {
+          navigate("/error");
+        });
+    }
+  }, [countryName, navigate]);
 
-	if (!country) return <div>Loading...</div>;
+  if (!country) return <div>Loading...</div>;
 
-	return (
-		<div className="BreadListWrapper text-center mt-8 mb-4 sm:mt-20 md:h-[100vh]">
-			<h2 className="mb-4 sm:mb-6 text-xl md:text-3xl md:mb-2">Breads from {country.attributes.name}</h2>
-			<p className="font-abel sm:text-[1.2rem] mb-3 mx-6">{country.attributes.overview}</p>
-			<p className="font-abel sm:text-[1.2rem] mb-5 mx-6">{country.attributes.culinary}</p>
-			<section className="listSection flex justify-center items-center w-screen h-[calc(100vh_+_50px)] bg-[url('/public/shutterstock\_1544878508.jpg')] bg-cover bg-no-repeat bg-center md:h-[100vh]">
-				<div className="listDetail bg-[rgba(231,171,134,0.8)] h-fit w-4/5 flex items-center text-[x-large] overflow-y-auto justify-center pt-8 p-6 rounded-[65px] sm:text-4xl">
-					<ul className="list-none p-0">
-						{breads.map((bread) => (
-							<li className="mb-8 mx-0 my-2"key={bread.id}>
-								<Link className=' no-underline text-[black] font-abel font-bold mb-4 hover:underline hover:text-[white]' to={`/breads/${countryName}/${bread.attributes.name}`}>
-									{bread.attributes.name}
-								</Link>
-							</li>
-						))}
-					</ul>
-				</div>
-			</section>
-		</div>
-	);
+  return (
+    <div className="BreadListWrapper text-center mt-8 mb-4 sm:mt-20 md:flex md:flex-row md:h-[100vh]">
+      <div className="md:w-1/2 lg: font-fat">
+        {" "}
+        <h2 className="mb-4 sm:mb-6 text-xl md:text-3xl md:mb-2">
+          Breads from {country.attributes.name}
+        </h2>
+        <p className="font-caveat sm:text-[1.2rem] mb-3 mx-6 md:text-xl">
+          {" "}
+          {country.attributes.overview}
+        </p>
+        <p className="font-caveat sm:text-[1.2rem] mb-5 mx-6 md:text-xl">
+          {" "}
+          {country.attributes.culinary}
+        </p>
+      </div>
+
+      <section className="listSection flex justify-center items-center w-screen md:w-1/2 h-[calc(100vh_+_50px)] bg-[url('/public/shutterstock_1544878508.jpg')] overflow-y-auto bg-cover bg-no-repeat bg-center lg:h-[100vh] md:h-[100vh]">
+        <div className="listDetail bg-[rgba(231,171,134,0.8)] h-fit w-4/5 flex items-center text-[x-large] justify-center pt-2 p-4 rounded-[65px] sm:text-opacity-20xl md:text-3xl lg:text-4xl">
+          {" "}
+          <ul className="list-none p-0">
+            {breads.map((bread) => (
+              <li className="mb-8 mx-0 my-2" key={bread.id}>
+                <Link
+                  className=" no-underline text-[black] font-caveat font-bold mb-4 hover:underline hover:text-[white]"
+                  to={`/breads/${countryName}/${bread.attributes.name}`}
+                >
+                  {bread.attributes.name}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+    </div>
+  );
 };
 
 export default BreadList;
diff --git a/src/components/CreateAcctForm/CreateAcctForm.tsx b/src/components/CreateAcctForm/CreateAcctForm.tsx
@@ -23,7 +23,7 @@ function CreateAcctForm() {
       <h2 className="text-2xl text-center">Create Account</h2>
       <form
         onSubmit={handleSubmit}
-        className="flex flex-col items-center justify-center gap-1 w-full font-abel"
+        className="flex flex-col items-center justify-center gap-1 w-full font-caveat"
       >
         <div className="container mx-auto px-4 item-center">
           <input

diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
@@ -23,32 +23,40 @@ function LoginForm() {
   return (
     <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 font-abel">
-        <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
-        />
-        <input
-          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
-        />
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col items-center justify-center gap-1 w-full"
+      >
+        <div className="container mx-auto px-4 item-center font-caveat">
+          <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
+          />
+          <input
+            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
+          />
         </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 font-abel">Submit</button>
+        <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 font-caveat"
+        >
+          Submit
+        </button>
         <button
           type="submit"
           onClick={() => navigate("/create-account")}
-          className="bg-green rounded text-xl text-black px-5 py-2.5 transition-colors duration-500 ease-in-out hover:text-white font-abel"
+          className="bg-green rounded text-xl text-black px-5 py-2.5 transition-colors duration-500 ease-in-out hover:text-white font-caveat"
         >
           New user? Sign up here
         </button>
@@ -57,4 +65,4 @@ function LoginForm() {
   );
 }
 
-export default LoginForm;
+export default LoginForm;
diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css
@@ -2,9 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body, html {
-    background: linear-gradient(#D0C5B9, #E7AB86 30%, #DC7333);
-}
 .error-message {
     margin-top: 20%;
   }
@@ -35,4 +32,4 @@ body, html {
     .animate-wiggle {
       animation: wiggle 0.5s ease-in-out infinite;
     }
-  }
+  }