chore: minor ui improvements to modal

This commit is contained in:
Liyas Thomas
2023-12-12 23:32:42 +05:30
parent 6abc0e6071
commit ff5c2ba51c
2 changed files with 12 additions and 8 deletions

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col space-y-2">
<HoppSmartItem <HoppSmartItem
v-for="source in sources" v-for="source in sources"
:key="source.id" :key="source.id"

View File

@@ -32,18 +32,22 @@
<Transition name="bounce" appear> <Transition name="bounce" appear>
<div <div
class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle" class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
:class="[{ 'mt-24 md:mb-8': placement === 'top' }, styles]" :class="[{ 'mt-16 md:mb-8': placement === 'top' }, styles]"
> >
<div <div
v-if="title" v-if="title"
class="flex items-center justify-between border-b border-dividerLight" class="flex items-center justify-between border-b border-dividerLight"
:class="{ 'p-4': !fullWidth }" :class="{ 'p-4': !fullWidth }"
> >
<h3 class="heading" :class="{ 'ml-4': !fullWidth }"> <div class="flex items-center flex-1 justify-start">
{{ title }}
</h3>
<span class="flex items-center">
<slot name="actions"></slot> <slot name="actions"></slot>
</div>
<div class="flex items-center justify-center">
<h3 class="heading">
{{ title }}
</h3>
</div>
<div class="flex items-center flex-1 justify-end">
<HoppButtonSecondary <HoppButtonSecondary
v-if="dimissible" v-if="dimissible"
v-tippy="{ theme: 'tooltip', delay: [500, 20] }" v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -51,10 +55,10 @@
:icon="IconX" :icon="IconX"
@click="close" @click="close"
/> />
</span> </div>
</div> </div>
<div <div
class="flex flex-col overflow-y-auto max-h-[50vh]" class="flex flex-col overflow-y-auto max-h-[55vh]"
:class="{ 'p-4': !fullWidth }" :class="{ 'p-4': !fullWidth }"
> >
<slot name="body"></slot> <slot name="body"></slot>