From b5abdff880ce3d7f74015a1865f5b55f69778b35 Mon Sep 17 00:00:00 2001
From: josuesantamaria <38796701+josuesantamaria@users.noreply.github.com>
Date: Thu, 5 Dec 2024 19:03:44 -0600
Subject: [PATCH] feat: target slider styles

---
 src/app/StoriesSlider.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/StoriesSlider.js b/src/app/StoriesSlider.js
index 3c39add..91d2949 100644
--- a/src/app/StoriesSlider.js
+++ b/src/app/StoriesSlider.js
@@ -45,6 +45,12 @@ const SliderContainer = styled.section`
   }
 `;
 
+const organizationArrowHoverStyles = {
+  Target: `
+    fill: #cc0000;
+  `
+}
+
 const LeftArrow = styled.button`
   background: #fff;
   border: 0;
@@ -55,7 +61,7 @@ const LeftArrow = styled.button`
   left: -25px;
   padding: 11px;
   position: absolute;
-  top: calc(50% - 15px);
+  top: calc(50% - 22.5px);
   width: 45px;
   z-index: 10;
 
@@ -64,7 +70,14 @@ const LeftArrow = styled.button`
   }
 
   &:hover {
+    background-color: #fff;
     cursor: pointer;
+
+    path {
+      ${props => organizationArrowHoverStyles[props.organizationName] || `
+        fill: #000000;
+      `}
+    }
   }
 `;
 
@@ -78,7 +91,7 @@ const RightArrow = styled.button`
   padding: 11px;
   position: absolute;
   right: -25px;
-  top: calc(50% - 15px);
+  top: calc(50% - 22.5px);
   width: 45px;
   z-index: 10;
 
@@ -87,7 +100,14 @@ const RightArrow = styled.button`
   }
 
   &:hover {
+    background-color: #fff;
     cursor: pointer;
+
+    path {
+      ${props => organizationArrowHoverStyles[props.organizationName] || `
+        fill: #000000;
+      `}
+    }
   }
 `;
 
@@ -492,6 +512,7 @@ const StoriesSlider = ({ filters = {}, organizationId, organizationName, stories
           aria-label="Previous"
           type="button"
           onClick={onPrev}
+          organizationName={organizationName}
           style={{ display: slideLayout.left ? "block" : "none" }}
         >
           <svg
@@ -511,6 +532,7 @@ const StoriesSlider = ({ filters = {}, organizationId, organizationName, stories
           aria-label="Next"
           type="button"
           onClick={onNext}
+          organizationName={organizationName}
           style={{ display: slideLayout.right ? "block" : "none" }}
         >
           <svg