Unify page styling in gw-events database pages

This commit is contained in:
Justin Edmund 2025-12-18 00:52:15 -08:00
parent 77cb109dd2
commit 9f377d5d01
4 changed files with 17 additions and 28 deletions

View file

@ -141,7 +141,7 @@
@use '$src/themes/typography' as typography;
.page {
padding: spacing.$unit-2x 0;
padding: 0;
margin: 0 auto;
}

View file

@ -118,14 +118,16 @@
<style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/effects' as effects;
@use '$src/themes/layout' as layout;
@use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography;
.page {
background: white;
border-radius: layout.$card-corner;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: layout.$page-corner;
box-shadow: effects.$page-elevation;
}
.loading-state,

View file

@ -67,9 +67,7 @@
// Validation
const canSave = $derived(
editData.eventNumber > 0 &&
editData.startDate !== '' &&
editData.endDate !== ''
editData.eventNumber > 0 && editData.startDate !== '' && editData.endDate !== ''
)
// Save changes
@ -116,12 +114,7 @@
<Button variant="secondary" size="small" onclick={handleCancel}>Cancel</Button>
{/snippet}
{#snippet rightAccessory()}
<Button
variant="primary"
size="small"
onclick={handleSave}
disabled={!canSave || isSaving}
>
<Button variant="primary" size="small" onclick={handleSave} disabled={!canSave || isSaving}>
{isSaving ? 'Saving...' : 'Save'}
</Button>
{/snippet}
@ -175,14 +168,16 @@
<style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/effects' as effects;
@use '$src/themes/layout' as layout;
@use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography;
.page {
background: white;
border-radius: layout.$card-corner;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: layout.$page-corner;
box-shadow: effects.$page-elevation;
}
.loading-state {

View file

@ -109,32 +109,24 @@
type="select"
options={elementOptions}
/>
<DetailItem
label="Start date"
bind:value={editData.startDate}
editable={true}
type="date"
/>
<DetailItem
label="End date"
bind:value={editData.endDate}
editable={true}
type="date"
/>
<DetailItem label="Start date" bind:value={editData.startDate} editable={true} type="date" />
<DetailItem label="End date" bind:value={editData.endDate} editable={true} type="date" />
</DetailsContainer>
</section>
</div>
<style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/effects' as effects;
@use '$src/themes/layout' as layout;
@use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography;
.page {
background: white;
border-radius: layout.$card-corner;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: layout.$page-corner;
box-shadow: effects.$page-elevation;
}
.error-banner {