Skip to content

Commit

Permalink
Streamlined ChallengeAbout. Dealt with many rough edges. Fixed Invite…
Browse files Browse the repository at this point in the history 
… bug that was cutting off last character of Invitee's name. Added some TruncateMarkup for Challenge names. Directing to /leaderboard page once a person has joined a challenge.
  • Loading branch information
@DaleMcGrew
DaleMcGrew committed Oct 20, 2024
1 parent 96ef737 commit aad7f06
Show file tree
Hide file tree
Showing 22 changed files with 375 additions and 406 deletions.
123 changes: 69 additions & 54 deletions src/js/common/components/Challenge/ChallengeAbout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,33 +69,28 @@ function ChallengeAbout ({ challengeWeVoteId }) {
{' '}
·
{' '}
<strong>
{daysLeft}
{' '}
days left
</strong>
{daysLeft}
{' '}
days left
</ShowDaysLeftText>
)}

</span>
);
const challengeStarted = (
<span>
Challenge started by
<strong>{challengeCreator}</strong>
to support
<strong>{challengeIsSupporting}</strong>
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 = (
<span>
<strong>
{challengeInviteesCount}
{' '}
friends invited
</strong>
{challengeInviteesCount}
{' '}
friends invited
{' '}
by
{' '}
Expand All @@ -105,65 +100,68 @@ function ChallengeAbout ({ challengeWeVoteId }) {
</span>
);

const showStartedBy = false;
return (
<ChallengeAboutWrapper>
<CardRowsWrapper>
{challengeDates && (
<CardForListRow>
<FlexDivLeft>
<SvgImageWrapper>
<EventOutlined />
</SvgImageWrapper>
<ChallengeDatesDiv>{challengeDates}</ChallengeDatesDiv>
</FlexDivLeft>
</CardForListRow>
)}
<CardForListRow>
<Suspense fallback={<></>}>
{challengeStarted && (
<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');
});
}}
/>
</SvgImageWrapper>
<ChallengeStartedDiv>{challengeStarted}</ChallengeStartedDiv>
</FlexDivLeft>
)}
</Suspense>
</CardForListRow>
<CardForListRow>
<Suspense fallback={<></>}>
{remindFriends && (
<FlexDivLeft>
<SvgImageWrapper>
<CampaignOutlined />
<CampaignOutlinedStyled />
</SvgImageWrapper>
<RemindFriendsDiv>{remindFriends}</RemindFriendsDiv>
</FlexDivLeft>
)}
</Suspense>
</CardForListRow>
{challengeDates && (
<CardForListRow>
<FlexDivLeft>
<SvgImageWrapper>
<EventOutlinedStyled />
</SvgImageWrapper>
<ChallengeDatesDiv>{challengeDates}</ChallengeDatesDiv>
</FlexDivLeft>
</CardForListRow>
)}
{showStartedBy && (
<CardForListRow>
<Suspense fallback={<></>}>
{challengeStarted && (
<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');
});
}}
/>
</SvgImageWrapper>
<ChallengeStartedDiv>{challengeStarted}</ChallengeStartedDiv>
</FlexDivLeft>
)}
</Suspense>
</CardForListRow>
)}
<CardForListRow>
<Suspense fallback={<></>}>
{friendsInvited && (
<FlexDivLeft>
<SvgImageWrapper>
<EmojiEventsOutlined />
<EmojiEventsOutlinedStyled />
</SvgImageWrapper>
<ChallengeLeaderWrapper>
<FriendsInvitedDiv>{friendsInvited}</FriendsInvitedDiv>
{!!(participantNameWithHighestRank) && (
<CurrentLeaderDiv>{currentLeader}</CurrentLeaderDiv>
)}
<FriendsInvitedDiv>{friendsInvited}</FriendsInvitedDiv>
</ChallengeLeaderWrapper>
</FlexDivLeft>
)}
Expand All @@ -185,9 +183,21 @@ const styles = () => ({
},
});

