pulse health bar and heart when health < 10

components/SideNav.tsx

@@ -167,7 +167,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
                 health={
                   group && mangoAccount
                     ? mangoAccount.getHealthRatioUi(group, HealthType.maint)
-                    : undefined
+                    : 0
                 }
                 size={32}
               />

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">

components/account/HealthHeart.tsx

@@ -1,12 +1,6 @@
 import { useMemo } from 'react'
 
-const HealthHeart = ({
+const HealthHeart = ({ health, size }: { health: number; size: number }) => {
-  health,
-  size,
-}: {
-  health: number | undefined
-  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}