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

visual tweaks

Browse source
This commit is contained in:
fred 2025-08-05 15:09:52 -07:00
parent 04bfdd0c8f
commit 93e298a9f1
5 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@ function About() {
return (
<div className="about page-outer">
<div>
<h2 className="text-xl">I made this app using the following components:</h2>
<h2 className="text-xl">This app uses the following components:</h2>
<h2 className="mt-4 font-bold text-xl">Frontend:</h2>
<ul><li>React</li><li>TypeScript</li><li>Vite</li></ul>
<h2 className="mt-4 font-bold text-xl">Backend:</h2>

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

@ -68,14 +68,13 @@ function RecipePage() {
<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">
<span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
Ingredients:
</h4>
<ul className="space-y-2">
{recipe.ingredients.map((ingredient: Ingredient, 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>
<span className="font-medium">{ingredient.raw}</span>
<span className="font-medium text-left">{ingredient.raw}</span>
</li>
))}
</ul>
@ -83,7 +82,6 @@ function RecipePage() {
<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">
<span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
Instructions:
</h4>
<ol className="space-y-3">
@ -92,7 +90,7 @@ function RecipePage() {
<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">
{recipe.steps[parseInt(stepNumber)].step_number}
</span>
<span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)].instruction}</span>
<span className="leading-relaxed text-left">{recipe.steps[parseInt(stepNumber)].instruction}</span>
</li>
))}
</ol>