more content changes

src/views/annual-report/2020/index/annual-report.jsx

@@ -514,6 +514,9 @@ class AnnualReport extends React.Component {
                                         <h4>
                                             <FormattedMessage id="annualReport.reachNewUsers" />
                                         </h4>
+                                        <div className="increase-bubble">
+                                            <FormattedMessage id="annualReport.reachNewUsersIncrease" />
+                                        </div>
                                     </div>
                                     <div className="reach-datapoint">
                                         <FormattedMessage
@@ -529,6 +532,9 @@ class AnnualReport extends React.Component {
                                         <h4>
                                             <FormattedMessage id="annualReport.reachProjectsCreated" />
                                         </h4>
+                                        <div className="increase-bubble">
+                                            <FormattedMessage id="annualReport.reachProjectsCreatedIncrease" />
+                                        </div>
                                     </div>
                                     <div className="reach-datapoint">
                                         <FormattedMessage
@@ -544,6 +550,9 @@ class AnnualReport extends React.Component {
                                         <h4>
                                             <FormattedMessage id="annualReport.reachProjectCreators" />
                                         </h4>
+                                        <div className="increase-bubble">
+                                            <FormattedMessage id="annualReport.reachProjectCreatorsIncrease" />
+                                        </div>
                                     </div>
                                     <div className="reach-datapoint">
                                         <FormattedMessage
@@ -552,19 +561,11 @@ class AnnualReport extends React.Component {
                                         <h4>
                                             <FormattedMessage id="annualReport.reachComments" />
                                         </h4>
+                                        <div className="increase-bubble">
+                                            <FormattedMessage id="annualReport.reachIncreaseInCommentsIncrease" />
                                         </div>
                                     </div>
                                 </div>
-                            <div className="reach-growth">
-                                <div className="growth-blurb">
-                                    <h3>
-                                        <FormattedMessage id="annualReport.reachGrowthTitle" />
-                                    </h3>
-                                    <p>
-                                        <FormattedMessage id="annualReport.reachGrowthBlurb" />
-                                    </p>
-                                </div>
-                                <img src="/images/annual-report/reach/community-growth-graph.svg" />
                             </div>
                         </div>
                         <div className="map-inner">
@@ -635,6 +636,9 @@ class AnnualReport extends React.Component {
                                     <h3>
                                         <FormattedMessage id="annualReport.reachTranslationTitle" />
                                     </h3>
+                                    <div>
+                                        <FormattedMessage id="annualReport.reachTranslationIncrease" />
+                                    </div>
                                     <p>
                                         <FormattedMessage id="annualReport.reachTranslationBlurb" />
                                     </p>
@@ -658,7 +662,7 @@ class AnnualReport extends React.Component {
                             </div>
                             <div className="reach-datapoint">
                                 <FormattedMessage
-                                    id="annualReport.reach22million"
+                                    id="annualReport.reachDownloadsMillion"
                                     values={{
                                         million: (
                                             <div className="million">
@@ -670,6 +674,9 @@ class AnnualReport extends React.Component {
                                 <h4>
                                     <FormattedMessage id="annualReport.reachDownloads" />
                                 </h4>
+                                <div className="increase-bubble">
+                                    <FormattedMessage id="annualReport.reachDownloadsIncrease" />
+                                </div>
                             </div>
                         </div>
                         <MediaQuery minWidth={frameless.mobile}>
@@ -680,15 +687,15 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="initiatives-section"
-                        ref={this.setRef(SECTIONS.initiatives)}
+                        ref={this.setRef(SECTIONS.themes)}
                     >
                         <div className="initiatives-intro">
                             <div className="inner">
                                 <h2>
-                                    <FormattedMessage id="annualReport.initiativesTitle" />
+                                    <FormattedMessage id="annualReport.themesTitle" />
                                 </h2>
                                 <p>
-                                    <FormattedMessage id="annualReport.initiativesDescription" />
+                                    <FormattedMessage id="annualReport.themesDescription" />
                                 </p>
                                 <div className="initiatives-pillars">
                                     <div className="three-pillars">

src/views/annual-report/2020/index/annual-report.scss

@@ -605,7 +605,7 @@ p {
         align-items: center;
     }
 
-    background-color: $ui-aqua;
+    background-color: $ui-teal;
     color: $ui-white;
 
     h2, h3, h4, p {
@@ -613,7 +613,7 @@ p {
     }
 
     .reach-intro {
-        max-width: 620px;
+        max-width: 900px;
         text-align: center;
 
         p {
@@ -656,6 +656,15 @@ p {
         }
     }
 
+    .increase-bubble {
+        background-color: darken($ui-teal, 10%);
+        border-radius: 50px;
+        padding: 10px;
+        font-size: 14px;
+        margin: 15px auto;
+        max-width: 170px;
+    }
+
     .map-inner {
         max-width: 940px;
         margin: 0 auto;
@@ -771,7 +780,7 @@ p {
 .reach-datapoint {
     font-size: 5rem;
     font-weight: bold;
-    width: 220px;
+    width: 286px;
     text-align: center;
     margin: 32px 0;
 
@@ -822,7 +831,7 @@ p {
 }
 
 .reach-scratch-jr {
-    background-color: #0EA57A;
+    background-color: darken($ui-teal, 10%);
     color: $ui-white;
     padding: 100px 0;
 
@@ -845,6 +854,15 @@ p {
         }
     }
 
+    .increase-bubble {
+        background-color: darken($ui-teal, 15%);
+        border-radius: 50px;
+        padding: 10px;
+        font-size: 14px;
+        margin: 15px auto;
+        max-width: 170px;
+    }
+
     @media #{$intermediate-and-smaller} {
         .inner {
             max-width: 620px;

src/views/annual-report/2020/index/l10n.json

@@ -40,27 +40,31 @@
     "annualReport.reachSubtitle": "Scratch is the world’s largest coding community for children and teens, ages 8 and up.",
     "annualReport.reachMillion": "million",
     "annualReport.reachNewUsersNumber": "15 {million}",
+    "annualReport.reachNewUsersIncrease": "3.8% from 2019",
     "annualReport.reachProjectsCreatedNumber": "80 {million}",
+    "annualReport.reachProjectsCreatedIncrease": "37% from 2019",
     "annualReport.reachProjectCreatorsNumber": "29 {million}",
-    "annualReport.reachIncreaseInCommentsNumber": "217 %",
+    "annualReport.reachProjectCreatorsIncrease": "44% from 2019",
+    "annualReport.reachIncreaseInCommentsNumber": "217%",
+    "annualReport.reachIncreaseInCommentsIncrease": "48 {million} > 50 {million}",
     "annualReport.reachNewUsers": "New Users",
     "annualReport.reachProjectsCreated": "Projects Created",
     "annualReport.reachProjectCreators": "People Creating Projects",
     "annualReport.reachComments": "increase in comments made since 2019",
-    "annualReport.reachGrowthTitle": "Community Growth",
-    "annualReport.reachGrowthBlurb": "New accounts created in the Scratch Online Community within the last 5 years.",
     "annualReport.reachGlobalCommunity": "Our Global Community",
     "annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through 2019",
     "annualReport.reachMap20M": "20M",
     "annualReport.reachMapLog": "on a logarithmic scale",
-    "annualReport.reachTranslationTitle": "Scratch is Translated into 60+ Languages",
+    "annualReport.reachTranslationTitle": "Scratch is Translated into 7x Languages",
+    "annualReport.reachTranslationIncrease": "x languages from 2019",
     "annualReport.reachTranslationBlurb": "Thanks to volunteer translators from around the world.",
     "annualReport.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",
-    "annualReport.reach22million": "22 {million}",
+    "annualReport.reachDownloadsMillion": "3 {million}",
-    "annualReport.reachDownloads": "Downloads Since Launching in 2014",
+    "annualReport.reachDownloads": "Downloads in 2020",
+    "annualReport.reachDownloadsIncrease": "x million from 2019",
 
-    "annualReport.initiativesTitle": "Initiatives",
+    "annualReport.themesTitle": "Emerging Themes",
-    "annualReport.initiativesDescription": "The work at the Scratch Foundation centers on three strategic areas: creative tools, community, and schools. Each area prioritizes the voice and needs of children who are underrepresented in creative computing and seeks to support children in diverse settings and cultures around the world.",
+    "annualReport.themesDescription": "As young people faced the unprecedented challenges of COVID-19, Scratch became a more important place than ever for them to connect, create, and express themselves. Throughout the year, our work was focused on three areas to best support our growing global community: connectivity, adaptation, and community. As always, our efforts were grounded in our commitment to equity and inclusion.",
     "annualReport.equity": "Equity",
     "annualReport.globalStrategy": "Global Strategy",