diff options
Diffstat (limited to 'src/routes/groceries')
| -rw-r--r-- | src/routes/groceries/+page.svelte | 58 | ||||
| -rw-r--r-- | src/routes/groceries/catalog/+page.svelte | 3 |
2 files changed, 15 insertions, 46 deletions
diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte index b134da7..5d88e49 100644 --- a/src/routes/groceries/+page.svelte +++ b/src/routes/groceries/+page.svelte @@ -4,7 +4,9 @@ import { enhance } from '$app/forms'; import FuzzyAutocomplete from '$lib/components/FuzzyAutocomplete.svelte'; import GroceryRow from '$lib/components/GroceryRow.svelte'; + import Button from '$lib/components/Button.svelte'; import { groupByCategory } from '$lib/shared/group-by-category'; + import SectionTitle from '$lib/components/SectionTitle.svelte'; import type { EnrichedGrocery } from '$lib/server/services/groceries'; let { data, form } = $props(); @@ -75,11 +77,17 @@ handleAdd(false); }} /> - <button type="button" aria-label="Ajouter" onclick={() => handleAdd(false)} - >+</button + <Button + type="button" + variant="accent" + ariaLabel="Ajouter" + onclick={() => handleAdd(false)}>+</Button > - <button type="button" aria-label="Modifier" onclick={() => handleAdd(true)} - >→</button + <Button + type="button" + variant="outline" + ariaLabel="Modifier" + onclick={() => handleAdd(true)}>→</Button > </div> @@ -93,7 +101,7 @@ {:else} <form method="POST" action="?/toggle" use:enhance> {#each groupByCategory(localItems, data.categories) as [cat, items] (cat)} - <h3 class="category-name">{cat}</h3> + <SectionTitle level={3}>{cat}</SectionTitle> <ul class="item-list"> {#each items as item (item.id)} <GroceryRow {item} from="/groceries" /> @@ -116,46 +124,6 @@ z-index: 10; } - .grocery-add-bar button { - width: 3rem; - height: 3rem; - flex-shrink: 0; - padding: 0; - border: none; - border-radius: 0.75rem; - font-size: 1.25rem; - font-weight: 500; - font-family: inherit; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s ease; - } - - .grocery-add-bar > button:nth-of-type(1) { - background: var(--accent); - color: var(--white); - box-shadow: 0 1px 2px var(--shadow); - } - - .grocery-add-bar > button:nth-of-type(1):hover { - background: var(--accent-hover); - transform: translateY(-1px); - box-shadow: 0 4px 8px var(--shadow-accent-lg); - } - - .grocery-add-bar > button:nth-of-type(2) { - background: var(--surface); - color: var(--text-secondary); - border: 1.5px solid var(--border); - } - - .grocery-add-bar > button:nth-of-type(2):hover { - border-color: var(--accent); - color: var(--text); - } - .error { margin-bottom: 1rem; } diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte index a7f3c0e..076d3ce 100644 --- a/src/routes/groceries/catalog/+page.svelte +++ b/src/routes/groceries/catalog/+page.svelte @@ -4,6 +4,7 @@ import GroceryRow from '$lib/components/GroceryRow.svelte'; import Button from '$lib/components/Button.svelte'; import { groupByCategory } from '$lib/shared/group-by-category'; + import SectionTitle from '$lib/components/SectionTitle.svelte'; let { data, form } = $props(); @@ -73,7 +74,7 @@ {:else} <form method="POST" action="?/toggle" use:enhance> {#each groupByCategory(filteredItems, data.categories) as [cat, items] (cat)} - <h3 class="category-name">{cat}</h3> + <SectionTitle level={3}>{cat}</SectionTitle> <ul class="item-list"> {#each items as item (item.id)} <GroceryRow |