diff --git a/src/img/global/svg-icons/rocket-ship-no-thrust.svg b/src/img/global/svg-icons/rocket-ship-no-thrust.svg
new file mode 100644
index 000000000..efc84f261
--- /dev/null
+++ b/src/img/global/svg-icons/rocket-ship-no-thrust.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
index 85abf6677..a3cb40656 100644
--- a/src/js/common/components/Challenge/ChallengeAbout.jsx
+++ b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -2,19 +2,26 @@ import withStyles from '@mui/styles/withStyles';
import { EventOutlined, CampaignOutlined, EmojiEventsOutlined } from '@mui/icons-material';
import PropTypes from 'prop-types';
import React, { Suspense } from 'react';
+import { ReactSVG } from 'react-svg';
import styled from 'styled-components';
import DesignTokenColors from '../Style/DesignTokenColors';
import { renderLog } from '../../utils/logging';
import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
import ChallengeStore from '../../stores/ChallengeStore';
import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import normalizedImagePath from '../../utils/normalizedImagePath';
+
+import rocketShipNoThrust from '../../../../img/global/svg-icons/rocket-ship-no-thrust.svg';
function ChallengeAbout ({ challengeWeVoteId }) {
renderLog('ChallengeAbout');
+ const [challengeCreator, setChallengeCreator] = 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('');
+ const [showDaysLeft, setShowDaysLeft] = React.useState(true);
const onAppObservableStoreChange = () => {
setParticipantNameWithHighestRank(AppObservableStore.getChallengeParticipantNameWithHighestRankByChallengeWeVoteId(challengeWeVoteId));
@@ -28,6 +35,8 @@ function ChallengeAbout ({ challengeWeVoteId }) {
setChallengeParticipantCount(ChallengeStore.getNumberOfParticipantsInChallenge(challengeWeVoteId));
}
setDaysLeft(ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId));
+ setChallengeCreator('Anusha P.');
+ setChallengeIsSupporting('John Smith');
};
const onChallengeParticipantStoreChange = () => {
if (challengeParticipantCount < ChallengeParticipantStore.getNumberOfParticipantsInChallenge(challengeWeVoteId)) {
@@ -55,14 +64,27 @@ function ChallengeAbout ({ challengeWeVoteId }) {
{/* Jan 20, 24 - Sep 10, 24 · */}
Ends Nov 5, 2024
- {' '}
- ·
- {' '}
-
- {daysLeft}
- {' '}
- days left
-
+ {showDaysLeft && (
+
+ {' '}
+ ·
+ {' '}
+
+ {daysLeft}
+ {' '}
+ days left
+
+
+ )}
+
+
+ );
+ const challengeStarted = (
+
+ Challenge started by
+ {challengeCreator}
+ to support
+ {challengeIsSupporting}
);
const remindFriends = 'Remind as many friends as you can about the date of the election, and let them know you will be voting.';
@@ -96,6 +118,28 @@ function ChallengeAbout ({ challengeWeVoteId }) {
)}
+
+ }>
+ {challengeStarted && (
+
+
+ {
+ // 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');
+ });
+ }}
+ />
+
+ {challengeStarted}
+
+ )}
+
+
}>
{remindFriends && (
@@ -155,6 +199,9 @@ const ChallengeAboutWrapper = styled('div')`
white-space: normal;
`;
+const ChallengeStartedDiv = styled('div')`
+`;
+
export const FlexDivLeft = styled('div')`
align-items: flex-start;
display: flex;
@@ -183,4 +230,7 @@ export const CurrentLeaderDiv = styled('div')`
export const FriendsInvitedDiv = styled('div')`
`;
+const ShowDaysLeftText = styled('span')`
+`;
+
export default withStyles(styles)(ChallengeAbout);