FI to master

.gitignore

@@ -20,4 +20,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.vscode
+.vscode

src/App.css

@@ -74,7 +74,7 @@
 
 @media only screen and (max-width: 840px) {
   .voteplan-title {
-    font-size: 68px;  
+    font-size: 80px;  
   }
 }
 

src/components/Plan.css

@@ -5,4 +5,17 @@
 
 .plan-congrats {
 	font-size: 28px;
+}
+
+.plan-page-body {
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 20px;
+}
+
+@media only screen and (max-width: 840px) {
+	.plan-congrats {
+		font-size: 22px;
+	}
 }

src/components/Plan.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Dispatch } from 'redux';
 import { connect} from 'react-redux';
+import { PlanEmotion } from './PlanEmotion';
 import { PlanStep } from './PlanStep';
+import { ReasonToVote } from './ReasonToVote';
 import { StartOverButton } from './StartOverButton';
-import { ALL_QUESTION_IDS, IConnectedReduxProps, IQuestionAndAnswer, QuestionId, recordPlanPage, VotingStateId } from '../store';
+import { ALL_QUESTION_IDS, IConnectedReduxProps, IQuestionAndAnswer, QuestionId, QUESTIONS, recordPlanPage, VotingStateId } from '../store';
 
 import './Plan.css';
 
@@ -29,7 +31,7 @@ class InternalPlan extends React.Component<IPlanProps & IPropsFromDispatch & ICo
 		const indexHolder = { index: 0 } as IIndexHolder;
 
 		return (
-			<div className="App">
+			<div>
 				<div className="Plan-header Gradient-background">
 					<div className="plan-congrats VotingVoices-serif">Congratulations! Here's your</div>
 
@@ -38,13 +40,30 @@ class InternalPlan extends React.Component<IPlanProps & IPropsFromDispatch & ICo
 					<StartOverButton {...this.props} />
 				</div>
 
-				<div>
+				<div className="App plan-page-body">
 					{ALL_QUESTION_IDS.map(
 						(questionId: QuestionId) => {
 							const answer = this.props.answers.find(qa => qa.questionId === questionId);
 
 							if (answer !== undefined) {
-								return <PlanStep indexHolder={indexHolder} questionId={questionId} answerId={answer!.answerId} votingStateId={this.props.votingStateId} />
+								const question = QUESTIONS.find(q => q.id === questionId);
+
+								const planStepId = question!.resultingPlanStep(answer!.answerId);
+
+								if (planStepId !== undefined) {
+									if (questionId === QuestionId.ReasonToVote) {
+										return <ReasonToVote planStepId={planStepId!} />
+									}
+									else if (questionId === QuestionId.Emotion) {
+										return <PlanEmotion planStepId={planStepId!} votingStateId={this.props.votingStateId} />
+									}
+									else {
+										return <PlanStep indexHolder={indexHolder} planStepId={planStepId!} votingStateId={this.props.votingStateId} />
+									}
+								}
+								else {
+									return <React.Fragment />
+								}
 							}
 							else {
 								return <React.Fragment />

src/components/PlanEmotion.css

@@ -0,0 +1,11 @@
+.plan-page-emoji-img {
+	width: 216px;
+	height: 216px;
+}
+
+@media only screen and (max-width: 840px) {
+	.plan-page-emoji-img {
+		width: 180px;
+		height: 180px;
+	}
+}

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<IPlanEmotionProps, any> {
+	public render() {
+		const { planStepId, votingStateId } = this.props;
+
+		const { header, text, callToAction, link } = getPlanStepStrings(planStepId, votingStateId);
+
+		return (
+			<div key={planStepId}>
+				<div>{ this.getSvg(planStepId) }</div>
+
+				<div className="plan-step-header VotingVoices-sans-serif">{header}</div>
+				<div className="plan-step-text VotingVoices-serif">{text}</div>
+
+				{ renderPlanStepCallToAction(callToAction, link) }
+			</div>
+		);
+	}
+
+	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 <img src={emoji_excited} alt={altText} className={className} />;
+			}
+			case PlanStepId.Concerned: {
+				return <img src={emoji_concerned} alt={altText} className={className} />;
+			}
+			case PlanStepId.Shocked: {
+				return <img src={emoji_shocked} alt={altText} className={className} />;
+			}
+			case PlanStepId.Angry: {
+				return <img src={emoji_angry} alt={altText} className={className} />;
+			}
+			case PlanStepId.Meh: {
+				return <img src={emoji_meh} alt={altText} className={className} />;
+			}
+			default:
+				throw new Error("Unhandled PlanStepId");
+		}
+	}
+}

src/components/PlanStep.css

@@ -3,16 +3,36 @@
 	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;
 }
 
 .plan-step-call-to-action {
 	text-transform: uppercase;
 	font-size: 22px;
 	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;
+		font-size: 26px;
+	}
+
+	.plan-step-text {
+		font-size: 16px;
+		line-height: 120%;
+		margin-top: 22px;
+		margin-bottom: 12px;
+	}
 }

src/components/PlanStep.tsx

@@ -1,54 +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 { renderPlanStepCallToAction } from './renderPlanStepCallToAction';
 
 import './PlanStep.css';
 
 interface IPlanStepProps {
 	indexHolder: IIndexHolder,
-	questionId: QuestionId,
-	answerId: AnswerId,
+	planStepId: PlanStepId,
 	votingStateId: VotingStateId,
 }
 
 export class PlanStep extends React.Component<IPlanStepProps, any> {
 	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 (
+			<div key={planStepId}>
+				<div className="plan-step-header VotingVoices-sans-serif">{fullHeaderString}</div>
+				<div className="plan-step-text VotingVoices-serif">{text}</div>
 
-			const fullHeaderString = planStepHeaderFormattedString(indexHolder.index, header);
-
-			// Increment the index holder so that the next plan step uses the next number.
-			indexHolder.index++;
-
-			return (
-				<div key={planStepId}>
-					<div className="plan-step-header VotingVoices-sans-serif">{fullHeaderString}</div>
-					<div className="plan-step-text VotingVoices-serif">{text}</div>
-
-					{ this.renderCallToAction(callToAction, link) }
-				</div>
-			);
-		}
-		else {
-			return <React.Fragment />
-		}
-	}
-
-	private renderCallToAction(callToAction: string | undefined, link: string | undefined): JSX.Element {
-		if (callToAction !== undefined && link !== undefined) {
-			// TODO: Link should open in a new tab.
-			return <div className="plan-step-call-to-action VotingVoices-sans-serif"><a href={link!}>{callToAction!}</a></div>
-		}
-		else {
-			return <React.Fragment />
-		}
+				{ renderPlanStepCallToAction(callToAction, link) }
+			</div>
+		);
 	}
 }

src/components/ReasonToVote.css

@@ -0,0 +1,34 @@
+.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-top: 20px;
+	margin-bottom: 50px;
+	line-height: 110%;
+}
+
+.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-top: 10px;
+		margin-bottom: 25px;
+	}
+}

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 IReasonToVoteProps {
+	planStepId: PlanStepId,
+}
+
+export class ReasonToVote extends React.Component<IReasonToVoteProps, any> {
+	public render() {
+		const { planStepId } = this.props;
+
+		const { header, reasonText, bodyText } = getReasonToVoteStrings(planStepId);
+
+		return (
+			<div key={planStepId}>
+				<div className="reason-to-vote-header VotingVoices-serif">{header}</div>
+				<div className="reason-to-vote-text">{reasonText}</div>
+				<div className="plan-step-text VotingVoices-serif reason-to-vote-plan-step-text">{bodyText}</div>
+			</div>
+		);
+	}
+}