fix: button bugs

This commit is contained in:
Rotimi Best
2024-04-10 23:24:59 +01:00
parent 0eac075638
commit b7a51aeee7
3 changed files with 7 additions and 3 deletions
@@ -264,6 +264,7 @@
isLoading={$isLoading}
isDisabled={$isLoading}
variant={VARIANTS.OUTLINED}
disableScale
>
<MagicWandFilled size={20} class="carbon-icon mr-3" />
AI
@@ -25,7 +25,7 @@ export const VARIANTS_CLASS = {
[VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
[VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
[VARIANTS.OUTLINED]:
'border border-black hover:bg-neutral-600 hover:text-white text-black dark:text-white',
'border border-black dark:border-white hover:bg-neutral-600 hover:text-white text-black dark:text-white',
[VARIANTS.NONE]:
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-neutral-800 text-black',
[VARIANTS.TEXT]: 'text-black hover:underline',
@@ -12,16 +12,19 @@
export let disablePadding = false;
export let isDisabled = false;
export let isLoading = false;
export let disableScale = false;
</script>
<button
class="{isLoading || isDisabled
? 'opacity-25 cursor-not-allowed'
: 'cursor-pointer hover:scale-95 transition-all ease-in-out'} flex items-center h-auto {VARIANTS_CLASS[
: `cursor-pointer ${
!disableScale && 'hover:scale-95'
}`} flex items-center h-auto {VARIANTS_CLASS[
isLoading ? VARIANTS.OUTLINED : variant
]} {!disablePadding &&
'py-[0.5rem] px-6'} rounded-md {className} w-fit min-h-[36px] justify-center sm:w-auto {variant !==
VARIANTS.TEXT && 'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out"
VARIANTS.TEXT && 'hover:shadow-xl'} transition-all delay-150 duration-300 ease-in-out"
on:click={onClick}
{name}
{type}