Missmatch with RightArrow

components/icons/ArrowRight.tsx

@@ -1,23 +1,22 @@
-const RightArrow = ({ ...props }) => {
+const ArrowRight = ({ ...props }) => {
   return (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
       fill="none"
+      stroke="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M5 12H19"
-        stroke="white"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M12 5L19 12L12 19"
-        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -26,4 +25,4 @@ const RightArrow = ({ ...props }) => {
   )
 }
 
-export default RightArrow
+export default ArrowRight

components/icons/index.ts

@@ -2,18 +2,18 @@ export { default as Bag } from './Bag'
 export { default as Heart } from './Heart'
 export { default as Trash } from './Trash'
 export { default as Cross } from './Cross'
-export { default as ArrowLeft } from './ArrowLeft'
 export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
 export { default as Check } from './Check'
 export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
 export { default as Github } from './Github'
-export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
 export { default as Vercel } from './Vercel'
 export { default as MapPin } from './MapPin'
 export { default as Star } from './Star'
+export { default as ArrowLeft } from './ArrowLeft'
+export { default as ArrowRight } from './ArrowRight'
 export { default as CreditCard } from './CreditCard'
 export { default as ChevronUp } from './ChevronUp'
 export { default as ChevronLeft } from './ChevronLeft'

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">

components/ui/Hero/Hero.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
-import { RightArrow } from '@components/icons'
+import { ArrowRight } from '@components/icons'
 import s from './Hero.module.css'
 import Link from 'next/link'
 interface HeroProps {
@@ -22,7 +22,7 @@ const Hero: FC<HeroProps> = ({ headline, description }) => {
             <Link href="/">
               <a className="text-accent-0 pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
                 Read it here
-                <RightArrow width="20" heigh="20" className="ml-1" />
+                <ArrowRight width="20" heigh="20" className="ml-1" />
               </a>
             </Link>
           </div>