1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 21:25:19 +02:00

feat: update button styles and add back and close functionality in location components

This commit is contained in:
Sean Morley 2025-07-30 08:06:04 -04:00
parent 707c99651f
commit 7f5b969dbf
5 changed files with 28 additions and 4 deletions

View file

@ -283,6 +283,7 @@
steps[3].selected = false; steps[3].selected = false;
steps[2].selected = true; steps[2].selected = true;
}} }}
on:close={() => close()}
/> />
{/if} {/if}
</div> </div>

View file

@ -777,7 +777,7 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="flex gap-3 justify-end pt-4"> <div class="flex gap-3 justify-end pt-4">
<button class="btn btn-ghost gap-2" on:click={handleBack}> <button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
<ArrowLeftIcon class="w-5 h-5" /> <ArrowLeftIcon class="w-5 h-5" />
Back Back
</button> </button>

View file

@ -746,8 +746,8 @@
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="flex gap-3 justify-between pt-4"> <div class="flex gap-3 justify-end pt-4">
<button class="btn btn-ghost gap-2" on:click={handleBack}> <button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
<ArrowLeftIcon class="w-5 h-5" /> <ArrowLeftIcon class="w-5 h-5" />
Back Back
</button> </button>

View file

@ -447,7 +447,7 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="flex gap-3 pt-4"> <div class="flex gap-3 pt-4">
<button class="btn btn-ghost flex-1" on:click={() => dispatch('cancel')}> <button class="btn btn-neutral-200 flex-1" on:click={() => dispatch('cancel')}>
{$t('common.cancel') || 'Cancel'} {$t('common.cancel') || 'Cancel'}
</button> </button>
<button class="btn btn-primary flex-1" on:click={continueWithLocation}> <button class="btn btn-primary flex-1" on:click={continueWithLocation}>

View file

@ -5,6 +5,7 @@
import { updateLocalDate, updateUTCDate, validateDateRange, formatUTCDate } from '$lib/dateUtils'; import { updateLocalDate, updateUTCDate, validateDateRange, formatUTCDate } from '$lib/dateUtils';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { isAllDay } from '$lib'; import { isAllDay } from '$lib';
import { createEventDispatcher } from 'svelte';
// Icons // Icons
import CalendarIcon from '~icons/mdi/calendar'; import CalendarIcon from '~icons/mdi/calendar';
@ -16,6 +17,7 @@
import AlertIcon from '~icons/mdi/alert'; import AlertIcon from '~icons/mdi/alert';
import CheckIcon from '~icons/mdi/check'; import CheckIcon from '~icons/mdi/check';
import SettingsIcon from '~icons/mdi/cog'; import SettingsIcon from '~icons/mdi/cog';
import ArrowLeftIcon from '~icons/mdi/arrow-left';
// Props // Props
export let collection: Collection | null = null; export let collection: Collection | null = null;
@ -28,6 +30,8 @@
export let visits: (Visit | TransportationVisit)[] | null = null; export let visits: (Visit | TransportationVisit)[] | null = null;
export let objectId: string; export let objectId: string;
const dispatch = createEventDispatcher();
// Types // Types
type Visit = { type Visit = {
id: string; id: string;
@ -316,6 +320,14 @@
} }
} }
function handleBack() {
dispatch('back');
}
function handleClose() {
dispatch('close');
}
// Lifecycle // Lifecycle
onMount(async () => { onMount(async () => {
if ((type === 'transportation' || type === 'lodging') && utcStartDate) { if ((type === 'transportation' || type === 'lodging') && utcStartDate) {
@ -598,5 +610,16 @@
</div> </div>
{/if} {/if}
{/if} {/if}
<div class="flex gap-3 justify-end pt-4">
<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
<ArrowLeftIcon class="w-5 h-5" />
Back
</button>
<button class="btn btn-primary gap-2" on:click={handleClose}>
<CheckIcon class="w-5 h-5" />
Done
</button>
</div>
</div> </div>
</div> </div>