From f91466f1bf188915a63d5a2c8cdf12856ec0c65d Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Fri, 30 Apr 2021 18:37:56 +0200
Subject: [PATCH] Add pulse class after mount timeout 2sec.

---
 frontend/components/VinlottisPage.vue | 11 ++++++++---
 frontend/styles/animations.scss       | 22 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 frontend/styles/animations.scss

diff --git a/frontend/components/VinlottisPage.vue b/frontend/components/VinlottisPage.vue
index 7525376..e759245 100644
--- a/frontend/components/VinlottisPage.vue
+++ b/frontend/components/VinlottisPage.vue
@@ -94,7 +94,11 @@ export default {
       return Notification.permission !== "granted" || !this.pushAllowed || localStorage.getItem("push") == null;
     }
   },
-  async mounted() {
+  mounted() {
+    setTimeout(() => {
+      document.getElementsByClassName("participate-button")[0].classList.add("pulse");
+    }, 1800);
+
     this.$on("push-allowed", () => {
       this.pushAllowed = true;
     });
@@ -121,8 +125,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
-@import "../styles/variables.scss";
+@import "@/styles/media-queries.scss";
+@import "@/styles/variables.scss";
+@import "@/styles/animations.scss";
 
 .top-container {
   height: 30em;
diff --git a/frontend/styles/animations.scss b/frontend/styles/animations.scss
new file mode 100644
index 0000000..eb20b31
--- /dev/null
+++ b/frontend/styles/animations.scss
@@ -0,0 +1,22 @@
+.pulse {
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+  transform: scale(1);
+  animation: pulse 2s infinite;
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
+    }
+
+    70% {
+      transform: scale(1.02);
+      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+    }
+
+    100% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+}
\ No newline at end of file