From 5823b0124c80e41319868fb765c2c68b578668f0 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Fri, 29 Apr 2022 14:21:32 -0700
Subject: [PATCH] changing carosel nav icon

---
 net/web/src/Carousel/Carousel.jsx       |  7 ++++---
 net/web/src/Carousel/Carousel.styled.js | 23 +++++++++--------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/net/web/src/Carousel/Carousel.jsx b/net/web/src/Carousel/Carousel.jsx
index 75776138..37265118 100644
--- a/net/web/src/Carousel/Carousel.jsx
+++ b/net/web/src/Carousel/Carousel.jsx
@@ -11,6 +11,7 @@ export function Carousel({ items, itemRenderer }) {
   const [itemIndex, setItemIndex] = useState(0);
   const [scrollLeft, setScrollLeft] = useState('hidden');
   const [scrollRight, setScrollRight] = useState('hidden');
+  const FUDGE = 1;
 
   let carousel = useRef();
   let itemWidth = useRef(new Map());
@@ -44,7 +45,7 @@ export function Carousel({ items, itemRenderer }) {
   const setScroll = () => {
     let pos = 0;
     for (let i = 0; i < itemIndex; i++) {
-      pos += itemWidth.current.get(i) + 32;
+      pos += itemWidth.current.get(i) + 32 + FUDGE;
     }
     if (carousel.current) {
       carousel.current.scrollTo({ top: 0, left: pos, behavior: 'smooth' });
@@ -102,8 +103,8 @@ export function Carousel({ items, itemRenderer }) {
           {slots}
         </div>
         <div class="arrows">
-          <div class="arrow" style={{ visibility: scrollLeft }} onClick={onLeft}><LeftOutlined /></div>
-          <div class="arrow" style={{ visibility: scrollRight }} onClick={onRight}><RightOutlined /></div>
+          <div class="arrow" onClick={onRight}><RightOutlined style={{ visibility: scrollRight }} /></div>
+          <div class="arrow" onClick={onLeft}><LeftOutlined style={{ visibility: scrollLeft }} /></div>
         </div>
       </CarouselWrapper>
     );
diff --git a/net/web/src/Carousel/Carousel.styled.js b/net/web/src/Carousel/Carousel.styled.js
index 274c997d..e46b53f0 100644
--- a/net/web/src/Carousel/Carousel.styled.js
+++ b/net/web/src/Carousel/Carousel.styled.js
@@ -11,7 +11,7 @@ export const CarouselWrapper = styled.div`
     display: flex;
     flex-direction: row;
     width: 100%;
-    padding-left: 16px;
+    padding-left: 32px;
     overflow: hidden;
 
     /* hide scrollbar for IE, Edge and Firefox */
@@ -24,27 +24,22 @@ export const CarouselWrapper = styled.div`
   }
 
   .arrows {
-    width: 128px;
+    height: 100%;
     display: flex;
-    flex-direction: row;
+    padding-left: 16px;
+    flex-direction: column;
     position: absolute;
-    left: calc(50% - 64px);
-    justify-content: center;
-    bottom: 8px;
   }
 
   .arrow {
+    height: 50%;
     background-color: #888888;
     color: white;
-    opacity: 0.8;
-    padding-left: 4px;
-    padding-right: 4px;
-    margin-left: 8px;
-    margin-right: 8px;
-    font-size: 20px;
-    border-radius: 8px;
+    font-size: 16px;
     cursor: pointer;
-    border: 1px solid white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 
   .arrow:hover {