Missmatch with RightArrow

components/product/ProductSlider/ProductSlider.module.css

@@ -35,7 +35,7 @@
 }
 
 .rightControl {
-  @apply border-l;
+  @apply border-l border-accent-0;
 }
 
 .leftControl {

components/product/ProductSlider/ProductSlider.tsx

@@ -10,7 +10,7 @@ import React, {
 import cn from 'classnames'
 import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
-import { ChevronLeft, ChevronRight } from '@components/icons'
+import { ArrowLeft, ArrowRight } from '@components/icons'
 
 const ProductSlider: FC = ({ children }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
@@ -86,14 +86,14 @@ const ProductSlider: FC = ({ children }) => {
               onClick={slider.prev}
               aria-label="Previous Product Image"
             >
-              <ChevronLeft />
+              <ArrowLeft />
             </button>
             <button
               className={cn(s.rightControl)}
               onClick={slider.next}
               aria-label="Next Product Image"
             >
-              <ChevronRight />
+              <ArrowRight />
             </button>
           </div>
         )}

components/product/ProductView/ProductView.tsx

@@ -155,7 +155,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
           </div>
         </div>
       </div>
-      <hr className="mt-6" />
+      <hr className="mt-6 border-accent-2" />
       <section className="py-6 px-6 mb-10">
         <Text variant="sectionHeading">Related Products</Text>
         <div className="grid grid-cols-2 py-2 gap-4 md:grid-cols-4 md:gap-20">