Add 'Live' badge animation

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}`]}`}>

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 {

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;

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;