From b3b3ab41262a2d85d2713212bf6de281f52b18cc Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Thu, 30 Sep 2021 16:52:40 -0700
Subject: [PATCH] more arrows and formatting

---
 .../2020/index/annual-report.jsx              |  5 +-
 .../2020/index/annual-report.scss             | 83 +++++++++++--------
 src/views/annual-report/2020/index/l10n.json  |  6 +-
 3 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx
index dee0e1069..e1dbc8872 100644
--- a/src/views/annual-report/2020/index/annual-report.jsx
+++ b/src/views/annual-report/2020/index/annual-report.jsx
@@ -655,7 +655,8 @@ class AnnualReport extends React.Component {
                                     <h3>
                                         <FormattedMessage id="annualReport.reachTranslationTitle" />
                                     </h3>
-                                    <div>
+                                    <div className="inline">
+                                        <img src="/images/annual-report/2020/Symbols-UI/Arrow_up.svg" />
                                         <FormattedMessage id="annualReport.reachTranslationIncrease" />
                                     </div>
                                     <p>
@@ -693,7 +694,7 @@ class AnnualReport extends React.Component {
                                 <h4>
                                     <FormattedMessage id="annualReport.reachDownloads" />
                                 </h4>
-                                <div className="increase-bubble">
+                                <div className="increase bubble dark">
                                     <FormattedMessage id="annualReport.reachDownloadsIncrease" />
                                 </div>
                             </div>
diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss
index e9a9814e0..8951cb7c6 100644
--- a/src/views/annual-report/2020/index/annual-report.scss
+++ b/src/views/annual-report/2020/index/annual-report.scss
@@ -633,9 +633,9 @@ p {
             font-size: 1.5rem;
         }
 
-        img {
-            margin-top: 20px;
-        }
+        // img {
+        //     margin-top: 20px;
+        // }
 
         .reach-numbers {
             display: flex;
@@ -669,38 +669,6 @@ p {
         }
     }
 
-    .bubble {
-        background-color: darken($ui-teal, 10%);
-        border-radius: 50px;
-        padding: 10px 15px;
-        font-size: 14px;
-        margin: 15px auto;
-        max-width: 170px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        img{
-            margin: 0px 8px;
-        }
-        &.increase{
-            padding: 5px 5px;
-            span{
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                &:before{
-                    content: '';
-                    width: 30px;
-                    height: 30px;
-                    background-image: url("/images/annual-report/2020/Symbols-UI/Arrow_up.svg");
-                    background-size: contain;
-                    display: inline-block;
-                    margin-right: 10px;
-                }
-            }
-        }
-    }
-
     .map-inner {
         max-width: 940px;
         margin: 0 auto;
@@ -783,6 +751,15 @@ p {
             }
         }
 
+        .inline{
+            display: flex;
+            align-items: center;
+            margin-top: 10px;
+            img{
+                margin-right: 6px;
+            }
+        }
+
         img {
             max-width: 380px;
         }
@@ -813,6 +790,42 @@ p {
     }
 }
 
+.bubble {
+    background-color: darken($ui-teal, 10%);
+    border-radius: 50px;
+    padding: 10px 15px;
+    font-size: 14px;
+    margin: 15px auto;
+    max-width: 170px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img{
+        margin: 0px 8px;
+    }
+    &.increase{
+        padding: 5px 5px;
+        &.dark{
+            background-color: darken($ui-teal, 15%);
+            padding: 5px 15px;
+        }
+        span{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:before{
+                content: '';
+                width: 30px;
+                height: 30px;
+                background-image: url("/images/annual-report/2020/Symbols-UI/Arrow_up.svg");
+                background-size: contain;
+                display: inline-block;
+                margin-right: 10px;
+            }
+        }
+    }
+}
+
 .reach-datapoint {
     font-size: 5rem;
     font-weight: bold;
diff --git a/src/views/annual-report/2020/index/l10n.json b/src/views/annual-report/2020/index/l10n.json
index 7f67e73cb..53717a684 100644
--- a/src/views/annual-report/2020/index/l10n.json
+++ b/src/views/annual-report/2020/index/l10n.json
@@ -58,13 +58,13 @@
     "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 7x Languages",
-    "annualReport.reachTranslationIncrease": "x languages from 2019",
+    "annualReport.reachTranslationTitle": "Scratch is Translated into 64 Languages",
+    "annualReport.reachTranslationIncrease": "3 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.reachDownloadsMillion": "3 {million}",
     "annualReport.reachDownloads": "Downloads in 2020",
-    "annualReport.reachDownloadsIncrease": "x million from 2019",
+    "annualReport.reachDownloadsIncrease": "2 million from 2019",
 
     "annualReport.themesTitle": "Emerging Themes",
     "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.",