From 240d6c0c877361c855394965a11c0a5b48697b41 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Wed, 27 Apr 2022 12:18:50 -0700
Subject: [PATCH] start working on sparkles

---
 .../timeline-card/timeline-card.scss          |  2 +-
 .../annual-report/2021/annual-report.jsx      | 17 ++++++++
 .../annual-report/2021/annual-report.scss     | 42 +++++++++++++++++--
 src/views/annual-report/2021/l10n.json        |  3 ++
 4 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/components/timeline-card/timeline-card.scss b/src/components/timeline-card/timeline-card.scss
index 8e643d3d9..3ecc9b319 100644
--- a/src/components/timeline-card/timeline-card.scss
+++ b/src/components/timeline-card/timeline-card.scss
@@ -4,6 +4,7 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
 
 .timeline-card{
   max-width: 460px;
+  z-index: 2;
 
   @media #{$small} {
     max-width: 300px;
@@ -12,7 +13,6 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
   background-color: $ui-white;
   border-radius: 8px;
   position: relative;
-  z-index: 1;
   margin-bottom: 30px;
 
   .timeline-content {
diff --git a/src/views/annual-report/2021/annual-report.jsx b/src/views/annual-report/2021/annual-report.jsx
index 930a82f57..39c1db5d9 100644
--- a/src/views/annual-report/2021/annual-report.jsx
+++ b/src/views/annual-report/2021/annual-report.jsx
@@ -1417,6 +1417,23 @@ class AnnualReport extends React.Component {
                             </div>
 
                             {/* go into timeline section */}
+                            <div className="sparkles">
+                                <img
+                                    className="sparkle-left"
+                                    src="/images/annual-report/2021/3_Community Section/Timeline/Left Sparkles.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2021.altSparkle'})}
+                                />
+                                <img
+                                    className="down-arrow"
+                                    src="/images/annual-report/2021/3_Community Section/Timeline/Down Arrow.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2021.altDownArrow'})}
+                                />
+                                <img
+                                    className="sparkle-right"
+                                    src="/images/annual-report/2021/3_Community Section/Timeline/Right Sparkles.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2021.altSparkle'})}
+                                />
+                            </div>
                             <div className="year-in-review">
                                 <img
                                     className="upper-wave"
diff --git a/src/views/annual-report/2021/annual-report.scss b/src/views/annual-report/2021/annual-report.scss
index 7fe698169..328e6bf95 100644
--- a/src/views/annual-report/2021/annual-report.scss
+++ b/src/views/annual-report/2021/annual-report.scss
@@ -1541,9 +1541,44 @@ img.comment-viz{
         }
     }
 
+    .sparkles{
+        position: relative;
+        width: calc(100% - 70px);
+        margin: 0 auto -114px;
+        z-index: 1;
+        display: flex;
+        justify-content: space-between;
+        height: 180px;
+        align-items: flex-start;
+        @media #{$intermediate-and-smaller} {
+            // top: -120px;
+            height: 130px;
+            margin: 0 auto -76px;
+        }
+        @media #{$medium-and-smaller} {
+            height: 150px;
+            overflow: hidden;
+            width: 100%;
+        }
+        .sparkle-left{
+            @media #{$medium-and-smaller}{
+                margin-left: -40px;
+            }
+        }
+        .sparkle-right{
+            @media #{$medium-and-smaller}{
+                margin-right: -40px;
+            }
+        }
+        .down-arrow{
+            align-self: flex-end;
+            width: 50px;
+        }
+    }
+
     .year-in-review{
         position: relative;
-        padding: 180px 0;
+        padding: 180px 0 180px 0;
         display: flex;
         flex-direction: column;
         // overflow-x: hidden;
@@ -1565,9 +1600,10 @@ img.comment-viz{
         }
         .connector{
             margin: -40px auto -30px;
+            // margin-left: calc((100% - 980px)/2 + 200px);
             z-index: 1;
             &.left{
-                margin-left: calc((100% - 980px)/2 + 230px);
+                margin-left: calc((100% - 980px)/2 + 245px);
             }
             &.right{
                 margin-left: 50%
@@ -1732,7 +1768,7 @@ img.comment-viz{
             &.center{
                 text-align: center;
                 margin-top: 80px;
-                max-width: 600px;
+                max-width: 650px;
                 margin: auto;
                 margin-top: 70px;
             }
diff --git a/src/views/annual-report/2021/l10n.json b/src/views/annual-report/2021/l10n.json
index db4fe94ec..5654aa9e0 100644
--- a/src/views/annual-report/2021/l10n.json
+++ b/src/views/annual-report/2021/l10n.json
@@ -275,6 +275,9 @@
 
     "annualReport.2021.altSECVideoPreview": "",
 
+    "annualReport.2021.altSparkle": "White sparkle decoration",
+    "annualReport.2021.altDownArrow": "Purple arrow pointing down",
+
     "annualReport.2021.altCard1": "",
     "annualReport.2021.altCard2": "",
     "annualReport.2021.altCard3": "",