araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

css

Browse source
This commit is contained in:
Anika Raemer 2025-09-08 20:19:03 +02:00
parent 3eefa41a28
commit 1bd1952ecb
3 changed files with 19 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/App.css
View file

@ -46,15 +46,15 @@
/* buttons */
.primary-button {
@apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600
@apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap
}
.default-button{
@apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600
@apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 whitespace-nowrap text-gray-600
}
.dark-button{
@apply bg-gray-600 text-white rounded px-4 py-2
@apply bg-gray-600 hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap
}
/* input field */
@ -71,9 +71,17 @@
@apply flex gap-4 mt-4;
}
.horizontal-input-group{
@apply flex gap-2 mb-2 items-center;
}
/* lists */
.default-list {
@apply list-disc pl-6 mb-6
@apply list-disc pl-6 mb-6;
}
.ingredient-group-card {
@apply py-4 border-b border-gray-400;
}
}

11
frontend/src/components/IngredientGroupListEditor.tsx
View file

@ -31,10 +31,11 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
}
return (
<div>
<h3 className="subsection-heading">Ingredient Groups</h3>
{/* remove bottom margin from this headingas the group card has a top padding */}
<h3 className="subsection-heading" >Ingredient Groups</h3>
{ingredientGroupList.map((ingGrp, index) => (
<div key={index} className="mb-2 py-4 border-y border-gray-300">
<div className="flex columns-2 gap-2 mb-2 items-center">
<div key={index} className="ingredient-group-card">
<div className="horizontal-input-group columns-2">
<input
className="input-field"
placeholder="Group title (Optional)"
@ -43,7 +44,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
/>
<button
type="button"
className="dark-button whitespace-nowrap"
className="dark-button"
onClick={() => handleRemove(index)}
>
Remove Group
@ -57,7 +58,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
))}
<button
type="button"
className="primary-button mt-2"
className="primary-button mt-4"
onClick={handleAdd}
>
➕ Add Ingredient Group

2
frontend/src/components/IngredientListEditor.tsx
View file

@ -29,7 +29,7 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
<div>
<h3 className="subsection-heading">Ingredients</h3>
{ingredients.map((ing, index) => (
<div key={index} className="flex gap-2 mb-2 items-center">
<div key={index} className="horizontal-input-group">
<input
type="number"
className="input-field"