From b36c94b97d2339382d1bfa1197445f84244ab9dd Mon Sep 17 00:00:00 2001
From: Kateryna Stetsenko <itcreativeusa@gmail.com>
Date: Sat, 12 Oct 2024 13:42:07 -0700
Subject: [PATCH 1/2] add jointDaysLeft styles as separate component

---
 .../ChallengeListRoot/ChallengeCardList.jsx   | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
index 5eecd0fa4..8f2b5f699 100644
--- a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
+++ b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
@@ -12,6 +12,7 @@ import ChallengeAbout from '../Challenge/ChallengeAbout';
 import { isWebApp } from '../../utils/isCordovaOrWebApp';
 import ChallengeStore from '../../stores/ChallengeStore';
 import JoinChallengeAndLearnMoreButtons from '../Challenge/JoinChallengeAndLearnMoreButtons';
+import JoinedAndDaysLeft from '../Challenge/JoinedAndDaysLeft';
 
 const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../Widgets/DelayedLoad'));
 
@@ -175,12 +176,18 @@ class ChallengeCardList extends Component {
             numberDisplayed += 1;
             return (
               <ChallengeCardForListVerticalWrapper key={`oneChallengeItem-${oneChallenge.challenge_we_vote_id}`}>
-                <ChallengeCardForList
-                  challengeWeVoteId={oneChallenge.challenge_we_vote_id}
-                  joinedAndDaysLeftOff
-                  limitCardWidth={useVerticalCard}
-                  useVerticalCard={useVerticalCard}
-                />
+                <CardContainer>
+                  <ChallengeCardForList
+                    challengeWeVoteId={oneChallenge.challenge_we_vote_id}
+                    joinedAndDaysLeftOff
+                    limitCardWidth={useVerticalCard}
+                    useVerticalCard={useVerticalCard}
+                  />
+                  {/* JoinedAndDaysLeft component positioned absolutely */}
+                  <StyledJoinedAndDaysLeft>
+                    <JoinedAndDaysLeft challengeWeVoteId={oneChallenge.challenge_we_vote_id} />
+                  </StyledJoinedAndDaysLeft>
+                </CardContainer>
                 <Link
                   id="challengeCardAbout"
                   to={this.onChallengeClickLink(oneChallenge.challenge_we_vote_id)}
@@ -279,6 +286,10 @@ const styles = () => ({
   },
 });
 
+const CardContainer = styled('div')`
+  position: relative;
+`;
+
 const ChallengeCardForListVerticalWrapper = styled('div')`
   display: flex;
   flex-direction: column;
@@ -290,5 +301,16 @@ const ChallengeCardForListVerticalWrapper = styled('div')`
 const Wrapper = styled('div')`
   min-height: 30px;
 `;
+const StyledJoinedAndDaysLeft = styled('div')`
+align-items: center;
+border-radius: 20px;
+color: #000;
+display: flex;
+font-size: 12px;
+left: 10px;
+padding: 5px 10px;
+position: absolute;
+top: 125px;
+`;
 
 export default withStyles(styles)(ChallengeCardList);

From d970987460ceb4803ab6f8d601977a5db8ac24fd Mon Sep 17 00:00:00 2001
From: Kateryna Stetsenko <itcreativeusa@gmail.com>
Date: Sat, 12 Oct 2024 14:21:55 -0700
Subject: [PATCH 2/2] Created a custom-styled component  in  for better
 isolation of challenge-specific styling.

---
 .../ChallengeListRoot/ChallengeCardList.jsx   | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
index 8f2b5f699..582f299f9 100644
--- a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
+++ b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
@@ -13,6 +13,7 @@ import { isWebApp } from '../../utils/isCordovaOrWebApp';
 import ChallengeStore from '../../stores/ChallengeStore';
 import JoinChallengeAndLearnMoreButtons from '../Challenge/JoinChallengeAndLearnMoreButtons';
 import JoinedAndDaysLeft from '../Challenge/JoinedAndDaysLeft';
+import DesignTokenColors from '../Style/DesignTokenColors';
 
 const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../Widgets/DelayedLoad'));
 
@@ -184,9 +185,9 @@ class ChallengeCardList extends Component {
                     useVerticalCard={useVerticalCard}
                   />
                   {/* JoinedAndDaysLeft component positioned absolutely */}
-                  <StyledJoinedAndDaysLeft>
+                  <JoinedAndDaysForChallengePage>
                     <JoinedAndDaysLeft challengeWeVoteId={oneChallenge.challenge_we_vote_id} />
-                  </StyledJoinedAndDaysLeft>
+                  </JoinedAndDaysForChallengePage>
                 </CardContainer>
                 <Link
                   id="challengeCardAbout"
@@ -220,16 +221,16 @@ class ChallengeCardList extends Component {
           )}
           */}
           {!!(challengeList &&
-              challengeList.length > 1 &&
-              numberToDisplay < challengeList.length) &&
-          (
-            <LoadMoreItemsManuallyWrapper>
-              <LoadMoreItemsManually
-                loadMoreFunction={this.loadMoreHasBeenClicked}
-                uniqueExternalId="ChallengeCardList"
-              />
-            </LoadMoreItemsManuallyWrapper>
-          )}
+            challengeList.length > 1 &&
+            numberToDisplay < challengeList.length) &&
+            (
+              <LoadMoreItemsManuallyWrapper>
+                <LoadMoreItemsManually
+                  loadMoreFunction={this.loadMoreHasBeenClicked}
+                  uniqueExternalId="ChallengeCardList"
+                />
+              </LoadMoreItemsManuallyWrapper>
+            )}
         </ListWrapper>
         <Suspense fallback={<></>}>
           <DelayedLoad loadingTextLeftAlign showLoadingText waitBeforeShow={2000}>
@@ -293,7 +294,7 @@ const CardContainer = styled('div')`
 const ChallengeCardForListVerticalWrapper = styled('div')`
   display: flex;
   flex-direction: column;
-  // height: ${isWebApp() ?  '100%' : 'unset'};
+  // height: ${isWebApp() ? '100%' : 'unset'};
   width: 80%;
   max-width: 300px;
 `;
@@ -301,10 +302,11 @@ const ChallengeCardForListVerticalWrapper = styled('div')`
 const Wrapper = styled('div')`
   min-height: 30px;
 `;
-const StyledJoinedAndDaysLeft = styled('div')`
+
+const JoinedAndDaysForChallengePage = styled('div')`
 align-items: center;
 border-radius: 20px;
-color: #000;
+color: ${DesignTokenColors.gray900};
 display: flex;
 font-size: 12px;
 left: 10px;