Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/styling refactor #54

Merged
merged 2 commits into from
Apr 19, 2024
Merged

Feat/styling refactor #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ef10eb
Add new fonts
Apr 18, 2024
0e43de7
Update styling
Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,137 changes: 1,104 additions & 33 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
58 changes: 31 additions & 27 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions src/components/App/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
105 changes: 61 additions & 44 deletions src/components/BreadDetail/BreadDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
90 changes: 53 additions & 37 deletions src/components/BreadList/BreadList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion src/components/CreateAcctForm/CreateAcctForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
54 changes: 31 additions & 23 deletions src/components/LoginForm/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -57,4 +65,4 @@ function LoginForm() {
);
}

export default LoginForm;
export default LoginForm;
5 changes: 1 addition & 4 deletions src/components/Main/Main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@
@tailwind components;
@tailwind utilities;

body, html {
background: linear-gradient(#D0C5B9, #E7AB86 30%, #DC7333);
}
.error-message {
margin-top: 20%;
}
Expand Down Expand Up @@ -35,4 +32,4 @@ body, html {
.animate-wiggle {
animation: wiggle 0.5s ease-in-out infinite;
}
}
}
Loading
Loading