From 03183840fbad26237b25799b8bbccabd9dd94545 Mon Sep 17 00:00:00 2001
From: Jake Schoolmeesters <jake.schoolmeesters@bounteous.com>
Date: Thu, 4 Apr 2024 12:56:33 -0500
Subject: [PATCH] quote-carousel-update: update styles to match new designs

---
 blocks/quote-carousel/quote-carousel.css | 57 ++++++++++++++++--------
 blocks/quote-carousel/quote-carousel.js  |  4 +-
 icons/icons.svg                          |  5 +++
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/blocks/quote-carousel/quote-carousel.css b/blocks/quote-carousel/quote-carousel.css
index c8414a1d..62606fac 100644
--- a/blocks/quote-carousel/quote-carousel.css
+++ b/blocks/quote-carousel/quote-carousel.css
@@ -1,15 +1,21 @@
+.quote-carousel-wrapper {
+  background-color: var(--primary-color);
+  color: var(--white);
+}
+
 .quote-carousel.block {
+  border-bottom: 1px solid var(--body-color);;
+  border-top: 1px solid var(--body-color);
   display: flex;
-  padding: 2em 0;
   flex-direction: column;
   overflow: hidden;
-  border-bottom: 1px solid var(--body-color);;
-  border-top: 1px solid var(--body-color);
+  padding: 2em 0;
+  position: relative;
 }
 
 .quote-carousel.block .title {
   text-align: center;
-  text-transform: uppercase;
+  text-transform: capitalize;
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-xs);
   letter-spacing: var(--letter-spacing-m);
@@ -17,9 +23,10 @@
 }
 
 .quote-carousel.block .carousel-content {
+  align-items: baseline;
   display: flex;
-  transition: transform 200ms;
   flex-wrap: nowrap;
+  transition: transform 200ms;
 }
 
 .quote-carousel.block .carousel-content .item {
@@ -45,47 +52,56 @@
 .quote-carousel.block .carousel-content .item .author {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-semibold);
-  font-size: var(--body-font-size-l);
+  font-size: var(--body-font-size-m);
   line-height: var(--line-height-s);
   margin: 30px 0 0;
 }
 
 .quote-carousel.block .carousel-content .item .position {
   font-family: var(--font-family-primary);
-  font-size: var(--body-font-size-s);
+  font-size: var(--body-font-size-xxs);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-m);
   line-height: var(--line-height-m);
+  text-transform: uppercase;
 }
 
 .quote-carousel.block .controls-container {
-  margin-top: 2em;
-  display: flex;
+  align-items: baseline;
   align-self: center;
-  align-items: center;
+  bottom: 30px;
+  display: flex;
+  margin-top: 2em;
+  position: absolute;
+  right: 15px;
 }
 
 .quote-carousel.block .controls-container .pagination {
   display: flex;
-  min-width: 100px;
-  padding: 0 16px;
-  justify-content: center;
-  font-size: var(--body-font-size-xs);
+  font-size: var(--body-font-size-xxs);
+  justify-content: flex-end;
+  margin-right: 16px;
+  min-width: 70px;
 }
 
 .quote-carousel.block .controls-container .pagination > span {
-  flex-basis: 33%;
+  flex-basis: 25%;
+  font-size: var(--body-font-size-xxs);
   text-align: center;
 }
 
 .quote-carousel.block .controls-container button {
-  background-color: var(--white);
+  background-color: transparent;
   border: none;
-  padding: 0;
   height: var(--body-font-size-m);
+  padding: 0;
+  transform: translateY(2px);
 }
 
 .quote-carousel.block .controls-container svg {
-  width: var(--body-font-size-m);
+  color: var(--white);
   height: var(--body-font-size-m);
+  width: var(--body-font-size-m);
 }
 
 .quote-carousel.block .controls-container [name="prev"] svg {
@@ -93,6 +109,10 @@
 }
 
 @media (min-width: 600px) {
+  .quote-carousel.block {
+    padding-top: 130px;
+  }
+
   .quote-carousel.block .title {
     margin-bottom: 2em;
   }
@@ -106,6 +126,7 @@
 
 @media (min-width: 900px) {
   .quote-carousel.block .carousel-content .item .quote {
+    margin-bottom: 30px;
     padding: 0;
     text-align: center;
     width: 66.66%;
diff --git a/blocks/quote-carousel/quote-carousel.js b/blocks/quote-carousel/quote-carousel.js
index fc6fa63c..bc1dc97a 100644
--- a/blocks/quote-carousel/quote-carousel.js
+++ b/blocks/quote-carousel/quote-carousel.js
@@ -80,13 +80,13 @@ export default async function decorate(block) {
 
     // generate container for carousel controls
     controlsContainer.innerHTML = `
-      <button name="prev" aria-label="Previous" class="control-button" disabled><svg><use xlink:href="/icons/icons.svg#carrot"/></svg></button>
       <div class="pagination">
           <span class="index">1</span>
           <span class="of">of</span>
           <span class="total">${content.total}</span>
       </div>
-      <button name="next" aria-label="Next" class="control-button"><svg><use xlink:href="/icons/icons.svg#carrot"/></svg></button>
+      <button name="prev" aria-label="Previous" class="control-button" disabled><svg><use xlink:href="/icons/icons.svg#carrot-white"/></svg></button>
+      <button name="next" aria-label="Next" class="control-button"><svg><use xlink:href="/icons/icons.svg#carrot-white"/></svg></button>
     `;
     window.setTimeout(observeCarousel, 3000);
   }
diff --git a/icons/icons.svg b/icons/icons.svg
index 98553b36..5c1fad06 100644
--- a/icons/icons.svg
+++ b/icons/icons.svg
@@ -80,6 +80,11 @@
         <path d="M9.438 9.9L.77 1.602A.75.75 0 0 1 1.808.52l9.795 9.377L1.581 19.56a.75.75 0 0 1-1.041-1.08L9.438 9.9z"
               fill="#3A3A3A" fill-rule="nonzero"/>
     </symbol>
+    <symbol id="carrot-white" viewBox="0 0 12 20">
+        <title>path-1</title>
+        <path d="M9.438 9.9L.77 1.602A.75.75 0 0 1 1.808.52l9.795 9.377L1.581 19.56a.75.75 0 0 1-1.041-1.08L9.438 9.9z"
+              fill="#FFFFFF" fill-rule="nonzero"/>
+    </symbol>
     <symbol id="checkmark" viewBox="0 0 14 10">
         <title>Path 9</title>
         <path d="M1 5.233L5.314 10l7.637-10" fill-rule="nonzero" stroke="#979797" fill="none"/>