From c1a2ce5cec6813c799c15fd1e37cd7fe96c560c8 Mon Sep 17 00:00:00 2001 From: dalemcgrew Date: Sun, 31 Mar 2024 21:50:21 -0700 Subject: [PATCH] Tweaks to CompleteYourProfile2024 related to WV-320. Added certs folder to .gitignore. --- .gitignore | 1 + .../CompleteYourProfile2024.jsx | 428 ++++-------------- ...e2024.jsx => CompleteYourProfile2024b.jsx} | 182 +++----- .../{CompleteYourProfile2024 => }/Step.jsx | 2 +- .../StepIcon.jsx | 4 +- src/js/components/Navigation/HeaderBackTo.jsx | 2 +- .../Navigation/HeaderBackToBallot.jsx | 2 +- .../Navigation/HeaderBackToVoterGuides.jsx | 2 +- .../components/Navigation/HeaderBarModals.jsx | 2 +- .../components/Navigation/WelcomeAppbar.jsx | 2 +- src/js/components/Widgets/SignInButton.jsx | 9 +- src/js/pages/Activity/News.jsx | 2 +- src/js/pages/Ballot/Ballot.jsx | 107 ++--- 13 files changed, 226 insertions(+), 519 deletions(-) rename src/js/components/CompleteYourProfile/{CompleteYourProfile2024/CompleteYourProfile2024.jsx => CompleteYourProfile2024b.jsx} (68%) rename src/js/components/CompleteYourProfile/{CompleteYourProfile2024 => }/Step.jsx (94%) rename src/js/components/CompleteYourProfile/{CompleteYourProfile2024 => }/StepIcon.jsx (96%) diff --git a/.gitignore b/.gitignore index 402509d58..621b7b990 100644 --- a/.gitignore +++ b/.gitignore @@ -159,6 +159,7 @@ staticfiles /**/migrations/*.py !/**/migrations/__init__.py srcCordova +src/cert/* src/js/compileDate.js src/js/config.js src/js/config-qa.js diff --git a/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx b/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx index 0ba8bfa74..2c17745c9 100644 --- a/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx +++ b/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx @@ -1,20 +1,18 @@ -import { CheckCircle, PlayCircleFilled, PushPin } from '@mui/icons-material'; -import { Button } from '@mui/material'; -import withStyles from '@mui/styles/withStyles'; -import withTheme from '@mui/styles/withTheme'; -import PropTypes from 'prop-types'; import styled from 'styled-components'; import React, { Component, Suspense } from 'react'; +import crossIcon from '../../../img/global/icons/cross.svg'; import { renderLog } from '../../common/utils/logging'; import VoterConstants from '../../constants/VoterConstants'; import AppObservableStore from '../../common/stores/AppObservableStore'; import BallotStore from '../../stores/BallotStore'; import SupportStore from '../../stores/SupportStore'; import VoterStore from '../../stores/VoterStore'; +import Colors from '../../common/components/Style/Colors'; +import HowItWorksStep from './Step'; const SignInModal = React.lazy(() => import(/* webpackChunkName: 'SignInModal' */ '../../common/components/SignIn/SignInModal')); -class CompleteYourProfile extends Component { +class CompleteYourProfile2024 extends Component { constructor (props) { super(props); this.state = { @@ -25,17 +23,16 @@ class CompleteYourProfile extends Component { personalizedScoreIntroCompleted: false, showSignInModal: false, stepIdHowItWorks: 1, - stepIdPersonalizedScore: 2, stepIdSignInToSave: 3, steps: [], + showHowItWorksWizard: true, }; this.previousStep = this.previousStep.bind(this); this.nextStep = this.nextStep.bind(this); } - // Steps: options, friends componentDidMount () { this.ballotStoreListener = BallotStore.addListener(this.onBallotStoreChange.bind(this)); this.supportStoreListener = SupportStore.addListener(this.onSupportStoreChange.bind(this)); @@ -44,6 +41,7 @@ class CompleteYourProfile extends Component { ballotLength: BallotStore.ballotLength, ballotRemainingChoicesLength: BallotStore.ballotRemainingChoicesLength, goToNextIncompleteStepForced: true, + // textForMapSearch: VoterStore.getTextForMapSearch(), voterIsSignedIn: VoterStore.getVoterIsSignedIn(), }, () => this.updateStepsArray()); } @@ -71,8 +69,10 @@ class CompleteYourProfile extends Component { } onVoterStoreChange () { + // console.log('CompleteYourProfile onVoterStoreChange'); this.setState({ goToNextIncompleteStepForced: true, + // textForMapSearch: VoterStore.getTextForMapSearch(), voterIsSignedIn: VoterStore.getVoterIsSignedIn(), }, () => this.updateStepsArray()); } @@ -104,12 +104,10 @@ class CompleteYourProfile extends Component { } setItemComplete (stepItemIdToMarkComplete) { - // console.log('Setting complete!'); const { steps } = this.state; let oneStepModified; const newSteps = steps.map((oneStep) => { if (oneStep.id === stepItemIdToMarkComplete) { - // console.log('Item to mark complete: ', oneStep); oneStepModified = oneStep; oneStepModified.completed = true; return oneStepModified; @@ -122,12 +120,10 @@ class CompleteYourProfile extends Component { } setItemNotComplete (stepItemIdToMarkNotComplete) { - // console.log('Setting not complete!'); const { steps } = this.state; let oneStepModified; const newSteps = steps.map((oneStep) => { if (oneStep.id === stepItemIdToMarkNotComplete) { - // console.log('Item to mark not complete: ', oneStep); oneStepModified = oneStep; oneStepModified.completed = false; return oneStepModified; @@ -149,53 +145,48 @@ class CompleteYourProfile extends Component { if (ballotItemChoicesCount >= 4 && !voterIsSignedIn) { stepIdSignInToSave = 1; stepIdHowItWorks = 2; - // stepIdValuesIntro = 3; - // stepIdEnterFullAddress = 4; stepIdPersonalizedScore = 3; } this.setState({ stepIdHowItWorks, - // stepIdValuesIntro, - // stepIdEnterFullAddress, stepIdPersonalizedScore, stepIdSignInToSave, steps: [ { id: stepIdHowItWorks, - title: 'Watch how it works (no sound)', + title: 'How WeVote works', buttonText: '', completed: false, description: '', - icon: (), onClick: this.openHowItWorksModal, titleCanBeClicked: true, + width: '29%', }, { id: stepIdPersonalizedScore, - title: 'What\'s a personalized score?', + title: 'Your personalized score', buttonText: '', completed: false, description: '', - icon: (+1), onClick: this.openPersonalizedScoreIntroModal, titleCanBeClicked: true, + width: '29%', }, { id: stepIdSignInToSave, - title: voterIsSignedIn ? 'Your ballot choices and settings are saved' : 'Sign in or sign up to save your ballot choices and settings', + title: voterIsSignedIn ? 'Your ballot choices and settings are saved' : 'Sign in or join to save your ballot choices/settings', buttonText: voterIsSignedIn ? '' : 'Sign up to save choices', completed: false, description: '', - icon: (), onClick: this.toggleShowSignInModal, titleCanBeClicked: !voterIsSignedIn, + width: '42%', }, ], }, () => this.setCompletedStatus()); } openHowItWorksModal = () => { - // console.log('Opening modal'); AppObservableStore.setShowHowItWorksModal(true); } @@ -216,6 +207,7 @@ class CompleteYourProfile extends Component { goToNextIncompleteStepIfForced = () => { const { goToNextIncompleteStepForced } = this.state; + // console.log('goToNextIncompleteStepForced:', goToNextIncompleteStepForced); if (goToNextIncompleteStepForced) { this.goToNextIncompleteStep(); } @@ -238,11 +230,16 @@ class CompleteYourProfile extends Component { }); } + hideHowItWorksWizard = () => { + this.setState({ + showHowItWorksWizard: false, + }); + } + previousStep () { this.sortSteps(); const { steps } = this.state; const currentIndex = steps.map((oneStep) => oneStep.id).indexOf(this.state.activeStep); - // console.log('currentIndex: ', currentIndex); if (currentIndex >= 1) { this.setState({ activeStep: steps[currentIndex - 1].id, @@ -254,7 +251,6 @@ class CompleteYourProfile extends Component { this.sortSteps(); const { steps } = this.state; const currentIndex = steps.map((e) => e.id).indexOf(this.state.activeStep); - // console.log('currentIndex: ', currentIndex); if (steps[currentIndex + 1]) { this.setState({ activeStep: steps[currentIndex + 1].id, @@ -264,7 +260,6 @@ class CompleteYourProfile extends Component { sortSteps () { function compare (a, b) { - // Use toUpperCase() to ignore character casing const itemA = a; const itemB = b; @@ -291,18 +286,19 @@ class CompleteYourProfile extends Component { } render () { - renderLog('CompleteYourProfile'); // Set LOG_RENDER_EVENTS to log all renders - const { classes } = this.props; + renderLog('CompleteYourProfile2024'); // Set LOG_RENDER_EVENTS to log all renders const { activeStep, ballotLength, ballotRemainingChoicesLength, howItWorksWatched, personalizedScoreIntroCompleted, showSignInModal, - steps, // stepIdEnterFullAddress, textForMapSearch + steps, voterIsSignedIn, + showHowItWorksWizard, } = this.state; // If we have completed all the steps, don't render this component const allStepsHaveBeenCompleted = howItWorksWatched && personalizedScoreIntroCompleted && voterIsSignedIn; + // Prior: (addressIntroCompleted || addressIntroCompletedByCookie) && howItWorksWatched && personalizedScoreIntroCompleted && valuesIntroCompleted && voterIsSignedIn const showCompleteYourProfileForDebugging = false; if (showCompleteYourProfileForDebugging) { // Pass by this OFF switch so we render this component @@ -315,345 +311,93 @@ class CompleteYourProfile extends Component { return (
- - - - {/* {(showSignInModal && !VoterStore.getVoterIsSignedIn()) && ( + {(showSignInModal && !VoterStore.getVoterIsSignedIn()) && ( }> )} - - - - {steps.filter((oneStep) => oneStep.completed).length } - {' '} - of - {' '} - {steps.length} - - {' '} - actions - completed - - - {steps.map((step) => ( - this.goToStep(step.id)} - /> - ))} - - - - {steps.map((step, index) => { - if (step.id === activeStep) { - return ( - - { step.onClick(); }} - titleCanBeClicked={step.titleCanBeClicked} - > - - {step.icon} - - - - {step.title} - - {step.completed && ( - - - {' '} - Completed - - )} - - {step.description} - - {step.buttonText && ( - <> - - - - - - - - )} - - - {index !== 0 && ( - - )} - - - {index < (steps.length - 1) ? ( - - ) : ( - - )} - - - - ); - } else { - return null; - } - })} */} + {(showHowItWorksWizard) && ( + + +

+ + Turn your values into voting decisions! + + + See how to turn your values into voting decisions! + +

+ + Close + + + + + {steps.map((step) => ( + { step.onClick(); }} + width={step.width} + /> + ))} + + + )}
); } } -CompleteYourProfile.propTypes = { - classes: PropTypes.object, -}; -const styles = () => ({ - navigationButton: { - opacity: '0.8', - fontWeight: 400, - }, -}); - const HowItWorksContainer = styled('div')` - width: 458px; - height: 168px; + display: 'flex'; + flexDirection: 'column'; + justifyContent: 'center'; + alignItems: 'center'; + // height: 168px; border-radius: 10px; - border: 1px solid #B0B0B0; - background: #E6F3FF; -`; - -const Step = styled('div', { - shouldForwardProp: (prop) => !['complete', 'active'].includes(prop), -})(({ complete, active }) => (` - cursor: pointer; - flex: 1 1 0; - height: 8px; - margin: 0 4px; - ${complete && active ? 'background: rgb(31,192,111); border-bottom: 2px solid #2E3C5D;' : ''} - ${complete && !active ? 'background: rgb(31,192,111);' : ''} - ${!complete && active ? 'background: #e1e1e1; border-bottom: 2px solid #2E3C5D;' : ''} - ${!complete && !active ? 'background: #e1e1e1;' : ''} -`)); - -// const Step = styled('div')` -// display: flex; -// height: 100%; -// align-items: center; -// flex-direction: column; -// background: red; -// `; - -const Completed = styled('div')` - color: green; - margin-left: -2px; - & * { - width: 15px !important; - height: 15px !important; - position: relative; - top: -2px; - } + border: 1px solid ${Colors.lightGrey}; + background: ${Colors.primary50}; + margin-bottom: 22px; + overflow: hidden; `; -const Description = styled('div')` - @media (min-width: 576px) { - display: flex; - align-items: flex-start; - justify-content: space-between; - // margin: 14px 0 8px; - } -`; - -const Flex = styled('div')` - display: flex; - justify-content: space-between; -`; - -const Icon = styled('div', { - shouldForwardProp: (prop) => !['titleCanBeClicked'].includes(prop), -})(({ titleCanBeClicked }) => (` - // display: inline-block; - width: 35px; - height: 35px; - // @media (min-width: 576px) and (max-width: 769px) { - // margin-bottom: 12px; - // } - margin-right: 8px; - margin-top: 0px !important; - * { - height: 35px !important; - width: 35px !important; - fill: #2E3C5D; - } - ${titleCanBeClicked ? 'cursor: pointer;' : ''} -`)); - -const Indicators = styled('div')` - align-items: center; +const HowItWorksHeader = styled('div')` + min-height: 33px; + background: ${Colors.primary2024}; display: flex; - flex: 1 1 0; - margin-left: 8px; -`; - -const Indicator = styled('div', { - shouldForwardProp: (prop) => !['complete', 'active'].includes(prop), -})(({ complete, active }) => (` - cursor: pointer; - flex: 1 1 0; - height: 8px; - margin: 0 4px; - ${complete && active ? 'background: rgb(31,192,111); border-bottom: 2px solid #2E3C5D;' : ''} - ${complete && !active ? 'background: rgb(31,192,111);' : ''} - ${!complete && active ? 'background: #e1e1e1; border-bottom: 2px solid #2E3C5D;' : ''} - ${!complete && !active ? 'background: #e1e1e1;' : ''} -`)); - -const Info = styled('span')` - display: none; - @media(min-width: 525px) { - display: inline; - } -`; - -const MobileActionButton = styled('div')` - border-bottom: 1px solid #e1e1e1; - margin-bottom: 0; - margin-top: 8px; - padding-bottom: 8px; - @media (min-width: 576px) { - display: none; - } -`; - -const NavButton = styled('div')` - * { - font-weight: bold; - } -`; - -const NavButtons = styled('div')` align-items: center; - display: flex; - // margin-top: 12px; justify-content: space-between; - @media (min-width: 769px) { - width: fit-content; - margin-left: auto; - // margin-right: auto; - margin-top: 0; - } -`; -const NextButtonPlaceholder = styled('div')` - width: 64px; -`; - -const PersonalizedScorePlusOne = styled('div')` - align-items: center; - background: #2E3C5D; - border-radius: 5px; - color: white; - display: flex; - font-size: 16px; - font-weight: bold; - justify-content: center; - width: 40px; - height: 40px; - @media print{ - border: 2px solid grey; + p { + color: ${Colors.white}; + font-size: 15px; + font-style: normal; + font-weight: 500; + margin-bottom: 0; + padding-left: 16px; } `; -const Separator = styled('div')` - background: #e1e1e1; - margin: 8px auto; - width: 100%; - height: 1px; -`; - -const TabletActionButton = styled('div')` - display: none; - @media(min-width: 576px) { - display: block; - margin-left: auto; - } - @media(min-width: 769px) { - margin-left: 12px; - } +const HowItWorksCrossIconContainer = styled('div')` + padding-right: 8px; + cursor: pointer; `; -const Title = styled('h2', { - shouldForwardProp: (prop) => !['titleCanBeClicked'].includes(prop), -})(({ titleCanBeClicked }) => (` - align-items: center; +const HowItWorksStepsContainer = styled('div')` display: flex; - margin: 0; - ${titleCanBeClicked ? 'color: #4371CC;' : ''} - ${titleCanBeClicked ? 'text-decoration: underline;' : ''} - ${titleCanBeClicked ? 'text-decoration-color: #ccc;' : ''} -`)); - -const TitleArea = styled('div', { - shouldForwardProp: (prop) => !['titleCanBeClicked'].includes(prop), -})(({ titleCanBeClicked }) => (` - align-items: flex-start; - display: flex; - justify-content: flex-start; - @media (min-width: 576px) { - // display: inline-block; - margin: auto 0; - } - ${titleCanBeClicked ? 'cursor: pointer;' : ''} -`)); - -const TitleFlex = styled('div')` - display: inline-block; - // margin: 2px 0 0 0; - margin-right: 8px; + flex-direction: row; + justify-content: space-evenly; + padding-top: 16px; `; -export default withTheme(withStyles(styles)(CompleteYourProfile)); +export default CompleteYourProfile2024; diff --git a/src/js/components/CompleteYourProfile/CompleteYourProfile2024/CompleteYourProfile2024.jsx b/src/js/components/CompleteYourProfile/CompleteYourProfile2024b.jsx similarity index 68% rename from src/js/components/CompleteYourProfile/CompleteYourProfile2024/CompleteYourProfile2024.jsx rename to src/js/components/CompleteYourProfile/CompleteYourProfile2024b.jsx index 79e9e5104..982576ba1 100644 --- a/src/js/components/CompleteYourProfile/CompleteYourProfile2024/CompleteYourProfile2024.jsx +++ b/src/js/components/CompleteYourProfile/CompleteYourProfile2024b.jsx @@ -1,18 +1,17 @@ +import { PlayCircleFilled, PushPin } from '@mui/icons-material'; +import withStyles from '@mui/styles/withStyles'; +import withTheme from '@mui/styles/withTheme'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; -import React, { Component, Suspense } from 'react'; -import crossIcon from '../../../../img/global/icons/cross.svg'; -import { renderLog } from '../../../common/utils/logging'; -import VoterConstants from '../../../constants/VoterConstants'; -import AppObservableStore from '../../../common/stores/AppObservableStore'; -import BallotStore from '../../../stores/BallotStore'; -import SupportStore from '../../../stores/SupportStore'; -import VoterStore from '../../../stores/VoterStore'; -import Colors from '../../../common/components/Style/Colors'; -import HowItWorksStep from './Step'; - -const SignInModal = React.lazy(() => import(/* webpackChunkName: 'SignInModal' */ '../../../common/components/SignIn/SignInModal')); - -class CompleteYourProfile2024 extends Component { +import React, { Component } from 'react'; +import { renderLog } from '../../common/utils/logging'; +import VoterConstants from '../../constants/VoterConstants'; +import AppObservableStore from '../../common/stores/AppObservableStore'; +import BallotStore from '../../stores/BallotStore'; +import SupportStore from '../../stores/SupportStore'; +import VoterStore from '../../stores/VoterStore'; + +class CompleteYourProfile extends Component { constructor (props) { super(props); this.state = { @@ -26,13 +25,13 @@ class CompleteYourProfile2024 extends Component { stepIdPersonalizedScore: 2, stepIdSignInToSave: 3, steps: [], - showHowItWorksWizzard: true, }; this.previousStep = this.previousStep.bind(this); this.nextStep = this.nextStep.bind(this); } + // Steps: options, friends componentDidMount () { this.ballotStoreListener = BallotStore.addListener(this.onBallotStoreChange.bind(this)); this.supportStoreListener = SupportStore.addListener(this.onSupportStoreChange.bind(this)); @@ -41,7 +40,6 @@ class CompleteYourProfile2024 extends Component { ballotLength: BallotStore.ballotLength, ballotRemainingChoicesLength: BallotStore.ballotRemainingChoicesLength, goToNextIncompleteStepForced: true, - // textForMapSearch: VoterStore.getTextForMapSearch(), voterIsSignedIn: VoterStore.getVoterIsSignedIn(), }, () => this.updateStepsArray()); } @@ -69,10 +67,8 @@ class CompleteYourProfile2024 extends Component { } onVoterStoreChange () { - // console.log('CompleteYourProfile onVoterStoreChange'); this.setState({ goToNextIncompleteStepForced: true, - // textForMapSearch: VoterStore.getTextForMapSearch(), voterIsSignedIn: VoterStore.getVoterIsSignedIn(), }, () => this.updateStepsArray()); } @@ -104,10 +100,12 @@ class CompleteYourProfile2024 extends Component { } setItemComplete (stepItemIdToMarkComplete) { + // console.log('Setting complete!'); const { steps } = this.state; let oneStepModified; const newSteps = steps.map((oneStep) => { if (oneStep.id === stepItemIdToMarkComplete) { + // console.log('Item to mark complete: ', oneStep); oneStepModified = oneStep; oneStepModified.completed = true; return oneStepModified; @@ -120,10 +118,12 @@ class CompleteYourProfile2024 extends Component { } setItemNotComplete (stepItemIdToMarkNotComplete) { + // console.log('Setting not complete!'); const { steps } = this.state; let oneStepModified; const newSteps = steps.map((oneStep) => { if (oneStep.id === stepItemIdToMarkNotComplete) { + // console.log('Item to mark not complete: ', oneStep); oneStepModified = oneStep; oneStepModified.completed = false; return oneStepModified; @@ -154,13 +154,13 @@ class CompleteYourProfile2024 extends Component { steps: [ { id: stepIdHowItWorks, - title: 'How WeVote works?', + title: 'Watch how it works (no sound)', buttonText: '', completed: false, description: '', + icon: (), onClick: this.openHowItWorksModal, titleCanBeClicked: true, - width: '29%', }, { id: stepIdPersonalizedScore, @@ -168,9 +168,9 @@ class CompleteYourProfile2024 extends Component { buttonText: '', completed: false, description: '', + icon: (+1), onClick: this.openPersonalizedScoreIntroModal, titleCanBeClicked: true, - width: '29%', }, { id: stepIdSignInToSave, @@ -178,15 +178,16 @@ class CompleteYourProfile2024 extends Component { buttonText: voterIsSignedIn ? '' : 'Sign up to save choices', completed: false, description: '', + icon: (), onClick: this.toggleShowSignInModal, titleCanBeClicked: !voterIsSignedIn, - width: '42%', }, ], }, () => this.setCompletedStatus()); } openHowItWorksModal = () => { + // console.log('Opening modal'); AppObservableStore.setShowHowItWorksModal(true); } @@ -207,7 +208,6 @@ class CompleteYourProfile2024 extends Component { goToNextIncompleteStepIfForced = () => { const { goToNextIncompleteStepForced } = this.state; - // console.log('goToNextIncompleteStepForced:', goToNextIncompleteStepForced); if (goToNextIncompleteStepForced) { this.goToNextIncompleteStep(); } @@ -216,13 +216,6 @@ class CompleteYourProfile2024 extends Component { }); } - goToStep = (stepId) => { - this.sortSteps(); - this.setState({ - activeStep: stepId, - }); - } - toggleShowSignInModal = () => { const { showSignInModal } = this.state; this.setState({ @@ -230,16 +223,11 @@ class CompleteYourProfile2024 extends Component { }); } - hideHowItWorksWizzard = () => { - this.setState({ - showHowItWorksWizzard: false, - }); - } - previousStep () { this.sortSteps(); const { steps } = this.state; const currentIndex = steps.map((oneStep) => oneStep.id).indexOf(this.state.activeStep); + // console.log('currentIndex: ', currentIndex); if (currentIndex >= 1) { this.setState({ activeStep: steps[currentIndex - 1].id, @@ -251,6 +239,7 @@ class CompleteYourProfile2024 extends Component { this.sortSteps(); const { steps } = this.state; const currentIndex = steps.map((e) => e.id).indexOf(this.state.activeStep); + // console.log('currentIndex: ', currentIndex); if (steps[currentIndex + 1]) { this.setState({ activeStep: steps[currentIndex + 1].id, @@ -260,6 +249,7 @@ class CompleteYourProfile2024 extends Component { sortSteps () { function compare (a, b) { + // Use toUpperCase() to ignore character casing const itemA = a; const itemB = b; @@ -286,19 +276,15 @@ class CompleteYourProfile2024 extends Component { } render () { - renderLog('CompleteYourProfile2024'); // Set LOG_RENDER_EVENTS to log all renders + renderLog('CompleteYourProfile'); // Set LOG_RENDER_EVENTS to log all renders const { - activeStep, ballotLength, ballotRemainingChoicesLength, + ballotLength, ballotRemainingChoicesLength, howItWorksWatched, personalizedScoreIntroCompleted, - showSignInModal, - steps, voterIsSignedIn, - showHowItWorksWizzard, } = this.state; // If we have completed all the steps, don't render this component const allStepsHaveBeenCompleted = howItWorksWatched && personalizedScoreIntroCompleted && voterIsSignedIn; - // Prior: (addressIntroCompleted || addressIntroCompletedByCookie) && howItWorksWatched && personalizedScoreIntroCompleted && valuesIntroCompleted && voterIsSignedIn const showCompleteYourProfileForDebugging = false; if (showCompleteYourProfileForDebugging) { // Pass by this OFF switch so we render this component @@ -311,86 +297,58 @@ class CompleteYourProfile2024 extends Component { return (
- {(showSignInModal && !VoterStore.getVoterIsSignedIn()) && ( - }> - - - )} - {(showHowItWorksWizzard) && ( - - -

See how to turn your values into voting decisions!

- - Close - - - - - {steps.map((step) => ( - { step.onClick(); }} - width={step.width} - /> - ))} - - - )} + + +
); } } +CompleteYourProfile.propTypes = { + classes: PropTypes.object, +}; +const styles = () => ({ + navigationButton: { + opacity: '0.8', + fontWeight: 400, + }, +}); const HowItWorksContainer = styled('div')` - display: 'flex'; - flexDirection: 'column'; - justifyContent: 'center'; - alignItems: 'center'; - // height: 168px; + width: 458px; + height: 168px; border-radius: 10px; - border: 1px solid ${Colors.lightGrey}; - background: ${Colors.primary50}; - margin-bottom: 22px; - overflow: hidden; + border: 1px solid #B0B0B0; + background: #E6F3FF; `; -const HowItWorksHeader = styled('div')` - min-height: 33px; - background: ${Colors.primary2024}; - display: flex; - align-items: center; - justify-content: space-between; - - p { - color: ${Colors.white}; - font-size: 15px; - font-style: normal; - font-weight: 500; - margin-bottom: 0; - padding-left: 16px; - } -`; - -const HowItWorksCrossIconContainer = styled('div')` - padding-right: 8px; +const Step = styled('div', { + shouldForwardProp: (prop) => !['complete', 'active'].includes(prop), +})(({ complete, active }) => (` cursor: pointer; -`; - -const HowItWorksStepsContainer = styled('div')` + flex: 1 1 0; + height: 8px; + margin: 0 4px; + ${complete && active ? 'background: rgb(31,192,111); border-bottom: 2px solid #2E3C5D;' : ''} + ${complete && !active ? 'background: rgb(31,192,111);' : ''} + ${!complete && active ? 'background: #e1e1e1; border-bottom: 2px solid #2E3C5D;' : ''} + ${!complete && !active ? 'background: #e1e1e1;' : ''} +`)); + +const PersonalizedScorePlusOne = styled('div')` + align-items: center; + background: #2E3C5D; + border-radius: 5px; + color: white; display: flex; - flex-direction: row; - justify-content: space-evenly; - padding-top: 16px; + font-size: 16px; + font-weight: bold; + justify-content: center; + width: 40px; + height: 40px; + @media print{ + border: 2px solid grey; + } `; -export default CompleteYourProfile2024; +export default withTheme(withStyles(styles)(CompleteYourProfile)); diff --git a/src/js/components/CompleteYourProfile/CompleteYourProfile2024/Step.jsx b/src/js/components/CompleteYourProfile/Step.jsx similarity index 94% rename from src/js/components/CompleteYourProfile/CompleteYourProfile2024/Step.jsx rename to src/js/components/CompleteYourProfile/Step.jsx index 266fb7be2..03400c73e 100644 --- a/src/js/components/CompleteYourProfile/CompleteYourProfile2024/Step.jsx +++ b/src/js/components/CompleteYourProfile/Step.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import Colors from '../../../common/components/Style/Colors'; +import Colors from '../../common/components/Style/Colors'; import StepIcon from './StepIcon'; const Step = ({ onClick, step, label, completed, width }) => ( diff --git a/src/js/components/CompleteYourProfile/CompleteYourProfile2024/StepIcon.jsx b/src/js/components/CompleteYourProfile/StepIcon.jsx similarity index 96% rename from src/js/components/CompleteYourProfile/CompleteYourProfile2024/StepIcon.jsx rename to src/js/components/CompleteYourProfile/StepIcon.jsx index 80fc92d4f..2605a3111 100644 --- a/src/js/components/CompleteYourProfile/CompleteYourProfile2024/StepIcon.jsx +++ b/src/js/components/CompleteYourProfile/StepIcon.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import Colors from '../../../common/components/Style/Colors'; +import Colors from '../../common/components/Style/Colors'; const StepIcon = ({ number, completed }) => ( @@ -30,7 +30,7 @@ const StepIconContainer = styled('div')` height: 20px; border-radius: 50%; background-color: ${completed ? 'initial' : Colors.primary2024}; - `} + `} && p { color: ${Colors.white}; diff --git a/src/js/components/Navigation/HeaderBackTo.jsx b/src/js/components/Navigation/HeaderBackTo.jsx index e1b611826..9d825aa1b 100644 --- a/src/js/components/Navigation/HeaderBackTo.jsx +++ b/src/js/components/Navigation/HeaderBackTo.jsx @@ -275,7 +275,7 @@ class HeaderBackTo extends Component { {showSignInModal && ( }> }> }> }> }> - + - Sign Up + Join - + ); } @@ -57,6 +57,9 @@ SignInButton.propTypes = { toggleSignInModal: PropTypes.func, }; +const SignInButtonInnerWrapper = styled('span')` +`; + const StyledButton = styled(Button)(({ theme }) => (` font-size: 18px; padding: 8px 8px 4px 8px; diff --git a/src/js/pages/Activity/News.jsx b/src/js/pages/Activity/News.jsx index c0ab932bd..2863c7a6c 100644 --- a/src/js/pages/Activity/News.jsx +++ b/src/js/pages/Activity/News.jsx @@ -482,7 +482,7 @@ class News extends Component { {voterIsSignedIn && ( {!voterSignedInTwitter && ( -
+
diff --git a/src/js/pages/Ballot/Ballot.jsx b/src/js/pages/Ballot/Ballot.jsx index b1b080124..13f353fda 100644 --- a/src/js/pages/Ballot/Ballot.jsx +++ b/src/js/pages/Ballot/Ballot.jsx @@ -52,7 +52,7 @@ import mapCategoryFilterType from '../../utils/map-category-filter-type'; import showBallotDecisionsTabs from '../../utilsApi/showBallotDecisionsTabs'; import { checkShouldUpdate, formatVoterBallotList } from './utils/ballotUtils'; -const CompleteYourProfile2024 = React.lazy(() => import(/* webpackChunkName: 'CompleteYourProfile' */ '../../components/CompleteYourProfile/CompleteYourProfile2024/CompleteYourProfile2024')); +const CompleteYourProfile2024 = React.lazy(() => import(/* webpackChunkName: 'CompleteYourProfile' */ '../../components/CompleteYourProfile/CompleteYourProfile2024')); // const CompleteYourProfile = React.lazy(() => import(/* webpackChunkName: 'CompleteYourProfile' */ '../../components/CompleteYourProfile/CompleteYourProfile')); const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../../common/components/Widgets/DelayedLoad')); const FilterBaseSearch = React.lazy(() => import(/* webpackChunkName: 'FilterBaseSearch' */ '../../components/Filter/FilterBaseSearch')); @@ -1266,57 +1266,57 @@ class Ballot extends Component { const ballotReturnedAdminEditUrl = `${webAppConfig.WE_VOTE_SERVER_ROOT_URL}b/${sourcePollingLocationWeVoteId}/list_edit_by_polling_location/?google_civic_election_id=${VoterStore.electionId()}&state_code=`; // console.log('electionName: ', electionName, ', electionDayText: ', electionDayText); - const emptyBallotButton = completionLevelFilterType !== 'none' && !voterAddressMissing ? ( - - - Ballot Not Released Yet - - - Your next ballot isn't ready yet. Ballot data is usually available 45 days before each election. - You can also - {' '} - AppObservableStore.setShowSelectBallotModalOnly(true)} - > - see what is on the ballot in other states - - . - {!VoterStore.getVoterIsSignedIn() && ( - <> - {' '} - Please sign in so we can notify you when your election data is available. - - )} -
-
- WeVote uses ballot data aggregated from government, nonpartisan, and partisan sources. WeVote strives to provide a balanced selection of clearly identified voting guides from newspapers and media. Partisan voter guides are also provided from a diversity of sources and points-of-view. -
-
- While you are waiting, connect with your friends who are already using WeVote. - - - }> - - - - - ) : ( -
- -
- - Enter address where you are registered to vote - - )} - // classes={this.props.classes} - saveUrl={ballotBaseUrl} - /> -
-
- ); + // const emptyBallotButton = completionLevelFilterType !== 'none' && !voterAddressMissing ? ( + // + // + // Ballot Not Released Yet + // + // + // Your next ballot isn't ready yet. Ballot data is usually available 45 days before each election. + // You can also + // {' '} + // AppObservableStore.setShowSelectBallotModalOnly(true)} + // > + // see what is on the ballot in other states + // + // . + // {!VoterStore.getVoterIsSignedIn() && ( + // <> + // {' '} + // Please sign in so we can notify you when your election data is available. + // + // )} + //
+ //
+ // WeVote uses ballot data aggregated from government, nonpartisan, and partisan sources. WeVote strives to provide a balanced selection of clearly identified voting guides from newspapers and media. Partisan voter guides are also provided from a diversity of sources and points-of-view. + //
+ //
+ // While you are waiting, connect with your friends who are already using WeVote. + // + // + // }> + // + // + // + // + // ) : ( + //
+ // + //
+ // + // Enter address where you are registered to vote + // + // )} + // // classes={this.props.classes} + // saveUrl={ballotBaseUrl} + // /> + //
+ //
+ // ); // console.log('ballotWithItemsFromCompletionFilterType: ', ballotWithItemsFromCompletionFilterType); // Was: ballotWithItemsFromCompletionFilterType @@ -1850,7 +1850,8 @@ const BallotTitleHeaderContainer = styled('div', { `)); const CompleteYourProfileWrapper = styled('div')` - margin-top: 24px; + margin-top: 60px; + // margin-top: 24px; // We can use this spacing when the header spacing is fixed margin-bottom: 45px; `;