From 3d62b707a00fcbde2c4b9d7ca8fa3666eb84a915 Mon Sep 17 00:00:00 2001
From: Lachlan Glen <54282009+lachlanglen@users.noreply.github.com>
Date: Fri, 9 Feb 2024 14:57:07 -0500
Subject: [PATCH] finish pot header (fix tags)

---
 apps/potlock/widget/Index.jsx       |  4 +-
 apps/potlock/widget/Pots/Card.jsx   |  4 +-
 apps/potlock/widget/Pots/Header.jsx | 67 +++++++++++++++++++++++++++--
 apps/potlock/widget/Pots/Tag.jsx    |  7 ++-
 4 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/apps/potlock/widget/Index.jsx b/apps/potlock/widget/Index.jsx
index d922017b..061baa18 100644
--- a/apps/potlock/widget/Index.jsx
+++ b/apps/potlock/widget/Index.jsx
@@ -425,7 +425,7 @@ const props = {
       ? "Just now"
       : `${differenceInDays} ${differenceInDays === 1 ? "day" : "days"} ago`;
   },
-  daysUntil: (timestamp, suffix) => {
+  daysUntil: (timestamp) => {
     const now = new Date();
     const futureDate = new Date(timestamp);
     const differenceInTime = futureDate - now;
@@ -433,7 +433,7 @@ const props = {
     // Convert time difference from milliseconds to days
     const differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));
 
-    return `${differenceInDays} ${differenceInDays === 1 ? "day" : "days"}${suffix || ""}`;
+    return `${differenceInDays} ${differenceInDays === 1 ? "day" : "days"}`;
   },
   NADA_BOT_URL: "https://app.nada.bot",
   // openSybilModal: () => {
diff --git a/apps/potlock/widget/Pots/Card.jsx b/apps/potlock/widget/Pots/Card.jsx
index 46b38fab..77b65d1d 100644
--- a/apps/potlock/widget/Pots/Card.jsx
+++ b/apps/potlock/widget/Pots/Card.jsx
@@ -113,9 +113,9 @@ return (
             borderColor: isInPublicRoundPeriod ? "#9ADD33" : "#33DDCB",
             textColor: isInPublicRoundPeriod ? "#023131" : "#192C07",
             text: isInApplicationPeriod
-              ? props.daysUntil(application_end_ms, " left to Apply")
+              ? props.daysUntil(application_end_ms) + " left to Apply"
               : isInPublicRoundPeriod
-              ? props.daysUntil(public_round_end_ms, " left for Matching")
+              ? props.daysUntil(public_round_end_ms) + " left for Matching"
               : "",
           }}
         />
diff --git a/apps/potlock/widget/Pots/Header.jsx b/apps/potlock/widget/Pots/Header.jsx
index 44491dd3..2a2faf6d 100644
--- a/apps/potlock/widget/Pots/Header.jsx
+++ b/apps/potlock/widget/Pots/Header.jsx
@@ -18,7 +18,7 @@ Big.PE = 100;
 const Container = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
   padding: 60px 80px;
   gap: 40px;
@@ -188,7 +188,9 @@ const minmatchingPoolDonationAmountNear = props.SUPPORTED_FTS[
 ].fromIndivisible(min_matching_pool_donation_amount);
 
 const now = Date.now();
+const applicationNotStarted = now < application_start_ms;
 const applicationOpen = now >= application_start_ms && now < application_end_ms;
+const publicRoundNotStarted = now < public_round_start_ms;
 const publicRoundOpen = now >= public_round_start_ms && now < public_round_end_ms;
 const publicRoundClosed = now >= public_round_end_ms;
 const userIsAdminOrGreater = admins.includes(context.accountId) || owner === context.accountId;
@@ -275,10 +277,68 @@ const referrerFeeAmountNear = referrerId
   ? (state.matchingPoolDonationAmountNear * referral_fee_matching_pool_basis_points) / 10_000 || 0
   : 0;
 
