replace some images and start adding links to paragraphs

src/components/country-blurb/country-blurb.jsx

@@ -32,7 +32,12 @@ const CountryBlurb = props => (
                     </div>
                 </div>
             </div>
-            <p>{props.paragraph}</p>
+            <p>
+                {props.paragraph}
+                {props.link &&
+                    <a href={props.link}> {props.linkText}</a>
+                }
+            </p>
         </div>
         {props.className === 'reverse' &&
             <div className="half">
@@ -55,7 +60,9 @@ CountryBlurb.propTypes = {
     className: PropTypes.string,
     large_image: PropTypes.string,
     alt: PropTypes.string,
-    iconAlt: PropTypes.string
+    iconAlt: PropTypes.string,
+    link: PropTypes.string,
+    linkText: PropTypes.string
 };
 
 module.exports = CountryBlurb;

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

@@ -1187,6 +1187,10 @@ class AnnualReport extends React.Component {
                                             paragraph={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryIndiaParagraph'}
                                             )}
+                                            link="https://www.facebook.com/118389481508616/videos/818137148590473"
+                                            linkText={this.props.intl.formatMessage(
+                                                {id: 'annualReport.2020.connectivityCountryIndiaParagraphLinkText'}
+                                            )}
                                             large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance graphic.svg"
                                         />
                                         <CountryBlurb
@@ -1208,6 +1212,10 @@ class AnnualReport extends React.Component {
                                             paragraph={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryUSAParagraph'}
                                             )}
+                                            link="https://www.youtube.com/watch?v=kR1o69koAgc"
+                                            linkText={this.props.intl.formatMessage(
+                                                {id: 'annualReport.2020.connectivityCountryUSAParagraphLinkText'}
+                                            )}
                                             large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg"
                                         />
                                     </div>
@@ -1597,7 +1605,7 @@ class AnnualReport extends React.Component {
                                         alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveTop'})}
                                     />
                                     <img
-                                        src="/images/annual-report/2020/community/Online Community Illustration.svg"
+                                        src="/images/annual-report/2020/community/Online Community Illustration.png"
                                         alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveBottom'})}
                                     />
                                 </div>

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

@@ -56,6 +56,10 @@ p {
     line-height: 2em;
 }
 
+p a {
+    white-space: wrap;
+}
+
 a, a:link, a:visited, a:active{
     cursor: pointer;
     color: $motion-blue-3;
@@ -425,11 +429,11 @@ a, a:link, a:visited, a:active{
     }
 
     .four-ps-projects {
-        background-image: url("/images/annual-report/2020/mission-vision/Projects Splash.svg");
+        background-image: url("/images/annual-report/2020/mission-vision/Projects-Splash.svg");
     }
 
     .four-ps-passion {
-        background-image: url("/images/annual-report/2020/mission-vision/Passion Splash.svg");
+        background-image: url("/images/annual-report/2020/mission-vision/Passion-Splash.svg");
         margin-top: 112px;
         margin-right: 0;
 
@@ -443,7 +447,7 @@ a, a:link, a:visited, a:active{
     }
 
     .four-ps-peers {
-        background-image: url("/images/annual-report/2020/mission-vision/Peers Splash.svg");
+        background-image: url("/images/annual-report/2020/mission-vision/Peers-splash.svg");
         margin-top: -80px;
 
         @media #{$intermediate} {
@@ -456,7 +460,7 @@ a, a:link, a:visited, a:active{
     }
 
     .four-ps-play {
-        background-image: url("/images/annual-report/2020/mission-vision/Play Splash.svg");
+        background-image: url("/images/annual-report/2020/mission-vision/Play-splash.svg");
         margin-right: 0;
         margin-top: 32px;
 
@@ -2324,6 +2328,10 @@ img.comment-viz{
 
 }
 
+.grid .thumbnail.project {
+    box-shadow: none;
+}
+
 .annual-report-content, #footer {
     position: relative;
     top: 58px;

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

@@ -83,7 +83,7 @@
     "annualReport.2020.connectivityIndiaProjectsSubhead": "Projects Were Created Online in 2020",
     "annualReport.2020.connectivityIndiaProjectsIncreasePercent": "602% from 2019", 
     "annualReport.2020.connectivityRegistedUsers": "The number of all-time registered users in India more than doubled in one year, ",
-    "annualReport.2020.connectivityRegistedUsersNumbers": "rising from 316,219 in 2019 to 713,384 in 2020.",
+    "annualReport.2020.connectivityRegistedUsersNumbers": "rising from over 300,000 in 2019 to over 700,000 in 2020.",
     "annualReport.2020.connectivityIndiaUsers": "The number of unique visitors increased",
     "annualReport.2020.connectivityIndiaUsersPercent": "156%",
     "annualReport.2020.connectivityIndiaUsersOld": "1.8 {million}",
@@ -106,11 +106,13 @@
     
     "annualReport.2020.connectivityCountryIndiaTitle": "Quest Alliance",
     "annualReport.2020.connectivityCountryIndia": "India",
-    "annualReport.2020.connectivityCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2020, Quest Alliance shared Scratch with learners and educators across India.",
+    "annualReport.2020.connectivityCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2020, Quest Alliance",
+    "annualReport.2020.connectivityCountryIndiaParagraphLinkText": "shared Scratch with learners and educators across India.",
     
     "annualReport.2020.connectivityCountryUSATitle": "Raspberry Pi",
     "annualReport.2020.connectivityCountryUSA": "USA",
-    "annualReport.2020.connectivityCountryUSAParagraph": "Raspberry Pi works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even Scratch Team members!",
+    "annualReport.2020.connectivityCountryUSAParagraph": "Raspberry Pi works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even",
+    "annualReport.2020.connectivityCountryUSAParagraphLinkText": "Scratch Team members!",
 
     "annualReport.2020.connectivityResources": "Resources",
     "annualReport.2020.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation",