start to swap out nav

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;

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',
+    themes: 'themes',
-    initiatives: 'initiatives',
+    directors_message: 'directors_message',
-    financials: 'financials',
     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" />,
+    themes: <FormattedMessage id="annualReport.subnavThemes" />,
-    initiatives: <FormattedMessage id="annualReport.subnavInitiatives" />,
+    directors_message: <FormattedMessage id="annualReport.subnavDirectors_message" />,
-    financials: <FormattedMessage id="annualReport.subnavFinancials" />,
     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(

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;

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.subnavThemes": "Themes",
-    "annualReport.subnavFinancials": "Financials",
+    "annualReport.subnavDirectorsMessage": "Director's Message",
     "annualReport.subnavSupporters": "Supporters",
     "annualReport.subnavTeam": "Team",
     "annualReport.subnavDonate": "Donate",
 
-    "annualReport.mastheadYear": "2019 Annual Report",
+    "annualReport.mastheadYear": "2020 Annual Report",
-    "annualReport.mastheadTitle": "Cultivating a World of Creative Learning",
+    "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",