Design Updates

components/product/ProductCard/ProductCard.tsx

@@ -50,7 +50,7 @@ const ProductCard: FC<Props> = ({
       ) : (
         <>
           <div className={s.squareBg} />
-          <div className="flex flex-row justify-between box-border w-full z-20 absolute bg-red">
+          <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
             {!noNameTag && (
               <div className="absolute top-0 left-0 pr-16 max-w-full">
                 <h3 className={s.productTitle}>

components/product/ProductSlider/ProductSlider.module.css

@@ -3,9 +3,43 @@
   overflow-y: hidden;
 }
 
+.control {
+  @apply bg-violet absolute bottom-10 right-10 flex flex-row
+  border-accent-0 border text-accent-0 z-50 shadow-xl;
+  height: 48px;
+}
+
+.control:hover {
+}
+
 .leftControl,
 .rightControl {
-  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
+  @apply px-8 cursor-pointer;
+  transition: background-color 0.2s ease;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  background-color: var(--violet-dark);
+}
+
+.leftControl:focus,
+.rightControl:focus {
+  @apply outline-none;
+}
+
+.rightControl {
+  @apply border-l;
+}
+
+.leftControl {
+  margin-right: -1px;
+}
+
+/* .leftControl,
+.rightControl {
+  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 
+  flex items-center justify-center bg-hover-1;
 }
 
 .leftControl:hover,
@@ -13,36 +47,35 @@
   @apply bg-hover-2;
 }
 
-.leftControl:hover,
-.rightControl:hover {
+.leftControl:focus,
+.rightControl:focus {
   @apply outline-none shadow-outline-normal;
 }
 
 .leftControl {
   @apply bg-cover left-10;
   background-image: url('public/cursor-left.png');
-
   @screen md {
     @apply left-6;
   }
-}
+} */
 
-.rightControl {
+/* .rightControl {
   @apply bg-cover right-10;
   background-image: url('public/cursor-right.png');
 
   @screen md {
     @apply right-6;
   }
-}
+} */
 
-.control {
+/* .control {
   @apply opacity-0 transition duration-150;
-}
+} */
 
-.root:hover .control {
+/* .root:hover .control {
   @apply opacity-100;
-}
+} */
 
 .positionIndicatorsContainer {
   @apply hidden;

components/product/ProductSlider/ProductSlider.tsx

@@ -10,6 +10,7 @@ import React, {
 import cn from 'classnames'
 
 import s from './ProductSlider.module.css'
+import { ChevronLeft, ChevronRight } from '@components/icons'
 
 const ProductSlider: FC = ({ children }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
@@ -61,16 +62,23 @@ const ProductSlider: FC = ({ children }) => {
 
   return (
     <div className={s.root} ref={sliderContainerRef}>
-      <button
-        className={cn(s.leftControl, s.control)}
-        onClick={slider?.prev}
-        aria-label="Previous Product Image"
-      />
-      <button
-        className={cn(s.rightControl, s.control)}
-        onClick={slider?.next}
-        aria-label="Next Product Image"
-      />
+      <div className={s.control}>
+        <button
+          className={cn(s.leftControl)}
+          onClick={slider?.prev}
+          aria-label="Previous Product Image"
+        >
+          <ChevronLeft />
+        </button>
+        <button
+          className={cn(s.rightControl)}
+          onClick={slider?.next}
+          aria-label="Next Product Image"
+        >
+          <ChevronRight />
+        </button>
+      </div>
+
       <div
         ref={ref}
         className="keen-slider h-full transition-opacity duration-150"

components/product/ProductView/ProductView.module.css

@@ -24,10 +24,10 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-0 z-20 pr-16;
+  @apply absolute top-0 left-0 z-20 pr-16;
 
   @screen lg {
-    @apply left-6 pr-16;
+    @apply left-0 pr-16;
   }
 
   & .name {
@@ -43,7 +43,7 @@
   @screen lg {
     & .name,
     & .price {
-      @apply bg-violet-light text-white;
+      @apply bg-accent-0 text-accent-9;
     }
   }
 }
@@ -61,6 +61,7 @@
 }
 
 .imageContainer {
+  @apply text-center;
   & > div {
     @apply h-full;
     & > div {
@@ -84,11 +85,5 @@
 }
 
 .wishlistButton {
-  @apply absolute z-30 top-6 right-0 bg-primary text-primary
-  w-10 h-10 flex items-center justify-center font-semibold
-  leading-6 cursor-pointer px-6;
-
-  @screen lg {
-    @apply top-6 right-0 text-black bg-white w-14 h-14;
-  }
+  @apply absolute z-30 top-0 right-0;
 }

components/product/ProductView/ProductView.tsx

@@ -185,7 +185,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
               key={p.path}
             >
               <ProductCard
-                variant="simple"
                 key={p.path}
                 className="animated fadeIn"
                 product={p}