images and aqua bg

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

@@ -355,14 +355,8 @@ class AnnualReport extends React.Component {
                                         <FormattedMessage id="annualReport.2021.mastheadTitle" />
                                     </h1>
                                 </div>
-                                {/* <img
-                                    src="/images/annual-report/2021/Masthead Illustration.svg"
-                                    alt={this.props.intl.formatMessage(
-                                        {id: 'annualReport.2021.altMastheadIllustration'}
-                                    )}
-                                /> */}
                                 <img
-                                    src="/images/annual-report/2021/Masthead_Illo_screenshot.png"
+                                    src="/images/annual-report/2021/Masthead Illustration.svg"
                                     alt={this.props.intl.formatMessage(
                                         {id: 'annualReport.2021.altMastheadIllustration'}
                                     )}

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

@@ -105,7 +105,7 @@ a, a:link, a:visited, a:active{
 }
 
 .message-section {
-    background-color: $annual-report-green;
+    background-color: $annual-report-aqua;
 
     h1, h2, p {
         color: $ui-white;
@@ -1581,7 +1581,7 @@ img.comment-viz{
         padding: 180px 0 180px 0;
         display: flex;
         flex-direction: column;
-        // overflow-x: hidden;
+        overflow-x: hidden;
         @media #{$intermediate-and-smaller} {
             padding: 80px 15px;
         }
@@ -2614,7 +2614,7 @@ img.comment-viz{
     top: 50px;
     z-index: 9;
     box-shadow: 0 0 3px $box-shadow-gray;
-    background-color: $annual-report-green;
+    background-color: $annual-report-aqua;
     padding: 0;
     width: 100%;
     height: 58px;

static/images/annual-report/2021/Wave Icon.svg

@@ -1,11 +1,11 @@
 <svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5299 59.118C4.09587 49.539 23.4809 46.307 33.9619 65.077C39.9529 75.806 47.4989 66.568 50.5959 58.6C54.6719 48.113 61.2059 34.629 64.9679 26.454C69.2169 17.223 80.8339 23.259 77.2779 31.589C72.4369 42.927 62.2769 61.184 65.2849 62.993C68.5279 64.944 78.7549 39.745 87.3249 25.737C93.5709 15.526 103.693 21.27 99.1699 32.423C93.7549 45.776 80.8319 63.782 83.0039 65.519C85.1899 67.266 96.2049 49.848 102.776 39.196C108.129 30.52 118.156 37.52 113.285 45.446C105.951 57.378 90.4799 75.999 92.4289 77.674C94.9919 79.875 103.488 67.459 108.532 61.259C114.638 53.752 122.122 60.594 117.444 67.03C109.198 78.374 88.1299 105.083 82.1219 112.407C67.9449 129.685 26.1389 116.422 26.1459 87.615C26.1509 72.198 14.1899 64.57 10.5299 59.118Z" fill="#825331"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.2769 29.084C35.4959 31.686 33.4309 36.139 33.8879 40.705Z" fill="#825331"/>
-<path d="M39.2769 29.084C35.4959 31.686 33.4309 36.139 33.8879 40.705" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0345 20.0059C25.1905 24.7149 21.4535 32.7759 22.2805 41.0419Z" fill="#825331"/>
-<path d="M32.0345 20.0059C25.1905 24.7149 21.4535 32.7759 22.2805 41.0419" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M111.028 102.443C115.432 100.804 118.594 96.898 119.281 92.25Z" fill="#825331"/>
-<path d="M111.028 102.443C115.432 100.804 118.594 96.898 119.281 92.25" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M115.952 113.264C123.924 110.297 129.648 103.226 130.89 94.8125Z" fill="#825331"/>
-<path d="M115.952 113.264C123.924 110.297 129.648 103.226 130.89 94.8125" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.53 59.2137C4.09596 49.6347 23.481 46.4027 33.962 65.1727C39.953 75.9017 47.499 66.6637 50.596 58.6957C54.672 48.2087 61.206 34.7247 64.968 26.5497C69.217 17.3187 80.834 23.3547 77.278 31.6847C72.437 43.0227 62.277 61.2797 65.285 63.0887C68.528 65.0397 78.755 39.8407 87.325 25.8327C93.571 15.6217 103.693 21.3657 99.17 32.5187C93.755 45.8717 80.832 63.8777 83.004 65.6147C85.19 67.3617 96.205 49.9437 102.776 39.2917C108.129 30.6157 118.156 37.6157 113.285 45.5417C105.951 57.4737 90.48 76.0947 92.429 77.7697C94.992 79.9707 103.488 67.5547 108.532 61.3547C114.638 53.8477 122.122 60.6897 117.444 67.1257C109.198 78.4697 88.13 105.179 82.122 112.503C67.945 129.781 26.139 116.518 26.146 87.7107C26.151 72.2937 14.19 64.6657 10.53 59.2137Z" fill="#4C2E19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.2768 29.1797C35.4958 31.7817 33.4308 36.2347 33.8878 40.8007Z" fill="#4C2E19"/>
+<path d="M39.2768 29.1797C35.4958 31.7817 33.4308 36.2347 33.8878 40.8007" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0346 20.1016C25.1906 24.8106 21.4536 32.8716 22.2806 41.1376Z" fill="#4C2E19"/>
+<path d="M32.0346 20.1016C25.1906 24.8106 21.4536 32.8716 22.2806 41.1376" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.028 102.539C115.432 100.9 118.594 96.9937 119.281 92.3457Z" fill="#4C2E19"/>
+<path d="M111.028 102.539C115.432 100.9 118.594 96.9937 119.281 92.3457" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115.952 113.36C123.924 110.393 129.648 103.322 130.89 94.9082Z" fill="#4C2E19"/>
+<path d="M115.952 113.36C123.924 110.393 129.648 103.322 130.89 94.9082" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>