From 743ccb04287ab334eb3589842f04a8fda812baa3 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Tue, 28 Sep 2021 16:41:30 -0700
Subject: [PATCH] start to swap out nav

---
 src/_colors.scss                              |  3 ++
 .../2020/index/annual-report.jsx              | 42 ++++++++-----------
 .../2020/index/annual-report.scss             |  4 +-
 src/views/annual-report/2020/index/l10n.json  | 28 +++----------
 4 files changed, 27 insertions(+), 50 deletions(-)

diff --git a/src/_colors.scss b/src/_colors.scss
index 495c84469..44d3bf707 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -66,3 +66,6 @@ $link-blue: $ui-blue;
 /* Down Deep */
 $dd-darkblue: hsla(195, 72.4, 17.1, 1);
 $dd-medium-blue: hsla(195, 72.4, 42, .65);
+
+/* Annual Report Colors */
+$ui-teal: #297EA4;
diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx
index c5793f244..9f8726c61 100644
--- a/src/views/annual-report/2020/index/annual-report.jsx
+++ b/src/views/annual-report/2020/index/annual-report.jsx
@@ -25,26 +25,26 @@ const Supporters = require('./supporters.json');
 
 require('./annual-report.scss');
 
+// Founder’s Message / Mission / Reach / Themes / Director’s Message / Supporters / Team / Donate
+
 // Some constants used for the page subnav and section refs
 const SECTIONS = {
-    message: 'message',
+    founders_message: 'founders-message',
     mission: 'mission',
     reach: 'reach',
-    milestones: 'milestones',
-    initiatives: 'initiatives',
-    financials: 'financials',
+    themes: 'themes',
+    directors_message: 'directors_message',
     supporters: 'supporters',
     team: 'team',
     donate: 'donate'
 };
 
 const SECTION_NAMES = {
-    message: <FormattedMessage id="annualReport.subnavMessage" />,
+    founders_message: <FormattedMessage id="annualReport.subnavFoundersMessage" />,
     mission: <FormattedMessage id="annualReport.subnavMission" />,
     reach: <FormattedMessage id="annualReport.subnavReach" />,
-    milestones: <FormattedMessage id="annualReport.subnavMilestones" />,
-    initiatives: <FormattedMessage id="annualReport.subnavInitiatives" />,
-    financials: <FormattedMessage id="annualReport.subnavFinancials" />,
+    themes: <FormattedMessage id="annualReport.subnavThemes" />,
+    directors_message: <FormattedMessage id="annualReport.subnavDirectors_message" />,
     supporters: <FormattedMessage id="annualReport.subnavSupporters" />,
     team: <FormattedMessage id="annualReport.subnavTeam" />,
     donate: <FormattedMessage id="annualReport.subnavDonate" />
@@ -195,11 +195,11 @@ class AnnualReport extends React.Component {
             (<FlexRow className="inner">
                 <a
                     className={classNames(
-                        {selectedItem: this.state.currentlyVisible === SECTIONS.message}
+                        {selectedItem: this.state.currentlyVisible === SECTIONS.founders_message}
                     )}
-                    onClick={this.handleSubnavItemClick(SECTIONS.message)}
+                    onClick={this.handleSubnavItemClick(SECTIONS.founders_message)}
                 >
-                    {SECTION_NAMES.message}
+                    {SECTION_NAMES.founders_message}
                 </a>
                 <a
                     className={classNames(
@@ -209,14 +209,6 @@ class AnnualReport extends React.Component {
                 >
                     <FormattedMessage id="annualReport.subnavMission" />
                 </a>
-                <a
-                    className={classNames(
-                        {selectedItem: this.state.currentlyVisible === SECTIONS.milestones}
-                    )}
-                    onClick={this.handleSubnavItemClick(SECTIONS.milestones)}
-                >
-                    <FormattedMessage id="annualReport.subnavMilestones" />
-                </a>
                 <a
                     className={classNames(
                         {selectedItem: this.state.currentlyVisible === SECTIONS.reach}
@@ -227,19 +219,19 @@ class AnnualReport extends React.Component {
                 </a>
                 <a
                     className={classNames(
-                        {selectedItem: this.state.currentlyVisible === SECTIONS.initiatives}
+                        {selectedItem: this.state.currentlyVisible === SECTIONS.themes}
                     )}
-                    onClick={this.handleSubnavItemClick(SECTIONS.initiatives)}
+                    onClick={this.handleSubnavItemClick(SECTIONS.themes)}
                 >
-                    <FormattedMessage id="annualReport.subnavInitiatives" />
+                    <FormattedMessage id="annualReport.subnavThemes" />
                 </a>
                 <a
                     className={classNames(
-                        {selectedItem: this.state.currentlyVisible === SECTIONS.financials}
+                        {selectedItem: this.state.currentlyVisible === SECTIONS.directors_message}
                     )}
-                    onClick={this.handleSubnavItemClick(SECTIONS.financials)}
+                    onClick={this.handleSubnavItemClick(SECTIONS.directors_message)}
                 >
-                    <FormattedMessage id="annualReport.subnavFinancials" />
+                    <FormattedMessage id="annualReport.subnavDirectorsMessage" />
                 </a>
                 <a
                     className={classNames(
diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss
index 9c7bd329b..2c5b9579c 100644
--- a/src/views/annual-report/2020/index/annual-report.scss
+++ b/src/views/annual-report/2020/index/annual-report.scss
@@ -68,7 +68,7 @@ p {
 }
 
 .message-section {
-    background-color: $ui-blue;
+    background-color: $ui-teal;
 
     h1, h2, p {
         color: $ui-white;
@@ -2600,7 +2600,7 @@ p {
     top: 50px;
     z-index: 9;
     box-shadow: 0 0 3px $box-shadow-gray;
-    background-color: $ui-blue-dark;
+    background-color: $ui-teal;
     padding: 0;
     width: 100%;
     height: 58px;
diff --git a/src/views/annual-report/2020/index/l10n.json b/src/views/annual-report/2020/index/l10n.json
index 0a45d2027..34a6a89ff 100644
--- a/src/views/annual-report/2020/index/l10n.json
+++ b/src/views/annual-report/2020/index/l10n.json
@@ -1,16 +1,15 @@
 {
-    "annualReport.subnavMessage": "Message",
+    "annualReport.subnavFoundersMessage": "Founder's Message",
     "annualReport.subnavMission": "Mission",
-    "annualReport.subnavMilestones": "Milestones",
     "annualReport.subnavReach": "Reach",
-    "annualReport.subnavInitiatives": "Initiatives",
-    "annualReport.subnavFinancials": "Financials",
+    "annualReport.subnavThemes": "Themes",
+    "annualReport.subnavDirectorsMessage": "Director's Message",
     "annualReport.subnavSupporters": "Supporters",
     "annualReport.subnavTeam": "Team",
     "annualReport.subnavDonate": "Donate",
 
-    "annualReport.mastheadYear": "2019 Annual Report",
-    "annualReport.mastheadTitle": "Cultivating a World of Creative Learning",
+    "annualReport.mastheadYear": "2020 Annual Report",
+    "annualReport.mastheadTitle": "Adapting to a Changing World",
     "annualReport.messageTitle": "Message from the Scratch Team",
     "annualReport.messageP1": "2019 was a year of great progress for Scratch. We started the year with the launch of Scratch 3.0, our newest generation of Scratch, designed to spark children’s creativity and engage children with diverse interests and backgrounds. We celebrated the end of the year with our team moving from MIT into its new home at the Scratch Foundation, in a playful first-floor space near South Station in Boston. Throughout the year, the Scratch community continued to thrive and grow: More than 20 million young people created projects with Scratch in 2019, an increase of 48% over the year before.",
     "annualReport.messageP2": "The impact and importance of Scratch have been highlighted in 2020 as the COVID pandemic forced schools to close. Activity in the Scratch online community more than doubled as young people, confined to their homes, turned to Scratch to express themselves creatively and connect with one another. Scratchers have also been actively engaged in Black Lives Matter and other movements for racial justice and equity, creating animated projects and studios to spread awareness and demand change.",
@@ -41,23 +40,6 @@
     "annualReport.missionPassionDescription": "Enable children to build on their interests and work on personally meaningful projects",
     "annualReport.missionPlayDescription": "Encourage children to tinker, experiment, and iterate",
 
-    "annualReport.milestonesTitle": "Milestones",
-    "annualReport.milestonesDescription": "Here are some key events and accomplishments in the history of Scratch and the global Scratch community.",
-    "annualReport.milestones2003Message": "Awarded a National Science Foundation grant to start development of Scratch",
-    "annualReport.milestones2004Message": "Offered first Scratch workshop at Computer Clubhouse Teen Summit",
-    "annualReport.milestones2007Message": "Public launch of Scratch programming language and online community",
-    "annualReport.milestones2008Message": "Organized first Scratch Conference for educators and developers",
-    "annualReport.milestones2009Message1.4": "Released Scratch 1.4, translated into more than 40 languages",
-    "annualReport.milestones2009MessageScratchDay": "Hosted first Scratch Day event for children and families",
-    "annualReport.milestones2010Message": "Scratch online community reaches 1 million members",
-    "annualReport.milestones2013MessageFoundation": "Established Code-to-Learn Foundation (later renamed Scratch Foundation)",
-    "annualReport.milestones2013MessageScratch2": "Launch of Scratch 2.0, providing new opportunities for collaboration",
-    "annualReport.milestones2014Message": "Launch of ScratchJr for younger children, ages 5 to 7",
-    "annualReport.milestones2016Message": "Scratch online community reaches 10 million members",
-    "annualReport.milestones2017Message": "Scratch Day grows to 1,100 events in 60 countries",
-    "annualReport.milestones2019MessageScratch3": "Launch of Scratch 3.0, expanding what kids can create with code",
-    "annualReport.milestones2019MessageMove": "Scratch Team moves from MIT into Scratch Foundation",
-
     "annualReport.reachTitle": "Reaching Children Around the World",
     "annualReport.reachSubtitle": "Scratch is the world’s largest coding community for children and teens, ages 8 and up.",
     "annualReport.reachMillion": "million",