Skip to content

Commit

Permalink
fix: make successfail work on all screen sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
awwpotato committed Nov 15, 2024
1 parent 151ef86 commit ae4160a
Showing 1 changed file with 16 additions and 14 deletions.
30 changes: 16 additions & 14 deletions src/lib/components/SuccessFail.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,21 @@
$props();
</script>

<div
class="fixed inset-0 grid grid-cols-2 grid-rows-4 gap-4 bg-eerie_black p-4 text-xl font-extrabold text-white"
>
<button
class="row-span-3 rounded-lg bg-jungle_green shadow-lg shadow-jungle_green/50"
onclick={() => complete(true)}>Success</button
>
<button
class="row-span-3 rounded-lg bg-flaming_red shadow-lg shadow-flaming_red/50"
onclick={() => complete(false)}>Fail</button
>
<button
class="col-span-2 rounded-lg bg-gunmetal shadow-lg shadow-gunmetal/50"
onclick={() => cancel()}>Cancel</button
<div class="fixed inset-0 flex items-center justify-center bg-eerie_black">
<div
class="grid h-dvh max-h-[48rem] w-dvw max-w-96 grid-cols-2 grid-rows-4 gap-4 p-4 text-xl font-extrabold text-white"
>
<button
class="row-span-3 rounded-lg bg-jungle_green shadow-lg shadow-jungle_green/50"
onclick={() => complete(true)}>Success</button
>
<button
class="row-span-3 rounded-lg bg-flaming_red shadow-lg shadow-flaming_red/50"
onclick={() => complete(false)}>Fail</button
>
<button
class="col-span-2 rounded-lg bg-gunmetal shadow-lg shadow-gunmetal/50"
onclick={() => cancel()}>Cancel</button
>
</div>
</div>

0 comments on commit ae4160a

Please sign in to comment.