Design Updates

assets/base.css

@@ -18,8 +18,9 @@
   --pink: #e64980;
   --purple: #f81ce5;
   --blue: #0070f3;
-  --violet: #5f3dc4;
-  --violet-light: #7048e8;
+
+  --violet: #7928ca;
+  --violet-dark: #4c2889;
 
   --accent-0: #fff;
   --accent-1: #fafafa;

components/common/Navbar/Navbar.module.css

@@ -2,8 +2,14 @@
   @apply sticky top-0 bg-primary z-40 transition-all duration-150;
 }
 
+.nav {
+  @apply hidden ml-6 space-x-4 lg:block;
+}
+
 .link {
-  @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accent-6;
+  @apply inline-flex items-center leading-6
+  transition ease-in-out duration-75 cursor-pointer
+  text-accent-5;
 }
 
 .link:hover {

components/common/Navbar/Navbar.tsx

@@ -15,7 +15,7 @@ const Navbar: FC = () => (
               <Logo />
             </a>
           </Link>
-          <nav className="hidden ml-6 space-x-4 lg:block">
+          <nav className={s.nav}>
             <Link href="/search">
               <a className={s.link}>All</a>
             </Link>

components/common/Searchbar/Searchbar.module.css

@@ -1,3 +1,7 @@
+.root {
+  @apply relative text-sm bg-accent-0 text-base w-full transition-colors duration-150 border border-accent-2;
+}
+
 .input {
   @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
 

components/common/Searchbar/Searchbar.tsx

@@ -15,14 +15,26 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
     router.prefetch('/search')
   }, [])
 
+  const handleKeyUp = (e) => {
+    e.preventDefault()
+
+    if (e.key === 'Enter') {
+      const q = e.currentTarget.value
+
+      router.push(
+        {
+          pathname: `/search`,
+          query: q ? { q } : {},
+        },
+        undefined,
+        { shallow: true }
+      )
+    }
+  }
+
   return useMemo(
     () => (
-      <div
-        className={cn(
-          'relative text-sm bg-accent-1 text-base w-full transition-colors duration-150',
-          className
-        )}
-      >
+      <div className={cn(s.root, className)}>
         <label className="hidden" htmlFor={id}>
           Search
         </label>
@@ -31,22 +43,7 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
           className={s.input}
           placeholder="Search for products..."
           defaultValue={router.query.q}
-          onKeyUp={(e) => {
-            e.preventDefault()
-
-            if (e.key === 'Enter') {
-              const q = e.currentTarget.value
-
-              router.push(
-                {
-                  pathname: `/search`,
-                  query: q ? { q } : {},
-                },
-                undefined,
-                { shallow: true }
-              )
-            }
-          }}
+          onKeyUp={handleKeyUp}
         />
         <div className={s.iconContainer}>
           <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">

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}

components/wishlist/WishlistButton/WishlistButton.module.css

@@ -0,0 +1,19 @@
+.root {
+  @apply p-5 text-accent-9 flex items-center
+  justify-center font-semibold cursor-pointer
+  bg-accent-0 text-sm;
+  transition: opacity 0.2s ease;
+}
+
+.root:focus {
+  @apply outline-none;
+}
+
+.icon {
+  @apply text-accent-9;
+  transition: transform 0.2s ease;
+}
+
+.icon {
+  transition: fill 0.4s ease;
+}

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -7,6 +7,7 @@ import useCustomer from '@framework/customer/use-customer'
 import useWishlist from '@framework/wishlist/use-wishlist'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
 import type { Product, ProductVariant } from '@commerce/types'
+import s from './WishlistButton.module.css'
 
 type Props = {
   productId: Product['id']
@@ -66,11 +67,14 @@ const WishlistButton: FC<Props> = ({
   return (
     <button
       aria-label="Add to wishlist"
-      className={cn({ 'opacity-50': loading }, className)}
+      className={cn(s.root, className)}
       onClick={handleWishlistChange}
       {...props}
     >
-      <Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
+      <Heart
+        className={cn(s.icon, { 'opacity-80': loading })}
+        fill={itemInWishlist ? 'var(--pink)' : 'none'}
+      />
     </button>
   )
 }

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/shopify"],
-      "@framework/*": ["framework/shopify/*"]
+      "@framework": ["framework/bigcommerce"],
+      "@framework/*": ["framework/bigcommerce/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],