export const CampaignOutlinedStyled = styled(CampaignOutlined)`
font-size: 30px;
`;

export const EmojiEventsOutlinedStyled = styled(EmojiEventsOutlined)`
margin-top: 2px;
`;

export const EventOutlinedStyled = styled(EventOutlined)`
font-size: 25px;
`;

export const CardForListRow = styled('div')`
color: ${DesignTokenColors.neutral500};
font-size: 14px;
font-size: 16px;
padding: 3px 0;
`;

Expand All @@ -209,16 +219,21 @@ export const FlexDivLeft = styled('div')`
`;

export const SvgImageWrapper = styled('div')`
max-width: 25px;
min-width: 25px;
width: 25px;
margin-right: 15px;
align-items: center;
display: flex;
justify-content: center;
max-width: 35px;
min-width: 35px;
width: 35px;
margin-right: 5px;
margin-top: -4px;
`;

export const ChallengeDatesDiv = styled('div')`
`;

export const RemindFriendsDiv = styled('div')`
font-weight: 600;
`;

export const ChallengeLeaderWrapper = styled('div')`
Expand Down
16 changes: 7 additions & 9 deletions src/js/common/components/Challenge/JoinedAndDaysLeft.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,14 @@ function JoinedAndDaysLeft ({ challengeWeVoteId, borderSwitcher }) {
const [daysLeft, setDaysLeft] = React.useState(0);
const [voterIsChallengeParticipant, setVoterIsChallengeParticipant] = React.useState(false);

React.useEffect(() => {
// console.log('Fetching participants for:', challengeWeVoteId);

const onChallengeStoreChange = () => {
const daysToChallengeEnds = ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId);
// console.log('Days to challenge ends:', daysToChallengeEnds);
setDaysLeft(daysToChallengeEnds);
setVoterIsChallengeParticipant(ChallengeStore.getVoterIsChallengeParticipant(challengeWeVoteId));
};
const onChallengeStoreChange = () => {
const daysToChallengeEnds = ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId);
// console.log('Days to challenge ends:', daysToChallengeEnds);
setDaysLeft(daysToChallengeEnds);
setVoterIsChallengeParticipant(ChallengeStore.getVoterIsChallengeParticipant(challengeWeVoteId));
};

React.useEffect(() => {
const challengeStoreListener = ChallengeStore.addListener(onChallengeStoreChange);
onChallengeStoreChange();

Expand Down
61 changes: 25 additions & 36 deletions src/js/common/components/Challenge/PointsExplanationModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { DialogTitle } from '@mui/material';
import withStyles from '@mui/styles/withStyles';
import withTheme from '@mui/styles/withTheme';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import styled from 'styled-components';
import DesignTokenColors from '../Style/DesignTokenColors';
import ModalDisplayTemplateA, { templateAStyles, TextFieldWrapper } from '../../../components/Widgets/ModalDisplayTemplateA';
import { DialogTitle, DialogTitleText } from '@mui/material';
import ModalDisplayTemplateA, { templateAStyles } from '../../../components/Widgets/ModalDisplayTemplateA';
import { renderLog } from '../../utils/logging';

class PointsExplanationModal extends Component {
Expand All @@ -17,7 +17,8 @@ class PointsExplanationModal extends Component {
}

toggleTerms = () => {
this.setState({ showTerms: !this.state.showTerms });
const { showTerms } = this.state;
this.setState({ showTerms: !showTerms });
};

render() {
Expand Down Expand Up @@ -102,26 +103,26 @@ class PointsExplanationModal extends Component {
</ContestTermDiv>
</FlexDivLeft>
</CardForListRow>
<Ul>
<li>Sponsor: WeVote USA</li>
<StyledUnorderedList>
<li>Sponsor: We Vote USA</li>
<li>Eligibility: Open to residents of the USA who are 18 years or older.</li>
<li>Entry Period: see challenge homepage</li>
<li>How to Enter: To enter, simply [Describe entry method].</li>
<li>Price: One lucky winner will receive [Price Description].</li>
<li>How to Enter: To enter, simply click the Join Challenge button.</li>
<li>Prize: No prizes are given by We Vote USA.</li>
<li>Odds of Winning: Odds of winning depend on the number of eligible entries received.</li>
<li>No Purchase necessary: No purchase is necessary to enter or win.</li>
<li>Alternative Method of Entry: To enter without purchasing, send a handwritten letter to [Address].</li>
{/* <li>Alternative Method of Entry: To enter without purchasing, send a handwritten letter to [Address].</li> */}
<li>Taxes: Winner is responsible for all applicable taxes.</li>
<li>Winner Notification: Winners will be notified by email or phone.</li>
<li>Rules and Regulations: For a complete set of rules, please visit [Link to Rules].</li>
</Ul>
{/* <li>Rules and Regulations: For a complete set of rules, please visit [Link to Rules].</li> */}
</StyledUnorderedList>
</>
)}
</CardRowsWrapper>
</CardRowsWrapper>
</PointsWrapper>

);

return (
<ModalDisplayTemplateA
dialogTitleJSX={<DialogTitle>{dialogTitleText}</DialogTitle>}
Expand All @@ -133,20 +134,11 @@ class PointsExplanationModal extends Component {
);
}
}

PointsExplanationModal.propTypes = {
show: PropTypes.bool.isRequired,
toggleModal: PropTypes.func.isRequired,
};

const styles = () => ({
howToVoteRoot: {
color: '#999',
height: 18,
width: 18,
},
});

const PointsWrapper = styled('div')`
white-space: normal;
`;
Expand All @@ -157,14 +149,14 @@ export const CardRowsWrapper = styled('div')`

