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 */ /* buttons */
.primary-button { .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{ .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{ .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 */ /* input field */
@ -71,9 +71,17 @@
@apply flex gap-4 mt-4; @apply flex gap-4 mt-4;
} }
.horizontal-input-group{
@apply flex gap-2 mb-2 items-center;
}
/* lists */ /* lists */
.default-list { .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 ( return (
<div> <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) => ( {ingredientGroupList.map((ingGrp, index) => (
<div key={index} className="mb-2 py-4 border-y border-gray-300"> <div key={index} className="ingredient-group-card">
<div className="flex columns-2 gap-2 mb-2 items-center"> <div className="horizontal-input-group columns-2">
<input <input
className="input-field" className="input-field"
placeholder="Group title (Optional)" placeholder="Group title (Optional)"
@ -43,7 +44,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
/> />
<button <button
type="button" type="button"
className="dark-button whitespace-nowrap" className="dark-button"
onClick={() => handleRemove(index)} onClick={() => handleRemove(index)}
> >
Remove Group Remove Group
@ -57,7 +58,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
))} ))}
<button <button
type="button" type="button"
className="primary-button mt-2" className="primary-button mt-4"
onClick={handleAdd} onClick={handleAdd}
> >
➕ Add Ingredient Group ➕ Add Ingredient Group

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

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