Alexander
07610a498f
Replace hardcoded Nord colors with semantic CSS variables across all cospend pages and shared components (FormSection, ImageUpload, SplitMethodSelector, UsersList, PaymentModal, BarChart). Remove all dark mode override blocks. Make BarChart font colors theme-reactive via isDark() + MutationObserver. Extract reusable SaveFab component and use it on recipe edit and all cospend edit/add pages. Remove Cancel buttons and back links in favor of browser navigation. Replace raw checkboxes with Toggle component. Move fitness measurement add/edit forms to separate routes with SaveFab. Collapse profile section (sex/height) by default on the measure page. Document theming rules in CLAUDE.md for future reference.
30 lines
605 B
Svelte
30 lines
605 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
let { title = '', children } = $props<{ title?: string, children?: Snippet }>();
|
|
</script>
|
|
|
|
<div class="form-section">
|
|
{#if title}
|
|
<h2>{title}</h2>
|
|
{/if}
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style>
|
|
.form-section {
|
|
background: var(--color-surface);
|
|
padding: 1.5rem;
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.form-section h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
color: var(--color-text-primary);
|
|
font-size: 1.25rem;
|
|
}
|
|
</style>
|