fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

centralize the theming

Browse source
This commit is contained in:
fred 2025-08-20 10:06:23 -07:00
parent 30b28056de
commit db8b20ee71
20 changed files with 183 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/pages/About.tsx
View file

@ -3,17 +3,17 @@ function About() {
return (
<div className="about page-outer">
<div>
<h2 className="text-xl">This app uses the following components:</h2>
<h2 className="mt-4 font-bold text-xl">Frontend:</h2>
<h2 className="text-xl text-[var(--color-secondaryTextDark)]">This app uses the following components:</h2>
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Frontend:</h2>
<ul><li>React</li><li>TypeScript</li></ul>
<h2 className="mt-4 font-bold text-xl">Backend:</h2>
<ul><li>Node.js & Express</li><li>PostgreSQL</li></ul>
<h2 className="mt-4 font-bold text-xl">Containerization:</h2>
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Backend:</h2>
<ul><li>Node.js & Express</li><li>PostgreSQL</li><li>Prisma</li></ul>
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Containerization:</h2>
<ul><li>Docker</li></ul>
<h2 className="mt-4 font-bold text-xl">Styling/UI:</h2>
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Styling/UI:</h2>
<ul><li>Tailwind CSS</li></ul>
<p className="mt-4">More about me <a className="text-blue-600" target="_blank" href="https://fredzernia.com">here</a> |
Code for this app <a className="text-blue-600" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
<p className="mt-4 text-[var(--color-secondaryTextDark)]">More about me <a className="text-[var(--color-textLink)]" target="_blank" href="https://fredzernia.com">here</a> |
Code for this app <a className="text-[var(--color-textLink)]" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
</div>
</div >
)

21
frontend/src/pages/AddRecipe.tsx
View file

@ -5,6 +5,7 @@ import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
import AddBulkSteps from "../components/AddBulkSteps.tsx"
import StarRating from "../components/StarRating.tsx"
import DemoModal from '../components/DemoModal.tsx'
import '../css/colorTheme.css';
interface Step {
step_number: number;
@ -65,7 +66,7 @@ function AddRecipe() {
<input
type="text"
placeholder="Title"
className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
value={recipeName}
maxLength={35}
onChange={(e) => setRecipeName(e.target.value)}
@ -73,7 +74,7 @@ function AddRecipe() {
<input
type="text"
placeholder="Cuisine"
className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
value={recipeCuisine}
maxLength={15}
onChange={(e) => setRecipeCuisine(e.target.value)}
@ -81,32 +82,32 @@ function AddRecipe() {
<input
type="text"
placeholder="Author"
className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
value={author}
onChange={(e) => setAuthor(e.target.value)}
/>
<div className="flex items-center justify-between mb-4">
<div>
<label htmlFor="prepTime" className="mr-2 font-bold">Prep Time:</label>
<label htmlFor="prepTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Prep Time:</label>
<input
type="number"
placeholder="prep time in minutes"
className="recipe-cusine p-2 border border-gray-300 rounded w-24"
className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
value={prepMinutes}
onChange={(e) => setPrepMinutes(parseInt(e.target.value))}
/>
<span className="ml-2">minutes</span>
<span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
</div>
<div>
<label htmlFor="cookTime" className="mr-2 font-bold">Cook Time:</label>
<label htmlFor="cookTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Cook Time:</label>
<input
type="number"
placeholder="cook time in minutes"
className="recipe-cusine p-2 border border-gray-300 rounded w-24"
className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
value={cookMinutes}
onChange={(e) => setCookMinutes(parseInt(e.target.value))}
/>
<span className="ml-2">minutes</span>
<span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
</div>
<div>
<StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
@ -142,7 +143,7 @@ function AddRecipe() {
</li>
))}
</ul>*/}
<button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
<button type="submit" className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]">
submit
</button>
</form>

60
frontend/src/pages/Index.tsx
View file

@ -1,8 +1,8 @@
import { useState, useEffect } from "react";
import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx";
import { getRecipes } from "../services/frontendApi.js";
import { type RecipeSmall } from "../types/Recipe.ts"
import { type RecipeSmall } from "../types/Recipe.ts";
import '../css/colorTheme.css'
function AllRecipes() {
const [searchQuery, setSearchQuery] = useState("");
@ -18,13 +18,16 @@ function AllRecipes() {
try {
const recipes = await getRecipes();
setRecipes(recipes);
if (process.env.NODE_ENV === 'dev') {
console.log(recipes)
if (process.env.NODE_ENV === "dev") {
console.log(recipes);
}
const uniqueCuisines: string[] = recipes.length > 0
? Array.from(new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)))
: [];
setCuisines(uniqueCuisines)
const uniqueCuisines: string[] =
recipes.length > 0
? Array.from(
new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)),
)
: [];
setCuisines(uniqueCuisines);
} catch (error) {
console.log(error);
setError("Failed to load recipes...");
@ -37,38 +40,51 @@ function AllRecipes() {
}
}, [shouldFetchRecipes]);
const filteredRecipes = selectedCuisine ? recipes.filter(recipe => recipe.cuisine === selectedCuisine) : recipes;
const filteredRecipes = selectedCuisine
? recipes.filter((recipe) => recipe.cuisine === selectedCuisine)
: recipes;
return (
<div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
<h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
<div className="add-recipe-card bg-[var(--color-primaryBg)] border border-[var(--color-primaryBorder)] rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
<h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-[var(--color-textDark)]">
Recipe Index
</h1>
<div className="cuisines-buttons flex flex-wrap justify-center">
<input
type="text"
placeholder="search"
className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
{cuisines.map((cuisine) => (
<button
key={cuisine}
className={`ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700 m-2 ${selectedCuisine === cuisine ? 'selected bg-amber-800' : ''}`}
onClick={() => setSelectedCuisine((prevState => prevState === cuisine ? "" : cuisine))}
className={`ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)] m-2 ${selectedCuisine === cuisine ? "selected bg-[var(--color-buttonBgHover)]" : ""}`}
onClick={() =>
setSelectedCuisine((prevState) =>
prevState === cuisine ? "" : cuisine,
)
}
>
{cuisine}
</button>
))}
</div> {error && <div className="error-message">{error}</div>}
</div>{" "}
{error && <div className="error-message">{error}</div>}
{loading ? (
<div className="loading">Loading...</div>
) : (
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
<div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{filteredRecipes.map((recipe) => (
recipe.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
<CookbookRecipeTile recipe={recipe} key={recipe.id} />
))}
{filteredRecipes.map(
(recipe) =>
recipe.name
.toLowerCase()
.includes(searchQuery.toLowerCase()) && (
<CookbookRecipeTile recipe={recipe} key={recipe.id} />
),
)}
</div>
</div>
)}
@ -76,4 +92,4 @@ function AllRecipes() {
);
}
export default AllRecipes
export default AllRecipes;