+const getApplicationTagText = () => {
+  if (applicationNotStarted) return "Application Round Not Started";
+  if (applicationOpen) return props.daysUntil(public_round_end_ms) + " left to apply";
+  else return "Application Round Ended";
+};
+
+const getMatchingRoundTagText = () => {
+  if (publicRoundNotStarted) return "Matching Round Not Started";
+  if (publicRoundOpen) return props.daysUntil(public_round_end_ms) + " left in round";
+  else return "Matching Round Ended";
+};
+
 return (
   <Container>
     <Column style={{ gap: "24px" }}>
       <Title>{pot_name}</Title>
+      <Row style={{ gap: "24px" }}>
+        {/* Application tag */}
+        <Widget
+          src={`${ownerId}/widget/Pots.Tag`}
+          props={{
+            ...props,
+            backgroundColor: applicationOpen ? "#EFFEFA" : "#EBEBEB",
+            borderColor: applicationOpen ? "#33DDCB" : "#DBDBDB",
+            textColor: applicationOpen ? "#023131" : "#192C07",
+            text: getApplicationTagText(),
+            textStyle: { fontWeight: 500, marginLeft: applicationOpen ? "8px" : "0px" },
+            preElements: applicationOpen ? (
+              <Widget
+                src={`${ownerId}/widget/Components.Indicator`}
+                props={{
+                  colorOuter: "#CAFDF3",
+                  colorInner: "#33DDCB",
+                  animate: true,
+                }}
+              />
+            ) : null,
+          }}
+        />
+        {/* Matching round tag */}
+        <Widget
+          src={`${ownerId}/widget/Pots.Tag`}
+          props={{
+            ...props,
+            backgroundColor: publicRoundOpen ? "#F7FDE8" : "#EBEBEB",
+            borderColor: publicRoundOpen ? "#9ADD33" : "#DBDBDB",
+            textColor: "#192C07",
+            text: getMatchingRoundTagText(),
+            textStyle: { fontWeight: 500, marginLeft: publicRoundOpen ? "8px" : "0px" },
+            preElements: publicRoundOpen ? (
+              <Widget
+                src={`${ownerId}/widget/Components.Indicator`}
+                props={{
+                  colorOuter: "#D7F5A1",
+                  colorInner: "#9ADD33",
+                  animate: true,
+                }}
+              />
+            ) : null,
+          }}
+        />
+      </Row>
       <Description>{pot_description}</Description>
       <Row style={{ width: "100%" }}>
         <Column style={{ width: "100%" }}>
@@ -321,12 +381,13 @@ return (
                   props={{
                     colorOuter: "#CAFDF3",
                     colorInner: "#33DDCB",
+                    animate: true,
                   }}
                 />
                 <StatusText style={{ color: "#0B7A74" }}>All applications are open</StatusText>
               </Row>
               <StatusText style={{ color: "#292929" }}>
-                {props.daysUntil(application_end_ms, " to go")}
+                {props.daysUntil(application_end_ms) + " to go"}
               </StatusText>
             </Row>
             <H4>
@@ -357,7 +418,7 @@ return (
                 <StatusText style={{ color: "#4A7714" }}>Matching round live</StatusText>
               </Row>
               <StatusText style={{ color: "#292929" }}>
-                {props.daysUntil(public_round_end_ms, "to go")}
+                {"Ends in " + props.daysUntil(public_round_end_ms)}
               </StatusText>
             </Row>
             <H4>
diff --git a/apps/potlock/widget/Pots/Tag.jsx b/apps/potlock/widget/Pots/Tag.jsx
index 9673ba4d..98826848 100644
--- a/apps/potlock/widget/Pots/Tag.jsx
+++ b/apps/potlock/widget/Pots/Tag.jsx
@@ -1,4 +1,6 @@
-const { backgroundColor, borderColor, textColor, text } = props;
+const { ownerId, backgroundColor, borderColor, textColor, text } = props;
+
+const textStyle = props.textStyle || {};
 
 const TagContainer = styled.div`
   display: flex;
@@ -21,6 +23,7 @@ const TagText = styled.span`
 
 return (
   <TagContainer>
-    <TagText>{text}</TagText>
+    {props.preElements}
+    <TagText style={textStyle}>{text}</TagText>
   </TagContainer>
 );