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

4
frontend/src/components/AddBulkIngredients.tsx
View file

@ -35,14 +35,14 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
return (
<div>
<p>Please enter each ingredient on a new line:</p>
<h3 className="text-xl font-bold">Ingredients:</h3>
<textarea
rows={8}
value={textValue}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
placeholder="Enter ingredients separated by newline..."
placeholder="Enter ingredients separated by new line"
className="mb-4 p-2 border border-gray-300 rounded w-full"
/>
</div>

4
frontend/src/components/AddBulkSteps.tsx
View file

@ -47,14 +47,14 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
return (
<div>
<p>Please enter each step on a new line:</p>
<h3 className="text-xl font-bold">Steps:</h3>
<textarea
rows={8}
value={textValue}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
placeholder="Enter steps separated by newline..."
placeholder="Enter steps separated by new line"
className="mb-4 p-2 border border-gray-300 rounded w-full"
/>
</div>

6
frontend/src/components/RecipeBookTabs.tsx
View file

@ -59,10 +59,10 @@ const RecipeBookTabs = () => {
key={tab.id}
to={tab.id}
className={`
relative px-6 py-3 rounded-t-lg font-medium text-sm transform
relative px-6 py-3 rounded-t-lg font-bold text-sm transform text-amber-800
${isActive
? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
: 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
: 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
}
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5
${isActive ? '' : ''}

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>