imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

More styling tweaks, updated confirmation modal

Browse Source
This commit is contained in:
Colin Kallemein
2024-10-16 22:23:00 +02:00
parent be3cbf77bf
commit 2fad54fd26
4 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/utilities/ConfirmationModal.vue
View File

@ -38,24 +38,20 @@ const modalOpened = ref(props.modalOpened)
</script>
<template>
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="350" :modal-height="230">
<template #modalHeader>
<div class="text-white">
<slot name="modalHeader"></slot>
</div>
<slot name="modalHeader"></slot>
</template>
<template #modalBody>
<div class="text-gray-300 h-full">
<div class="flex h-full flex-col justify-between">
<span class="p-2">
<slot name="modalBody"></slot>
</span>
<div class="flex justify-between p-2">
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
<div class="h-[calc(100%_-_32px)] p-4">
<div class="h-full flex flex-col justify-between">
<slot name="modalBody"></slot>
<div class="grid grid-flow-col justify-stretch gap-4">
<button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
{{ props.cancelButtonText }}
</button>
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
<button class="btn-red py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
{{ props.confirmButtonText }}
</button>
</div>