Move transition messages from milestones section into reach section. Fix...

Move transition messages from milestones section into reach section. Fix ScratchJr transition messages based on changes made with the milestone-reach transition images. Fix lint issue.

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

@@ -446,7 +446,9 @@ class AnnualReport extends React.Component {
                             >
                                 <div className="title-and-description">
                                     <h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
-                                    <p className="no-margin-bottom"><FormattedMessage id="annualReport.missionPassionDescription" /></p>
+                                    <p className="no-margin-bottom">
+                                        <FormattedMessage id="annualReport.missionPassionDescription" />
+                                    </p>
                                 </div>
                                 <div className="small-p four-ps-passion">
                                     <img src="/images/annual-report/mission/Passion Illustration.svg" />
@@ -698,21 +700,21 @@ class AnnualReport extends React.Component {
                                 </div>
                             </div>
                         </div>
+                    </div>
+                    <div
+                        className="reach-section"
+                        ref={this.setRef(SECTIONS.reach)}
+                    >
                         <MediaQuery minWidth={frameless.desktop}>
                             <div className="transition-images">
                                 <div className="left-image">
-                                    <img src="/images/annual-report/milestones/vertical-loop.svg" />
+                                    <img src="/images/annual-report/reach/vertical-loop.svg" />
                                 </div>
                                 <div className="cropped-image">
-                                    <img src="/images/annual-report/milestones/painting-hand.svg" />
+                                    <img src="/images/annual-report/reach/painting-hand.svg" />
                                 </div>
                             </div>
                         </MediaQuery>
-                    </div>
-                    <div
-                        className="reach-section"
-                        ref={this.setRef(SECTIONS.reach)}
-                    >
                         <div className="inner">
                             <div className="reach-intro">
                                 <h2>

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

@@ -463,6 +463,7 @@ p {
 
 .milestones-section {
     background-color: $ui-blue-10percent;
+    padding-bottom: 120px;
 
     .inner {
         max-width: 940px;
@@ -566,14 +567,19 @@ p {
             }
         }
     }
+}
 
+.reach-section {
+    position: relative;
     .transition-images {
         width: 100%;
         
         height: 420px;
         overflow: hidden;
 
-        margin-bottom: -240px;
+        margin-top: -180px;
+
+        position: absolute;
 
         .left-image {
             align-self: center;
@@ -584,9 +590,7 @@ p {
             width: 260px;
         }
     }
-}
 
-.reach-section {
     .inner {
         max-width: 940px;
         padding-top: 120px;
@@ -760,14 +764,14 @@ p {
 
 .reach-section {
     .scratch-jr-transition-img {
-        margin-bottom: -44px;
+        position: absolute;
+        margin-top: -44px;
         margin-left: 88px;
 
-        display: flex;
-        overflow: hidden;
-        justify-content: flex-start;
-
-        @media #{$medium-and-smaller} {
+        @media #{$medium} {
+            margin-left: 32px;
+        }
+        @media #{$small} {
             margin-left: -8px;
         }
     }
@@ -775,18 +779,18 @@ p {
 
 .reach-scratch-jr {
     .scratch-jr-transition-img {
-        width: 100%;
         margin-bottom: -156px;
         margin-right: 48px;
         display: flex;
-        // flex-direction: row-reverse;
-        overflow: hidden;
-
         justify-content: flex-end;
 
-        // @media #{$medium-and-smaller} {
-        //     margin-right: -28px;
-        // }
+        @media #{$medium} {
+            margin-right: 12px;
+        }
+        @media #{$small} {
+            margin-right: -36px;
+            overflow: hidden;
+        }
     }
 }
 

static/images/annual-report/milestones/horizontal-command.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>ScratchJr Command</title>
-    <defs>
-        <filter id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 0.749020 0 0 0 0 0.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="ScratchJr-Command" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Horizontal/Block/Command" transform="translate(8.000000, 12.000000)" filter="url(#filter-1)">
-            <g transform="translate(36.000000, 32.000000) rotate(14.000000) translate(-36.000000, -32.000000) ">
-                <path d="M0,49.6568542 C0,48.5959883 0.421427361,47.5785726 1.17157288,46.8284271 L1.17157288,46.8284271 L6.82842712,41.1715729 C7.57857264,40.4214274 8,39.4040117 8,38.3431458 L8,38.3431458 L8,25.6568542 C8,24.5959883 7.57857264,23.5785726 6.82842712,22.8284271 L6.82842712,22.8284271 L1.17157288,17.1715729 C0.421427361,16.4214274 0,15.4040117 0,14.3431458 L0,14.3431458 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L60,0 C62.209139,-4.05812251e-16 64,1.790861 64,4 L64,14.375 L64.0064166,14.5697275 C64.061881,15.5479932 64.4750092,16.4750092 65.1715729,17.1715729 L70.8284271,22.8284271 C71.5785726,23.5785726 72,24.5959883 72,25.6568542 L72,38.3431458 C72,39.4040117 71.5785726,40.4214274 70.8284271,41.1715729 L65.1715729,46.8284271 C64.4290142,47.5709858 64.0085581,48.5754358 64.0001292,49.6246797 L64,60 C64,62.209139 62.209139,64 60,64 L4,64 C1.790861,64 2.705415e-16,62.209139 0,60 Z" id="Command" stroke="#CC9900" fill="#FFBF00"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file