fix: arrow color

audioverse-org · Oct 21, 2024 · 6052501 · 6052501
1 parent 7dea577
commit 6052501
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/organisms/cardSlider/index.module.scss b/src/components/organisms/cardSlider/index.module.scss
@@ -82,6 +82,11 @@
 		}
 	}
 }
+.arrowWhite {
+	@media (min-width: $breakpoint-lg) {
+		color: $ts-white;
+	}
+}
 
 .base:hover .arrow:not(:disabled) {
 	opacity: 1;

diff --git a/src/components/organisms/cardSlider/index.tsx b/src/components/organisms/cardSlider/index.tsx
@@ -116,25 +116,25 @@ export default function Slider({
 			}}
 		>
 			<button
-				className={styles.arrow}
+				className={`${styles.arrow}${isDarkBg && ' ' + styles.arrowWhite}`}
 				onClick={() => swiper?.slidePrev()}
 				disabled={isBeginning}
 				aria-label={previous}
 			>
-				<IconBack color={isDarkBg && '#fff'} />
+				<IconBack />
 			</button>
 
 			<LazySwiper on={handlers} className={hasBg ? styles.whiteBg : ''}>
 				{slides}
 			</LazySwiper>
 
 			<button
-				className={styles.arrow}
+				className={`${styles.arrow}${isDarkBg && ' ' + styles.arrowWhite}`}
 				onClick={() => swiper?.slideNext()}
 				disabled={isEnd}
 				aria-label={next}
 			>
-				<IconForward color={isDarkBg && '#fff'} />
+				<IconForward />
 			</button>
 		</div>
 	);