export const CardForListRow = styled('div')`
color: ${DesignTokenColors.neutral900};
font-size: 12px;
//font-size: 12px;
line-height: 1.5;
padding-bottom: 8px;
&:First-child {
border-bottom: 1px solid ${DesignTokenColors.neutral300};
}
&:nth-child(2) {
padding-top: 8px;
}
Expand All @@ -177,21 +169,20 @@ export const FlexDivLeft = styled('div')`
`;

export const HowWeCalculateDiv = styled('div')`
font-size: 10px;
//font-size: 10px;
`;

export const AtTheEndDiv = styled('div')`
font-weight: bold;
font-size: 10px;
//font-size: 10px;
`;

export const HowYouEarnPointsDiv = styled('div')`
font-size: 12px;
//font-size: 12px;
`;

export const ViewContestTermsDiv = styled('div')`
font-size: 8px;
//font-size: 8px;
`;

const Table = styled('table')`
Expand All @@ -202,7 +193,7 @@ const Table = styled('table')`
const Th = styled('th')`
text-align: left;
color: ${DesignTokenColors.neutral900};
font-size: 8px;
//font-size: 8px;
padding-top: 8px;
&:nth-child(2) {
Expand All @@ -211,7 +202,7 @@ const Th = styled('th')`
`;

const Tr = styled('tr')`
background-color: white;
background-color: white;
&:last-child {
td {
Expand All @@ -221,7 +212,7 @@ const Tr = styled('tr')`

const Td = styled('td')`
color: ${DesignTokenColors.neutral900};
font-size: 10px;
//font-size: 10px;
padding: 2px;
border-bottom: 1px solid ${DesignTokenColors.neutral300};
Expand All @@ -231,17 +222,15 @@ const Td = styled('td')`
`;

const ViewContestTermsLink = styled('span')`
color: ${DesignTokenColors.accent500};
color: ${DesignTokenColors.accent500};
cursor: pointer;
text-decoration: underline;
text-decoration: underline;
`;

export const ContestTermDiv = styled('div')`
font-size: 12px;
`;

const Ul = styled('ul')`
font-size: 10px;
const StyledUnorderedList = styled('ul')`
line-height: 1.5;
text-align: left;
padding-left: 10px;
Expand Down
Loading

0 comments on commit aad7f06

Please sign in to comment.