From a07e9c3c857e5d5bde2c01a36943f02cb5e91ea3 Mon Sep 17 00:00:00 2001
From: Daniel Svitan <daniel.svitan.team7274dev@gmail.com>
Date: Tue, 16 May 2023 18:41:24 -0700
Subject: [PATCH] :lipstick: Changes repo animation

---
 src/components/Home.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 6c22750..d0a151d 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -15,7 +15,7 @@
     <p v-else class="text-on-accent text-xl">You took {{ captured }} ms</p>
 
     <p
-      class="fixed bottom-4 right-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-lg"
+      class="fixed bottom-4 right-8 group-data-[error=true]:!text-on-accent group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-lg"
     >
       Press <code class="font-dm-bold">R</code> to restart
     </p>
@@ -23,13 +23,30 @@
     <a
       href="https://github.com/Streamer272/reaction"
       target="_blank"
-      class="fixed bottom-4 left-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent animate-bounce transition-transform text-xl"
+      class="fixed bottom-4 left-6 text-xl group-data-[error=true]:!text-on-accent group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent animate-bye active:opacity-0"
     >
       repo
     </a>
   </div>
 </template>
 
+<style scoped>
+.animate-bye:active {
+  animation: bye 400ms ease-in-out;
+}
+
+@keyframes bye {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+</style>
+
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";