Merge pull request #4181 from Succorro/WV-652

WV-652 Challenge About [Team Review]
wevote · Nov 28, 2024 · dbe7fb9 · dbe7fb9
2 parents 0d64f4c + eece9b4
commit dbe7fb9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/src/img/global/svg-icons/rocket-ship-no-thrust.svg b/src/img/global/svg-icons/rocket-ship-no-thrust.svg
diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -15,9 +15,8 @@ import rocketShipNoThrust from '../../../../img/global/svg-icons/rocket-ship-no-
 
 function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
   renderLog('ChallengeAbout');
-  const [challengeCreator, setChallengeCreator] = React.useState('');
+  const [challengeOwners, setChallengeOwners] = React.useState([]);
   const [challengeInviteesCount, setChallengeInviteesCount] = React.useState(0);
-  const [challengeIsSupporting, setChallengeIsSupporting] = React.useState('');
   const [challengeParticipantCount, setChallengeParticipantCount] = React.useState(0);
   const [daysLeft, setDaysLeft] = React.useState(0);
   const [participantNameWithHighestRank, setParticipantNameWithHighestRank] = React.useState('');
@@ -34,8 +33,7 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
       setChallengeParticipantCount(ChallengeStore.getNumberOfParticipantsInChallenge(challengeWeVoteId));
     }
     setDaysLeft(ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId));
-    setChallengeCreator('Anusha P.');
-    setChallengeIsSupporting('John Smith');
+    setChallengeOwners(ChallengeStore.getChallengeOwnerList(challengeWeVoteId));
   };
   const onChallengeParticipantStoreChange = () => {
     if (challengeParticipantCount < ChallengeParticipantStore.getNumberOfParticipantsInChallenge(challengeWeVoteId)) {
@@ -75,13 +73,6 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
       )}
     </span>
   );
-  const challengeStarted = (
-    <span>
-      Challenge started by
-      {' '}
-      {challengeCreator}
-    </span>
-  );
   const remindFriends = 'Remind as many friends as you can about the date of the election, and let them know you will be voting.';
   const currentLeader = `Current leader: ${participantNameWithHighestRank}`;
   const friendsInvited = (
@@ -141,22 +132,22 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
         {showStartedBy && (
           <CardForListRow>
             <Suspense fallback={<></>}>
-              {challengeStarted && (
+              {challengeOwners && (
                 <FlexDivLeft>
                   <SvgImageWrapper style={{ paddingTop: '3px' }}>
                     <ReactSVG
                       src={normalizedImagePath(rocketShipNoThrust)}
                       alt="Rocket Ship"
-                      beforeInjection={(svg) => {
-                        // Fill property applied to the path element, not SVG element. querySelector to grab the path element and set the attribute.
-                        svg.querySelectorAll('path').forEach((path) => {
-                          path.setAttribute('fill', 'none');
-                          path.setAttribute('stroke', '#606060');
-                        });
-                      }}
+                      beforeInjection={(svg) => svg.setAttribute('style', { padding: '1px 1px 1px 0px' })}
                     />
                   </SvgImageWrapper>
-                  <ChallengeStartedDiv>{challengeStarted}</ChallengeStartedDiv>
+                  <ChallengeOwnersDiv>
+                    <ChallengeOwnersText>
+                      Challenge started by
+                      {' '}
+                      {challengeOwners.map((owner) => <ChallengeOwnersSpan key={owner.organization_we_vote_id}>{owner.organization_name}</ChallengeOwnersSpan>)}
+                    </ChallengeOwnersText>
+                  </ChallengeOwnersDiv>
                 </FlexDivLeft>
               )}
             </Suspense>
@@ -195,6 +186,7 @@ export const CardForListRow = styled('div')`
   color: ${DesignTokenColors.neutral500};
   font-size: 16px;
   padding: 3px 0;
+  margin-bottom: 3px;
 `;
 
 export const CardRowsWrapper = styled('div')`
@@ -205,7 +197,15 @@ const ChallengeAboutWrapper = styled('div')`
   white-space: normal;
 `;
 
-const ChallengeStartedDiv = styled('div')`
+const ChallengeOwnersDiv = styled('div')`
+`;
+
+const ChallengeOwnersText = styled('p')`
+`;
+
+const ChallengeOwnersSpan = styled('span')`
+  font-weight: 500;
+  color: ${DesignTokenColors.neutral600};
 `;
 
 export const FlexDivLeft = styled('div')`
@@ -242,6 +242,8 @@ export const FriendsInvitedDiv = styled('div')`
 `;
 
 const ShowDaysLeftText = styled('span')`
+  font-weight: 500;
+  color: ${DesignTokenColors.neutral600};
 `;
 
 export default withStyles(styles)(ChallengeAbout);