Skip to content

Commit

Permalink
Merge pull request wevote#4132 from DaleMcGrew/Dale_WebApp_Oct19-2024
Browse files Browse the repository at this point in the history 
Streamlined ChallengeAbout. Dealt with many rough edges. Fixed Invite 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 authored Oct 20, 2024
2 parents 96ef737 + aad7f06 commit b3c8e5b
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 b3c8e5b

Please sign in to comment.