2
frontend/src/pages/RecipeIngredients.tsx
View file

@ -28,7 +28,7 @@ function RecipeIngredients() {
{loading ? (
<div className="loading">Loading...</div>
) : (
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
<div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{recipeIngredients.map((ing, idx) => (
<li key={idx}>{ing}</li>

32
frontend/src/pages/RecipePage.tsx
View file

@ -101,34 +101,34 @@ function RecipePage() {
<div className="m-2">
<Link
to="/"
className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700"
className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]"
>
Return to Cookbook
</Link>
</div>
</div>
) : (
<div className="border-b-2 border-amber-300 pb-4">
<div className="border-b-2 border-[var(--color-primaryBorder)] pb-4">
<div className="recipe-card">
<div className="flex relative justify-between">
<button
onClick={() => {}}
onClick={() => { }}
className="invisible ar-button py-1 px-1 rounded self-start"
>
🗑️
</button>
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-[var(--color-textDark)]">
{recipe.details.name}
</h3>
<button
onClick={openModal}
className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start"
className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-1 px-1 rounded hover:bg-[var(--color-buttonBgHover)] self-start"
>
🗑️
</button>
</div>
<div className="mt-1">
<p className="text-amber-700 italic text-lg">
<p className="text-[var(--color-textDark)] italic text-lg">
{recipe.details.cuisine}
</p>
<p>
@ -140,22 +140,22 @@ function RecipePage() {
</div>
<div className="grid lg:grid-cols-2 gap-6 mb-6">
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
<div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
<h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
Ingredients:
</h4>
<ul className="space-y-2">
{recipe.ingredients.map((ingredient: string, index) => (
<li key={index} className="text-gray-700 flex items-start">
<span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
<li key={index} className="text-[var(--color-secondaryTextDark)] flex items-start">
<span className="w-1.5 h-1.5 bg-[var(--color-buttonBg)] rounded-full mt-2 mr-3 flex-shrink-0"></span>
<span className="font-medium text-left">{ingredient}</span>
</li>
))}
</ul>
</div>
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
<div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
<h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
Instructions:
</h4>
<ol className="space-y-3">
@ -163,9 +163,9 @@ function RecipePage() {
Object.keys(recipe.steps || {}).map((stepNumber) => (
<li
key={stepNumber}
className="text-gray-700 flex items-start"
className="text-[var(--color-secondaryTextDark)] flex items-start"
>
<span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
<span className="bg-[var(--color-buttonBg)] text-[var(--color-textLight)] rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
{recipe.steps[parseInt(stepNumber)].step_number}
</span>
<span className="leading-relaxed text-left">
@ -177,8 +177,8 @@ function RecipePage() {
</div>
</div>
<div className="border-t-2 border-amber-300 pt-4">
<div className="flex justify-between items-center text-sm text-amber-600">
<div className="border-t-2 border-[var(--color-primaryBorder)] pt-4">
<div className="flex justify-between items-center text-sm text-[var(--color-textDark)]">
{isWebSource ? (
<span>Source: {recipe.details.author}</span>
) : (

2
frontend/src/pages/RecipeSteps.tsx
View file

@ -30,7 +30,7 @@ function RecipeSteps() {
{loading ? (
<div className="loading">Loading...</div>
) : (
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
<div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{recipeSteps.map(step => (
<li key={step.id}>