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

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>
) : (