From 874d0b219198587b7e2e282d96a87b7ee40f36d1 Mon Sep 17 00:00:00 2001
From: raymosun <sunraysfs@gmail.com>
Date: Wed, 10 Apr 2024 10:27:34 -0700
Subject: [PATCH] Add 'Live' badge animation

---
 src/components/events/EventBadges/index.tsx   |  4 ++-
 .../events/EventBadges/style.module.scss      | 32 +++++++++++++++++++
 .../events/EventBadges/style.module.scss.d.ts |  2 ++
 src/styles/pages/Home.module.scss             |  1 +
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/events/EventBadges/index.tsx b/src/components/events/EventBadges/index.tsx
index 839a8b13..af1d3b5e 100644
--- a/src/components/events/EventBadges/index.tsx
+++ b/src/components/events/EventBadges/index.tsx
@@ -24,7 +24,9 @@ const EventBadges = ({ event, attended, className }: EventBadgesProps) => {
   return (
     <div className={`${styles.badges} ${className || ''}`}>
       {!isOrderPickupEvent(event) && ongoing ? (
-        <div className={`${styles.badge} ${styles.badgeLive}`}>• Live</div>
+        <div className={`${styles.badge} ${styles.badgeLive}`}>
+          <span>•</span> Live
+        </div>
       ) : null}
       {committee ? (
         <div className={`${styles.badge} ${styles[`badge${community}`]}`}>
diff --git a/src/components/events/EventBadges/style.module.scss b/src/components/events/EventBadges/style.module.scss
index c5734bdb..9908018a 100644
--- a/src/components/events/EventBadges/style.module.scss
+++ b/src/components/events/EventBadges/style.module.scss
@@ -17,6 +17,38 @@
       background-color: vars.$danger-1;
       border-color: vars.$danger-1;
       color: #fff;
+      position: relative;
+
+      > span {
+        animation: pulse 1s ease-in-out infinite alternate;
+
+        @keyframes pulse {
+          0% { opacity: 0 }
+          100% {opacity: 1 }
+        }
+      }
+
+      &::before {
+        animation: pulse2 2s ease-out forwards infinite;
+        border: 2px solid vars.$danger-1;
+        border-radius: 5px;
+        content: '';
+        position: absolute;
+
+        @keyframes pulse2 {
+          0% {
+            filter: blur(0);
+            inset: 0;
+            opacity: 1;
+          }
+
+          100% {
+            filter: blur(2px);
+            inset: -0.75rem;
+            opacity: 0;
+          }
+        }
+      }
     }
 
     &.badgeGeneral {
diff --git a/src/components/events/EventBadges/style.module.scss.d.ts b/src/components/events/EventBadges/style.module.scss.d.ts
index 9d879ac4..54519226 100644
--- a/src/components/events/EventBadges/style.module.scss.d.ts
+++ b/src/components/events/EventBadges/style.module.scss.d.ts
@@ -9,6 +9,8 @@ export type Styles = {
   badgeLive: string;
   badgePoints: string;
   badges: string;
+  pulse: string;
+  pulse2: string;
 };
 
 export type ClassNames = keyof Styles;
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 9325c9a8..90c57e3c 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -9,6 +9,7 @@
     'progress upcoming'
     'attended attended';
   grid-template-columns: 28rem 1fr;
+  grid-template-rows: auto 1fr 1fr auto;
   margin: auto;
   max-width: 1920px;