From 97e93faf78b3a531e4d759ed1e8f3bac2ba43ac0 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 10 Feb 2023 10:35:39 +1100
Subject: [PATCH] pulse health bar and heart when health < 10

---
 components/SideNav.tsx             | 2 +-
 components/account/HealthBar.tsx   | 4 +++-
 components/account/HealthHeart.tsx | 9 ++-------
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index c57c20da..74d3b55f 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -167,7 +167,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
                 health={
                   group && mangoAccount
                     ? mangoAccount.getHealthRatioUi(group, HealthType.maint)
-                    : undefined
+                    : 0
                 }
                 size={32}
               />
diff --git a/components/account/HealthBar.tsx b/components/account/HealthBar.tsx
index ab71a825..12640e21 100644
--- a/components/account/HealthBar.tsx
+++ b/components/account/HealthBar.tsx
@@ -32,7 +32,9 @@ const HealthBar = ({ health }: { health: number }) => {
             ...sharedStyles,
             width: `${barWidths[0]}%`,
           }}
-          className={`flex rounded-full`}
+          className={`flex rounded-full ${
+            health && health < 10 ? 'animate-pulse' : ''
+          }`}
         />
       </div>
       <div className="col-span-1 flex h-1 rounded-full bg-th-bkg-3">
diff --git a/components/account/HealthHeart.tsx b/components/account/HealthHeart.tsx
index 7bf275ce..bb16500b 100644
--- a/components/account/HealthHeart.tsx
+++ b/components/account/HealthHeart.tsx
@@ -1,12 +1,6 @@
 import { useMemo } from 'react'
 
-const HealthHeart = ({
-  health,
-  size,
-}: {
-  health: number | undefined
-  size: number
-}) => {
+const HealthHeart = ({ health, size }: { health: number; size: number }) => {
   const fillColor = useMemo(() => {
     if (!health) return 'var(--fgd-4)'
     if (health <= 25) {
@@ -30,6 +24,7 @@ const HealthHeart = ({
 
   return (
     <svg
+      className={health && health < 10 ? 'animate-pulse' : ''}
       id="account-step-eleven"
       xmlns="http://www.w3.org/2000/svg"
       style={styles}