From 7d7d5ff6caa6502c563f6981f4a0e223163dd1c2 Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Wed, 29 Jan 2025 07:39:50 -0600
Subject: [PATCH] Dynamically determine the confetti location based on
 existence of anniversaries.

---
 web-ui/src/pages/HomePage.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web-ui/src/pages/HomePage.jsx b/web-ui/src/pages/HomePage.jsx
index fc799b66dd..a67cb46b25 100644
--- a/web-ui/src/pages/HomePage.jsx
+++ b/web-ui/src/pages/HomePage.jsx
@@ -83,6 +83,11 @@ export default function HomePage() {
   const kudosStyle = birthdays.length == 0 &&
                      anniversaries.length == 0 ? {} : { width: '450px' };
 
+  // Determine the X position of the birthday confetti.  If there aren't any
+  // anniversaries, it will be the left side.  If there are anniversaries, we
+  // need it in the middle.  Confetti X position ranges from 0 to 1.
+  const xPos = anniversaries.length > 0 ? .5 : .25;
+
   return (
     <div className="home-page">
       <div className="celebrations">
@@ -95,13 +100,13 @@ export default function HomePage() {
           />
         ) : (
           <Grid container spacing={2} style={{ padding: '0 20px 0 20px' }}>
-            { anniversaries.length > 0  && (
+            { anniversaries.length > 0 && (
               <Grid item>
                 <Anniversaries anniversaries={anniversaries} />
               </Grid>) }
             { birthdays.length > 0 && (
               <Grid item>
-                <Birthdays birthdays={birthdays} />
+                <Birthdays birthdays={birthdays} xPos={xPos} />
               </Grid>) }
             <Grid item style={kudosStyle}>
               <PublicKudos />