From 8e2c0d86532630d7e124b2083da1ddda08088810 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Thu, 29 Feb 2024 11:21:29 -0500
Subject: [PATCH] [F] Fix transition

---
 AquaNet/src/app.sass                            |  3 +++
 AquaNet/src/pages/Home/SetupInstructions.svelte | 13 +++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass
index 012e0d93..340f4014 100644
--- a/AquaNet/src/app.sass
+++ b/AquaNet/src/app.sass
@@ -204,3 +204,6 @@ main.content
     gap: 1rem
 
     max-width: 400px
+
+.no-margin
+  margin: 0
\ No newline at end of file
diff --git a/AquaNet/src/pages/Home/SetupInstructions.svelte b/AquaNet/src/pages/Home/SetupInstructions.svelte
index 5ec5fbc9..d440734a 100644
--- a/AquaNet/src/pages/Home/SetupInstructions.svelte
+++ b/AquaNet/src/pages/Home/SetupInstructions.svelte
@@ -1,7 +1,7 @@
 <!-- Svelte 4.2.11 -->
 
 <script lang="ts">
-  import { slide } from "svelte/transition";
+  import { slide, fade } from "svelte/transition";
   import { USER } from "../../libs/sdk";
   import type { UserMe } from "../../libs/generalTypes";
   import { codeToHtml } from 'shiki'
@@ -54,16 +54,17 @@ id=${keychip.slice(0, 4)}-${keychip.slice(4)}1337`.trim(), {
 
   {#if user}
     <div transition:slide>
-      {#if !keychip}
-        <!-- TODO : Fix transition -->
-        <button class="emp" on:click={getStarted} transition:slide>Get started</button>
+      {#if !keychip && !keychipCode}
+        <div class="no-margin" out:fade={{ duration: 300 }}>
+          <button class="emp" on:click={getStarted}>Get started</button>
+        </div>
       {:else}
-        <div transition:slide>
+        <div class="no-margin" in:fade={{ delay: 300 }}>
           <p>
             Please edit your segatools.ini file and modify the following lines:
           </p>
 
-          <div class="code" style="overflow: auto;">
+          <div class="code">
             {@html keychipCode}
           </div>
         </div>