From f378740bdb3ea6eb528a56936fb3b67e07df43d0 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Tue, 9 Oct 2018 10:05:04 -0700 Subject: [PATCH 01/20] Issue #55: Copy change requests --- src/store/Questions.ts | 4 ++-- src/store/Types.ts | 3 ++- src/strings.ts | 35 +++++++++++++++++++++++++---------- 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/store/Questions.ts b/src/store/Questions.ts index 3807d76..1dffdb9 100644 --- a/src/store/Questions.ts +++ b/src/store/Questions.ts @@ -9,11 +9,11 @@ export const QUESTIONS : IQuestion[] = [ dotNavStep: 1, nextQuestionId: (answer) => QuestionId.OverseasMilitary, answers: [ - AnswerId.EmphaticYes, + AnswerId.Yes, AnswerId.No, AnswerId.DontKnow, ], - resultingPlanStep: (answer) => answer === AnswerId.No || answer === AnswerId.DontKnow ? PlanStepId.Register : undefined, + resultingPlanStep: (answer) => answer === AnswerId.Yes ? PlanStepId.CheckRegistration : (answer === AnswerId.No ? PlanStepId.Register : PlanStepId.MaybeRegister), }, { id: QuestionId.OverseasMilitary, diff --git a/src/store/Types.ts b/src/store/Types.ts index 5c88ac0..ef16621 100644 --- a/src/store/Types.ts +++ b/src/store/Types.ts @@ -39,7 +39,6 @@ export const ALL_QUESTION_IDS: QuestionId[] = [ export enum AnswerId { Yes = 'Y', No = 'N', - EmphaticYes = 'EY', DontKnow = 'DN', Washington = 'WA', Oregon = 'OR', @@ -138,6 +137,8 @@ export interface IAnswerQuestionPayload { export enum PlanStepId { Register, + CheckRegistration, + MaybeRegister, RequestOverseasBallot, HaveBallot, NoBallotYet, diff --git a/src/strings.ts b/src/strings.ts index 97e3ab9..e94208e 100644 --- a/src/strings.ts +++ b/src/strings.ts @@ -59,9 +59,6 @@ export function getAnswerLabel(answer: AnswerId): string { case AnswerId.No: return 'No'; - case AnswerId.EmphaticYes: - return 'Yes!'; - case AnswerId.DontKnow: return 'Not sure'; @@ -168,6 +165,24 @@ export function getPlanStepStrings(step: PlanStepId, state: VotingStateId): IPla }; } + case PlanStepId.CheckRegistration: { + return { + header: "Check your registration", + text: "Great \u2014 you're registered! Now take a quick look to make sure everything is up-to-date.", + callToAction: "Double-check your registration", + link: "https://www.rockthevote.org/voting-information/am-i-registered-to-vote/", + }; + } + + case PlanStepId.MaybeRegister: { + return { + header: "Check your registration", + text: "Not sure whether you're registered? Take a minute to double-check and make sure you're vote ready.", + callToAction: "Double-check your registration", + link: "https://www.rockthevote.org/voting-information/am-i-registered-to-vote/", + }; + } + case PlanStepId.RequestOverseasBallot: { return { header: "Request your absentee ballot", @@ -335,8 +350,8 @@ export function getPlanStepStrings(step: PlanStepId, state: VotingStateId): IPla case PlanStepId.FindPollingLocation: { return { header: "Find your polling location", - text: "Make it easy on yourself! Find your state's polling locations through the link below.", - callToAction: "This way to the polls (scroll for your state)!", + text: "Make it easy on yourself! Find your polling location through the link below.", + callToAction: "This way to the polls!", link: "https://www.vote.org/polling-place-locator/", } } @@ -408,7 +423,7 @@ export function getPlanStepStrings(step: PlanStepId, state: VotingStateId): IPla case PlanStepId.ReviewBallotIssues: { return { header: "Your ballot, in a nutshell", - text: "You're familiar with the candidates and issues \u2014 now put it all together using this handy app.", + text: "You're familiar with the candidates and issues. The Ballot Ready app can help you make informed choices.", callToAction: "Plan your ballot choices", link: "https://www.ballotready.org/", } @@ -417,7 +432,7 @@ export function getPlanStepStrings(step: PlanStepId, state: VotingStateId): IPla case PlanStepId.ResearchBallotIssues: { return { header: "Introducing...your ballot!", - text: "Now's the perfect time to research the candidates and issues you'll be voting for. Here's an app to help.", + text: "Now's the perfect time to research the candidates and issues you'll be voting for. The Ballot Ready app can help you make informed choices.", callToAction: "Plan your ballot choices", link: "https://www.ballotready.org/", } @@ -425,8 +440,8 @@ export function getPlanStepStrings(step: PlanStepId, state: VotingStateId): IPla case PlanStepId.InvitePeople: { return { - header: "Invite your crowd to VotePlan!", // TODO: Review: "your crowd?", - text: "Let's keep each other accountable \u2014 voting's even better when we can do it together! Share your plans with the people in your life.", + header: "Invite your crowd to vote with you", // TODO: Review: "your crowd?", + text: "Let's keep each other accountable \u2014 voting's even better when we can do it together!", callToAction: undefined, link: undefined, } @@ -485,7 +500,7 @@ export function getPlanStepStrings(step: PlanStepId, state: VotingStateId): IPla case PlanStepId.Meh: { let header = "Put those feelings toward action"; let text: string | undefined; - const callToAction: string | undefined = "Your voice matters \u2014 take a look"; + const callToAction: string | undefined = "See what happens When We All Vote"; const link: string | undefined = "https://www.whenweallvote.org/"; switch (step) { From 27406d1139a66dabb991a6a7ef90279dfa42a272 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Tue, 9 Oct 2018 10:05:22 -0700 Subject: [PATCH 02/20] Add .gitignore entry for .vscode/launch.json --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index d30f40e..e86950d 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +src/.vscode \ No newline at end of file From d931ad1601c8ea6663b1514e74054ce84d861073 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 09:57:56 -0700 Subject: [PATCH 03/20] Add a 'ReasonToVote' component to the Plan page --- src/components/Plan.tsx | 19 +++++- src/components/PlanStep.tsx | 40 +++++-------- src/components/ReasonToVote.css | 6 ++ src/components/ReasonToVote.tsx | 26 ++++++++ src/strings.ts | 103 ++++++++++++++++++-------------- 5 files changed, 121 insertions(+), 73 deletions(-) create mode 100644 src/components/ReasonToVote.css create mode 100644 src/components/ReasonToVote.tsx diff --git a/src/components/Plan.tsx b/src/components/Plan.tsx index 45f604a..42fddcc 100644 --- a/src/components/Plan.tsx +++ b/src/components/Plan.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { connect} from 'react-redux'; import { PlanStep } from './PlanStep'; +import { ReasonToVote } from './ReasonToVote'; import { StartOverButton } from './StartOverButton'; -import { ALL_QUESTION_IDS, IConnectedReduxProps, IQuestionAndAnswer, QuestionId, VotingStateId } from '../store'; +import { ALL_QUESTION_IDS, IConnectedReduxProps, IQuestionAndAnswer, QuestionId, QUESTIONS, VotingStateId } from '../store'; import './Plan.css'; @@ -35,7 +36,21 @@ class InternalPlan extends React.Component qa.questionId === questionId); if (answer !== undefined) { - return + const question = QUESTIONS.find(q => q.id === questionId); + + const planStepId = question!.resultingPlanStep(answer!.answerId); + + if (planStepId !== undefined) { + if (questionId === QuestionId.ReasonToVote) { + return + } + else { + return + } + } + else { + return + } } else { return diff --git a/src/components/PlanStep.tsx b/src/components/PlanStep.tsx index 3cf503a..8fe0bd7 100644 --- a/src/components/PlanStep.tsx +++ b/src/components/PlanStep.tsx @@ -1,45 +1,35 @@ import * as React from 'react'; import { IIndexHolder } from './Plan'; -import { AnswerId, QUESTIONS, QuestionId, VotingStateId } from '../store'; +import { PlanStepId, VotingStateId } from '../store'; import { getPlanStepStrings, planStepHeaderFormattedString } from '../strings'; import './PlanStep.css'; interface IPlanStepProps { indexHolder: IIndexHolder, - questionId: QuestionId, - answerId: AnswerId, + planStepId: PlanStepId, votingStateId: VotingStateId, } export class PlanStep extends React.Component { public render() { - const { indexHolder, questionId, answerId, votingStateId } = this.props; + const { indexHolder, planStepId, votingStateId } = this.props; - const question = QUESTIONS.find(q => q.id === questionId); + const { header, text, callToAction, link } = getPlanStepStrings(planStepId, votingStateId); - const planStepId = question!.resultingPlanStep(answerId); + const fullHeaderString = planStepHeaderFormattedString(indexHolder.index, header); - if (planStepId !== undefined) { - const { header, text, callToAction, link } = getPlanStepStrings(planStepId, votingStateId); + // Increment the index holder so that the next plan step uses the next number. + indexHolder.index++; + + return ( +
+
{fullHeaderString}
+
{text}
- const fullHeaderString = planStepHeaderFormattedString(indexHolder.index, header); - - // Increment the index holder so that the next plan step uses the next number. - indexHolder.index++; - - return ( -
-
{fullHeaderString}
-
{text}
- - { this.renderCallToAction(callToAction, link) } -
- ); - } - else { - return - } + { this.renderCallToAction(callToAction, link) } +
+ ); } private renderCallToAction(callToAction: string | undefined, link: string | undefined): JSX.Element { diff --git a/src/components/ReasonToVote.css b/src/components/ReasonToVote.css new file mode 100644 index 0000000..0e59ee0 --- /dev/null +++ b/src/components/ReasonToVote.css @@ -0,0 +1,6 @@ +.reason-to-vote-text { + font-size: 150px; + font-family: "Pacifico"; + text-shadow: 5px 5px #1b2757; + padding-bottom: 10px; +} \ No newline at end of file diff --git a/src/components/ReasonToVote.tsx b/src/components/ReasonToVote.tsx new file mode 100644 index 0000000..f893b96 --- /dev/null +++ b/src/components/ReasonToVote.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { PlanStepId } from '../store'; +import { getReasonToVoteStrings } from '../strings'; + +import './PlanStep.css'; +import './ReasonToVote.css'; + +interface IPlanStepProps { + planStepId: PlanStepId, +} + +export class ReasonToVote extends React.Component { + public render() { + const { planStepId } = this.props; + + const { header, reasonText, bodyText } = getReasonToVoteStrings(planStepId); + + return ( +
+
{header}
+
{reasonText}
+
{bodyText}
+
+ ); + } +} \ No newline at end of file diff --git a/src/strings.ts b/src/strings.ts index e94208e..4fba80f 100644 --- a/src/strings.ts +++ b/src/strings.ts @@ -447,52 +447,6 @@ export function getPlanStepStrings(step: PlanStepId, state: VotingStateId): IPla } } - // TODO: Better styling for "FOR FAMILY" etc. - case PlanStepId.ForMyKidsAndFamily: { - return { - header: "Remember your reason for voting!", - text: "FOR FAMILY. Whether you're looking out for the next generation or for your family members today, you're right: your vote has an impact!", - callToAction: undefined, - link: undefined, - } - } - - case PlanStepId.VotingIsPrivilege: { - return { - header: "Remember your reason for voting!", - text: "IT'S MY PRIVILEGE. Yep, you've got the right idea, and we agree. Let's not take voting for granted!", - callToAction: undefined, - link: undefined, - } - } - - case PlanStepId.DriveChange: { - return { - header: "Remember your reason for voting!", - text: "FOR CHANGE. You're about to do the single best thing you can to weigh in on issues and decision-makers. Do you approve? Disapprove? Your vote is a meaningful message \u2014 pass it on!", - callToAction: undefined, - link: undefined, - } - } - - case PlanStepId.AlwaysVoted: { - return { - header: "Remember your reason for voting!", - text: "IT'S MY M.O.  You've always voted--good on you! Spread the word and keep up the great (and extremely important) civic habit.", - callToAction: undefined, - link: undefined, - } - } - - case PlanStepId.OtherReason: { - return { - header: "Remember your reason for voting!", - text: "CIVIC DUTY.  You're about to do the single best thing you can to weigh in on issues and decision-makers. Do you approve? Disapprove? Your vote is a meaningful message \u2014 pass it on!", - callToAction: undefined, - link: undefined, - } - } - case PlanStepId.Excited: case PlanStepId.Concerned: case PlanStepId.Shocked: @@ -570,4 +524,61 @@ function numberToString(n: number): string { export function planStepHeaderFormattedString(index: number, header: string) { const numberString = numberToString(index + 1); return `Step ${numberString}: ${header}`; +} + +export interface IReasonToVoteStrings { + header: string, + reasonText: string, + bodyText: string, +} + +export function getReasonToVoteStrings(planStepId: PlanStepId): IReasonToVoteStrings { + const header = "Remember your reason for voting!"; + + switch (planStepId) { + // TODO: Should these strings just say "Family", "Change", etc.? + case PlanStepId.ForMyKidsAndFamily: { + return { + header, + reasonText: "For Family", + bodyText: "Whether you're looking out for the next generation or for your family members today, you're right: your vote has an impact!" + } + } + + case PlanStepId.VotingIsPrivilege: { + return { + header, + reasonText: "It's My Privilege", + bodyText: "Yep, you've got the right idea, and we agree. Let's not take voting for granted!", + } + } + + case PlanStepId.DriveChange: { + return { + header, + reasonText: "For Change", + bodyText: "You're about to do the single best thing you can to weigh in on issues and decision-makers. Do you approve? Disapprove? Your vote is a meaningful message \u2014 pass it on!", + } + } + + case PlanStepId.AlwaysVoted: { + return { + header, + reasonText: "It's My M.O.", // TODO: Does everyone know what M.O. means? + bodyText: "You've always voted--good on you! Spread the word and keep up the great (and extremely important) civic habit.", + } + } + + case PlanStepId.OtherReason: { + return { + header, + reasonText: "CIVIC DUTY.", + bodyText: "You're about to do the single best thing you can to weigh in on issues and decision-makers. Do you approve? Disapprove? Your vote is a meaningful message \u2014 pass it on!", + } + } + + default: { + throw new Error("Unhandled PlanStepId"); + } + } } \ No newline at end of file From ccbfcd6f651a0fbc07ed8e8ba47d730bd79d24ab Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:00:07 -0700 Subject: [PATCH 04/20] Update colors for the 'ReasonToVote' component --- src/components/ReasonToVote.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ReasonToVote.css b/src/components/ReasonToVote.css index 0e59ee0..611ea39 100644 --- a/src/components/ReasonToVote.css +++ b/src/components/ReasonToVote.css @@ -1,6 +1,7 @@ .reason-to-vote-text { font-size: 150px; font-family: "Pacifico"; - text-shadow: 5px 5px #1b2757; + color: #1c2856; + text-shadow: 5px 5px #e81c38; padding-bottom: 10px; } \ No newline at end of file From c6d62da427dbaddada722eee478195f921e38845 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:02:07 -0700 Subject: [PATCH 05/20] Don't use all-caps for 'Civic Duty' --- src/strings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/strings.ts b/src/strings.ts index 4fba80f..c201ad3 100644 --- a/src/strings.ts +++ b/src/strings.ts @@ -572,7 +572,7 @@ export function getReasonToVoteStrings(planStepId: PlanStepId): IReasonToVoteStr case PlanStepId.OtherReason: { return { header, - reasonText: "CIVIC DUTY.", + reasonText: "Civic Duty", bodyText: "You're about to do the single best thing you can to weigh in on issues and decision-makers. Do you approve? Disapprove? Your vote is a meaningful message \u2014 pass it on!", } } From 1c8cb982102d0706cef38257771fbb017ad32ba2 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:06:52 -0700 Subject: [PATCH 06/20] Add a max-width for the plan-page body --- src/components/Plan.css | 6 ++++++ src/components/Plan.tsx | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Plan.css b/src/components/Plan.css index 21b530d..e72532c 100644 --- a/src/components/Plan.css +++ b/src/components/Plan.css @@ -5,4 +5,10 @@ .plan-congrats { font-size: 28px; +} + +.plan-page-body { + max-width: 800px; + margin-left: auto; + margin-right: auto; } \ No newline at end of file diff --git a/src/components/Plan.tsx b/src/components/Plan.tsx index 42fddcc..d289d3a 100644 --- a/src/components/Plan.tsx +++ b/src/components/Plan.tsx @@ -21,7 +21,7 @@ class InternalPlan extends React.Component +
Congratulations! Here's your
@@ -30,7 +30,7 @@ class InternalPlan extends React.Component
-
+
{ALL_QUESTION_IDS.map( (questionId: QuestionId) => { const answer = this.props.answers.find(qa => qa.questionId === questionId); From 577ce27b18ca0d2d634bc2f3871304997117268e Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:08:57 -0700 Subject: [PATCH 07/20] Adjust sizing and margins for 'Civic Duty' etc. --- src/components/ReasonToVote.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ReasonToVote.css b/src/components/ReasonToVote.css index 611ea39..73db70b 100644 --- a/src/components/ReasonToVote.css +++ b/src/components/ReasonToVote.css @@ -1,7 +1,8 @@ .reason-to-vote-text { - font-size: 150px; + font-size: 120px; font-family: "Pacifico"; color: #1c2856; - text-shadow: 5px 5px #e81c38; + text-shadow: 4px 4px #e81c38; padding-bottom: 10px; + margin-bottom: 30px; } \ No newline at end of file From 282cd38bddd30199a40e689bb0fb8cb9041f6201 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:11:25 -0700 Subject: [PATCH 08/20] Adjust styling for 'Remember your reason for voting' --- src/components/ReasonToVote.css | 17 +++++++++++------ src/components/ReasonToVote.tsx | 2 +- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/ReasonToVote.css b/src/components/ReasonToVote.css index 73db70b..d520967 100644 --- a/src/components/ReasonToVote.css +++ b/src/components/ReasonToVote.css @@ -1,8 +1,13 @@ +.reason-to-vote-header { + font-size: 36px; + margin-top: 48px; +} + .reason-to-vote-text { - font-size: 120px; - font-family: "Pacifico"; - color: #1c2856; - text-shadow: 4px 4px #e81c38; - padding-bottom: 10px; - margin-bottom: 30px; + font-size: 120px; + font-family: "Pacifico"; + color: #1c2856; + text-shadow: 4px 4px #e81c38; + padding-bottom: 10px; + margin-bottom: 30px; } \ No newline at end of file diff --git a/src/components/ReasonToVote.tsx b/src/components/ReasonToVote.tsx index f893b96..cda1889 100644 --- a/src/components/ReasonToVote.tsx +++ b/src/components/ReasonToVote.tsx @@ -17,7 +17,7 @@ export class ReasonToVote extends React.Component { return (
-
{header}
+
{header}
{reasonText}
{bodyText}
From d5d3a9afb9d99591c19a7afa28c2bf83c8d78b66 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:33:41 -0700 Subject: [PATCH 09/20] Style the Plan page for mobile --- src/components/Plan.css | 1 + src/components/PlanStep.css | 18 +++++++++++++++++- src/components/ReasonToVote.css | 7 +++++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/Plan.css b/src/components/Plan.css index e72532c..66fbda7 100644 --- a/src/components/Plan.css +++ b/src/components/Plan.css @@ -11,4 +11,5 @@ max-width: 800px; margin-left: auto; margin-right: auto; + padding: 20px; } \ No newline at end of file diff --git a/src/components/PlanStep.css b/src/components/PlanStep.css index 43bdf23..50a5195 100644 --- a/src/components/PlanStep.css +++ b/src/components/PlanStep.css @@ -3,16 +3,32 @@ font-size: 48px; margin-top: 48px; margin-bottom: -10px; + color: #1c2856; + line-height: 110%; } .plan-step-text { + font-size: 18px; margin-top: 18px; margin-bottom: 18px; - font-size: 18px; + line-height: 120%; } .plan-step-call-to-action { text-transform: uppercase; font-size: 22px; margin-bottom: 40px; +} + +@media only screen and (max-width: 840px) { + .plan-step-header { + margin-top: 26px; + font-size: 26px; + } + + .plan-step-text { + font-size: 14px; + margin-top: 14px; + margin-bottom: 14px; + } } \ No newline at end of file diff --git a/src/components/ReasonToVote.css b/src/components/ReasonToVote.css index d520967..51fe055 100644 --- a/src/components/ReasonToVote.css +++ b/src/components/ReasonToVote.css @@ -10,4 +10,11 @@ text-shadow: 4px 4px #e81c38; padding-bottom: 10px; margin-bottom: 30px; +} + +@media only screen and (max-width: 840px) { + .reason-to-vote-text { + font-size: 72px; + text-shadow: 1.5px 1.5px #e81c38; + } } \ No newline at end of file From 0c59dd68a898321d7716f428dbe55a00c1028d29 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:42:01 -0700 Subject: [PATCH 10/20] Use a red color for the call-to-action links --- src/components/PlanStep.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/PlanStep.css b/src/components/PlanStep.css index 50a5195..52584c5 100644 --- a/src/components/PlanStep.css +++ b/src/components/PlanStep.css @@ -20,6 +20,10 @@ margin-bottom: 40px; } +.plan-step-call-to-action a:link, .plan-step-call-to-action a:visited { + color: #cc1a3b; +} + @media only screen and (max-width: 840px) { .plan-step-header { margin-top: 26px; From 9f524c2895e9cde77de925837def188554657c0a Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:43:06 -0700 Subject: [PATCH 11/20] Tweak line-height in the plan-step text --- src/components/PlanStep.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PlanStep.css b/src/components/PlanStep.css index 52584c5..6d5af6c 100644 --- a/src/components/PlanStep.css +++ b/src/components/PlanStep.css @@ -11,7 +11,6 @@ font-size: 18px; margin-top: 18px; margin-bottom: 18px; - line-height: 120%; } .plan-step-call-to-action { @@ -32,6 +31,7 @@ .plan-step-text { font-size: 14px; + line-height: 120%; margin-top: 14px; margin-bottom: 14px; } From 0e0bbefc6af47da809137acdb5737b1cfd6fb58c Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:51:23 -0700 Subject: [PATCH 12/20] Tweak more margins on the Plan page --- src/components/ReasonToVote.css | 11 +++++++++++ src/components/ReasonToVote.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/ReasonToVote.css b/src/components/ReasonToVote.css index 51fe055..680263c 100644 --- a/src/components/ReasonToVote.css +++ b/src/components/ReasonToVote.css @@ -12,9 +12,20 @@ margin-bottom: 30px; } +.reason-to-vote-plan-step-text { + /* Since the ReasonToVote component doesn't have a call-to-action link, we need to add more space underneath it */ + margin-bottom: 50px; +} + @media only screen and (max-width: 840px) { + .reason-to-vote-header { + font-size: 22px; + margin-top: 30px; + } + .reason-to-vote-text { font-size: 72px; text-shadow: 1.5px 1.5px #e81c38; + margin-bottom: 10px; } } \ No newline at end of file diff --git a/src/components/ReasonToVote.tsx b/src/components/ReasonToVote.tsx index cda1889..6f8da4e 100644 --- a/src/components/ReasonToVote.tsx +++ b/src/components/ReasonToVote.tsx @@ -19,7 +19,7 @@ export class ReasonToVote extends React.Component {
{header}
{reasonText}
-
{bodyText}
+
{bodyText}
); } From 5e53cf7be45c5a0fc1d2a69db495cf7ea609ddc0 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 10:58:27 -0700 Subject: [PATCH 13/20] Tweak 'Civic Duty' line-height --- src/components/ReasonToVote.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ReasonToVote.css b/src/components/ReasonToVote.css index 680263c..f6a5c16 100644 --- a/src/components/ReasonToVote.css +++ b/src/components/ReasonToVote.css @@ -9,7 +9,9 @@ color: #1c2856; text-shadow: 4px 4px #e81c38; padding-bottom: 10px; - margin-bottom: 30px; + margin-top: 20px; + margin-bottom: 50px; + line-height: 110%; } .reason-to-vote-plan-step-text { @@ -26,6 +28,7 @@ .reason-to-vote-text { font-size: 72px; text-shadow: 1.5px 1.5px #e81c38; - margin-bottom: 10px; + margin-top: 10px; + margin-bottom: 25px; } } \ No newline at end of file From 316f9b1f8a8e2e23d65402cc89553ed545318369 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 11:02:31 -0700 Subject: [PATCH 14/20] Tweak plan-page margins on mobile --- src/components/PlanStep.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/PlanStep.css b/src/components/PlanStep.css index 6d5af6c..1a81382 100644 --- a/src/components/PlanStep.css +++ b/src/components/PlanStep.css @@ -30,9 +30,9 @@ } .plan-step-text { - font-size: 14px; + font-size: 16px; line-height: 120%; - margin-top: 14px; - margin-bottom: 14px; + margin-top: 22px; + margin-bottom: 12px; } } \ No newline at end of file From 7fc5ae902d4db7744b83da1e7906ee4e116913c9 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 11:10:39 -0700 Subject: [PATCH 15/20] Bump down the size of 'Congratulations' string on the plan-page header on mobile --- src/components/Plan.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/Plan.css b/src/components/Plan.css index 66fbda7..1896e8e 100644 --- a/src/components/Plan.css +++ b/src/components/Plan.css @@ -12,4 +12,10 @@ margin-left: auto; margin-right: auto; padding: 20px; +} + +@media only screen and (max-width: 840px) { + .plan-congrats { + font-size: 20px; + } } \ No newline at end of file From 37d75905da269b7f018ee3fd211c2fcfd9d3f76c Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 11:14:40 -0700 Subject: [PATCH 16/20] Tweak font-size of the 'VotePlan' title on mobile --- src/App.css | 2 +- src/components/Plan.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index 469efae..ecab42f 100644 --- a/src/App.css +++ b/src/App.css @@ -74,7 +74,7 @@ @media only screen and (max-width: 840px) { .voteplan-title { - font-size: 68px; + font-size: 80px; } } diff --git a/src/components/Plan.css b/src/components/Plan.css index 1896e8e..68d3850 100644 --- a/src/components/Plan.css +++ b/src/components/Plan.css @@ -16,6 +16,6 @@ @media only screen and (max-width: 840px) { .plan-congrats { - font-size: 20px; + font-size: 22px; } } \ No newline at end of file From 7a6b346a6286581e54044d109e0834873d751b33 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 12:49:40 -0700 Subject: [PATCH 17/20] Add an emoji to the Plan page --- src/components/Plan.tsx | 4 + src/components/PlanEmotion.css | 3 + src/components/PlanEmotion.tsx | 64 ++++ src/components/PlanStep.tsx | 13 +- src/components/ReasonToVote.tsx | 4 +- src/components/emoji_angry.svg | 302 ++++++++++++++++++ src/components/emoji_concerned.svg | 302 ++++++++++++++++++ src/components/emoji_excited.svg | 300 +++++++++++++++++ src/components/emoji_meh.svg | 302 ++++++++++++++++++ src/components/emoji_shocked.svg | 302 ++++++++++++++++++ src/components/renderPlanStepCallToAction.tsx | 11 + src/strings.ts | 28 ++ 12 files changed, 1622 insertions(+), 13 deletions(-) create mode 100644 src/components/PlanEmotion.css create mode 100644 src/components/PlanEmotion.tsx create mode 100644 src/components/emoji_angry.svg create mode 100644 src/components/emoji_concerned.svg create mode 100644 src/components/emoji_excited.svg create mode 100644 src/components/emoji_meh.svg create mode 100644 src/components/emoji_shocked.svg create mode 100644 src/components/renderPlanStepCallToAction.tsx diff --git a/src/components/Plan.tsx b/src/components/Plan.tsx index d289d3a..ad2def2 100644 --- a/src/components/Plan.tsx +++ b/src/components/Plan.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { connect} from 'react-redux'; +import { PlanEmotion } from './PlanEmotion'; import { PlanStep } from './PlanStep'; import { ReasonToVote } from './ReasonToVote'; import { StartOverButton } from './StartOverButton'; @@ -44,6 +45,9 @@ class InternalPlan extends React.Component } + else if (questionId === QuestionId.Emotion) { + return + } else { return } diff --git a/src/components/PlanEmotion.css b/src/components/PlanEmotion.css new file mode 100644 index 0000000..c8fb2d3 --- /dev/null +++ b/src/components/PlanEmotion.css @@ -0,0 +1,3 @@ +.plan-page-emoji-img img { + width: 100px; +} \ No newline at end of file diff --git a/src/components/PlanEmotion.tsx b/src/components/PlanEmotion.tsx new file mode 100644 index 0000000..90f20ae --- /dev/null +++ b/src/components/PlanEmotion.tsx @@ -0,0 +1,64 @@ +import * as React from 'react'; +import { PlanStepId, VotingStateId } from '../store'; +import { getEmojiAltText, getPlanStepStrings } from '../strings'; +import { renderPlanStepCallToAction } from './renderPlanStepCallToAction'; + +import emoji_angry from './emoji_angry.svg'; +import emoji_concerned from './emoji_concerned.svg'; +import emoji_excited from './emoji_excited.svg'; +import emoji_meh from './emoji_meh.svg'; +import emoji_shocked from './emoji_shocked.svg'; + +import './PlanEmotion.css'; +import './PlanStep.css'; +import './ReasonToVote.css'; + +interface IPlanEmotionProps { + planStepId: PlanStepId, + votingStateId: VotingStateId, +} + +export class PlanEmotion extends React.Component { + public render() { + const { planStepId, votingStateId } = this.props; + + const { header, text, callToAction, link } = getPlanStepStrings(planStepId, votingStateId); + + return ( +
+
{ this.getSvg(planStepId) }
+ +
{header}
+
{text}
+ + { renderPlanStepCallToAction(callToAction, link) } +
+ ); + } + + public getSvg(planStepId: PlanStepId): JSX.Element { + const className = "plan-page-emoji-img"; + const altText = getEmojiAltText(planStepId); + + switch (planStepId) { + case PlanStepId.Excited: { + // TODO: I bet we can just return the SVG src as a string? + return {altText}; + } + case PlanStepId.Concerned: { + return {altText}; + } + case PlanStepId.Shocked: { + return {altText}; + } + case PlanStepId.Angry: { + return {altText}; + } + case PlanStepId.Meh: { + return {altText}; + } + default: + throw new Error("Unhandled PlanStepId"); + } + } +} \ No newline at end of file diff --git a/src/components/PlanStep.tsx b/src/components/PlanStep.tsx index 8fe0bd7..7615e9c 100644 --- a/src/components/PlanStep.tsx +++ b/src/components/PlanStep.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { IIndexHolder } from './Plan'; import { PlanStepId, VotingStateId } from '../store'; import { getPlanStepStrings, planStepHeaderFormattedString } from '../strings'; +import { renderPlanStepCallToAction } from './renderPlanStepCallToAction'; import './PlanStep.css'; @@ -27,18 +28,8 @@ export class PlanStep extends React.Component {
{fullHeaderString}
{text}
- { this.renderCallToAction(callToAction, link) } + { renderPlanStepCallToAction(callToAction, link) }
); } - - private renderCallToAction(callToAction: string | undefined, link: string | undefined): JSX.Element { - if (callToAction !== undefined && link !== undefined) { - // TODO: Link should open in a new tab. - return - } - else { - return - } - } } \ No newline at end of file diff --git a/src/components/ReasonToVote.tsx b/src/components/ReasonToVote.tsx index 6f8da4e..fad8676 100644 --- a/src/components/ReasonToVote.tsx +++ b/src/components/ReasonToVote.tsx @@ -5,11 +5,11 @@ import { getReasonToVoteStrings } from '../strings'; import './PlanStep.css'; import './ReasonToVote.css'; -interface IPlanStepProps { +interface IReasonToVoteProps { planStepId: PlanStepId, } -export class ReasonToVote extends React.Component { +export class ReasonToVote extends React.Component { public render() { const { planStepId } = this.props; diff --git a/src/components/emoji_angry.svg b/src/components/emoji_angry.svg new file mode 100644 index 0000000..13cc444 --- /dev/null +++ b/src/components/emoji_angry.svg @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/emoji_concerned.svg b/src/components/emoji_concerned.svg new file mode 100644 index 0000000..a623e32 --- /dev/null +++ b/src/components/emoji_concerned.svg @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/emoji_excited.svg b/src/components/emoji_excited.svg new file mode 100644 index 0000000..60cc8bc --- /dev/null +++ b/src/components/emoji_excited.svg @@ -0,0 +1,300 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/emoji_meh.svg b/src/components/emoji_meh.svg new file mode 100644 index 0000000..2ef26ad --- /dev/null +++ b/src/components/emoji_meh.svg @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/emoji_shocked.svg b/src/components/emoji_shocked.svg new file mode 100644 index 0000000..fbc087c --- /dev/null +++ b/src/components/emoji_shocked.svg @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/renderPlanStepCallToAction.tsx b/src/components/renderPlanStepCallToAction.tsx new file mode 100644 index 0000000..5f39751 --- /dev/null +++ b/src/components/renderPlanStepCallToAction.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +export function renderPlanStepCallToAction(callToAction: string | undefined, link: string | undefined): JSX.Element { + if (callToAction !== undefined && link !== undefined) { + // TODO: Link should open in a new tab. + return + } + else { + return + } +} \ No newline at end of file diff --git a/src/strings.ts b/src/strings.ts index c201ad3..4ed9d79 100644 --- a/src/strings.ts +++ b/src/strings.ts @@ -577,6 +577,34 @@ export function getReasonToVoteStrings(planStepId: PlanStepId): IReasonToVoteStr } } + default: { + throw new Error("Unhandled PlanStepId"); + } + } +} + +export interface IPlanEmotionStrings { + header: string, + text: string, +} + +export function getEmojiAltText(planStepId: PlanStepId): string { + switch (planStepId) { + case PlanStepId.Excited: { + return "Excited emoji"; + } + case PlanStepId.Concerned: { + return "Concerned emoji"; + } + case PlanStepId.Shocked: { + return "Shocked emoji"; + } + case PlanStepId.Angry: { + return "Angry emoji"; + } + case PlanStepId.Meh: { + return "Meh emoji"; + } default: { throw new Error("Unhandled PlanStepId"); } From 402dd111f4c43e5e2fc9909b87992705df110c59 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 12:54:29 -0700 Subject: [PATCH 18/20] Style the plan-page emoji for mobile --- src/components/PlanEmotion.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/PlanEmotion.css b/src/components/PlanEmotion.css index c8fb2d3..1ad41a2 100644 --- a/src/components/PlanEmotion.css +++ b/src/components/PlanEmotion.css @@ -1,3 +1,11 @@ -.plan-page-emoji-img img { - width: 100px; +.plan-page-emoji-img { + width: 216px; + height: 216px; +} + +@media only screen and (max-width: 840px) { + .plan-page-emoji-img { + width: 180px; + height: 180px; + } } \ No newline at end of file From cec7ee73dada578ce064d68b59731fa02bc88f2d Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 16:10:26 -0700 Subject: [PATCH 19/20] Issue #52: Call-to-action links should open in separate browser tabs --- src/components/renderPlanStepCallToAction.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/renderPlanStepCallToAction.tsx b/src/components/renderPlanStepCallToAction.tsx index 5f39751..d4ae78c 100644 --- a/src/components/renderPlanStepCallToAction.tsx +++ b/src/components/renderPlanStepCallToAction.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; export function renderPlanStepCallToAction(callToAction: string | undefined, link: string | undefined): JSX.Element { if (callToAction !== undefined && link !== undefined) { // TODO: Link should open in a new tab. - return + return } else { return From 34303edcce607ebdcf0168297731f79d8e0bb557 Mon Sep 17 00:00:00 2001 From: Andy Brauninger <43097655+abrauninger@users.noreply.github.com> Date: Wed, 10 Oct 2018 16:14:24 -0700 Subject: [PATCH 20/20] Remove a resolved TODO --- src/components/renderPlanStepCallToAction.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/renderPlanStepCallToAction.tsx b/src/components/renderPlanStepCallToAction.tsx index d4ae78c..2fe1244 100644 --- a/src/components/renderPlanStepCallToAction.tsx +++ b/src/components/renderPlanStepCallToAction.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; export function renderPlanStepCallToAction(callToAction: string | undefined, link: string | undefined): JSX.Element { if (callToAction !== undefined && link !== undefined) { - // TODO: Link should open in a new tab. return } else {