General UI Improvements

components/common/SidebarLayout/SidebarLayout.module.css

@@ -1,8 +1,16 @@
 .root {
   @apply relative h-full flex flex-col w-full;
+  min-height: 100vh;
 }
 
 .header {
-  @apply pl-4 pr-6 pt-4 pb-4 lg:pt-5 flex items-center justify-between space-x-3;
+  @apply sticky top-0 pl-4 pr-6 pt-4 pb-4 lg:pt-5
+  flex items-center justify-between space-x-3
+  bg-accent-0 border-b border-accent-2 z-50;
   margin-top: 1px;
 }
+
+.container,
+.container > *:first-child {
+  min-height: calc(100vh - 70px);
+}

components/common/SidebarLayout/SidebarLayout.tsx

@@ -24,10 +24,8 @@ const SidebarLayout: FC<ComponentProps> = ({
             aria-label="Close"
             className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
           >
-            <Cross className="h-6 w-6" />
-            <span className="ml-2 text-accent-7 text-sm hover:text-gray-500">
-              Close
-            </span>
+            <Cross className="h-6 w-6 hover:text-accent-3" />
+            <span className="ml-2 text-accent-7 text-sm ">Close</span>
           </button>
         )}
 
@@ -37,15 +35,13 @@ const SidebarLayout: FC<ComponentProps> = ({
             aria-label="Go back"
             className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
           >
-            <ChevronLeft className="h-6 w-6" />
-            <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
-              Back
-            </span>
+            <ChevronLeft className="h-6 w-6 hover:text-accent-3" />
+            <span className="ml-2 text-accent-7 text-xs ">Back</span>
           </button>
         )}
         <UserNav />
       </header>
-      {children}
+      <div className={s.container}>{children}</div>
     </div>
   )
 }

components/product/ProductCard/ProductCard.module.css

@@ -3,108 +3,109 @@
   bg-no-repeat bg-center bg-cover transition-transform
   ease-linear cursor-pointer inline-block bg-accent-1;
   height: 100% !important;
+}
 
-  &:hover {
+.root:hover {
   & .productImage {
     transform: scale(1.2625);
   }
 
-    & .productTitle > span,
-    & .productPrice,
+  & .header .name span,
+  & .header .price,
   & .wishlistButton {
     @apply bg-secondary text-secondary;
   }
 
-    &:nth-child(6n + 1) .productTitle > span,
-    &:nth-child(6n + 1) .productPrice,
+  &:nth-child(6n + 1) .header .name span,
+  &:nth-child(6n + 1) .header .price,
   &:nth-child(6n + 1) .wishlistButton {
     @apply bg-violet text-white;
   }
 
-    &:nth-child(6n + 5) .productTitle > span,
-    &:nth-child(6n + 5) .productPrice,
+  &:nth-child(6n + 5) .header .name span,
+  &:nth-child(6n + 5) .header .price,
   &:nth-child(6n + 5) .wishlistButton {
     @apply bg-blue text-white;
   }
 
-    &:nth-child(6n + 3) .productTitle > span,
-    &:nth-child(6n + 3) .productPrice,
+  &:nth-child(6n + 3) .header .name span,
+  &:nth-child(6n + 3) .header .price,
   &:nth-child(6n + 3) .wishlistButton {
     @apply bg-pink text-white;
   }
 
-    &:nth-child(6n + 6) .productTitle > span,
-    &:nth-child(6n + 6) .productPrice,
+  &:nth-child(6n + 6) .header .name span,
+  &:nth-child(6n + 6) .header .price,
   &:nth-child(6n + 6) .wishlistButton {
     @apply bg-cyan text-white;
   }
 }
+
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
 }
 
-.root .wishlistButton {
-  @apply top-0 right-0 z-30 absolute;
-}
-
-.productTitle > span,
-.productPrice {
-  @apply transition-colors ease-in-out duration-500;
-}
-
-.simple {
-  & .productTitle {
-    @apply pt-2;
-    font-size: 1rem;
-
-    & span {
-      @apply leading-extra-loose;
-    }
-  }
-
-  & .productPrice {
-    @apply text-sm;
-  }
-}
-
-.productTitle {
+.header .name {
   @apply pt-0 max-w-full w-full leading-extra-loose;
   font-size: 2rem;
   letter-spacing: 0.4px;
+}
 
-  & span {
+.header .name span {
   @apply py-4 px-6 bg-primary text-primary font-bold;
   font-size: inherit;
   letter-spacing: inherit;
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
 }
-}
 
-.productPrice {
-  @apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
-  letter-spacing: 0.4px;
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
 }
 
 .imageContainer {
-  @apply flex items-center justify-center;
-  overflow: hidden;
+  @apply flex items-center justify-center overflow-hidden;
+}
 
-  & > div {
+.imageContainer > div {
   min-width: 100%;
 }
+
+.imageContainer .productImage {
+  @apply transform transition-transform duration-500
+  object-cover scale-120;
 }
 
-.productImage {
-  @apply transform transition-transform duration-500 object-cover scale-120;
+.root .wishlistButton {
+  @apply top-0 right-0 z-30 absolute;
 }
 
+/* Variant Simple */
+.simple .header .name {
+  @apply pt-2 text-lg leading-10 -mt-1;
+}
+
+.simple .header .price {
+  @apply text-sm;
+}
+
+/* Variant Slim */
 .slim {
-  @apply bg-transparent relative overflow-hidden box-border;
+  @apply bg-transparent relative overflow-hidden
+  box-border;
 }
 
-.slim .tag {
-  @apply bg-accent-9 text-accent-0 inline-block p-3 font-bold text-xl break-words;
+.slim .header {
+  @apply absolute inset-0 flex items-center justify-end mr-8 z-20;
 }
 
-.root:global(.secondary) .tag {
+.slim span {
+  @apply bg-accent-9 text-accent-0 inline-block p-3
+  font-bold text-xl break-words;
+}
+
+.root:global(.secondary) .header span {
   @apply bg-accent-0 text-accent-9;
 }

components/product/ProductCard/ProductCard.tsx

@@ -5,37 +5,45 @@ import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
+import usePrice from '@framework/product/use-price'
 
 interface Props {
   className?: string
   product: Product
-  variant?: 'default' | 'slim' | 'simple'
-  imgProps?: Omit<ImageProps, 'src'>
   noNameTag?: boolean
+  imgProps?: Omit<ImageProps, 'src'>
+  variant?: 'default' | 'slim' | 'simple'
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
 
 const ProductCard: FC<Props> = ({
-  className,
   product,
   imgProps,
-  variant = 'default',
+  className,
   noNameTag = false,
+  variant = 'default',
   ...props
-}) => (
-  <Link href={`/product/${product.slug}`} {...props}>
-    <a
-      className={cn(
+}) => {
+  const { price } = usePrice({
+    amount: product.price.value,
+    baseAmount: product.price.retailPrice,
+    currencyCode: product.price.currencyCode!,
+  })
+
+  const rootClassName = cn(
     s.root,
     { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
     className
-      )}
-    >
+  )
+
+  return (
+    <Link href={`/product/${product.slug}`} {...props}>
+      <a className={rootClassName}>
         {variant === 'slim' && (
           <>
-          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <span className={s.tag}>{product.name}</span>
+            <div className={s.header}>
+              <span>{product.name}</span>
             </div>
             {product?.images && (
               <Image
@@ -57,24 +65,19 @@ const ProductCard: FC<Props> = ({
               <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}
-              variant={product.variants[0] as any}
+                variant={product.variants[0]}
               />
             )}
-
-          <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}>
+              <div className={s.header}>
+                <h3 className={s.name}>
                   <span>{product.name}</span>
                 </h3>
-                <span className={s.productPrice}>
-                  {product.price.value}
-                  &nbsp;
-                  {product.price.currencyCode}
-                </span>
+                <div className={s.price}>
+                  {`${price} ${product.price?.currencyCode}`}
+                </div>
               </div>
             )}
-          </div>
             <div className={s.imageContainer}>
               {product?.images && (
                 <Image
@@ -101,16 +104,12 @@ const ProductCard: FC<Props> = ({
                 variant={product.variants[0] as any}
               />
             )}
-          <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
-            <div className="absolute top-0 left-0 pr-16 max-w-full">
-              <h3 className={s.productTitle}>
+            <div className={s.header}>
+              <h3 className={s.name}>
                 <span>{product.name}</span>
               </h3>
-              <span className={s.productPrice}>
-                {product.price.value}
-                &nbsp;
-                {product.price.currencyCode}
-              </span>
+              <div className={s.price}>
+                {`${price} ${product.price?.currencyCode}`}
               </div>
             </div>
             <div className={s.imageContainer}>
@@ -132,5 +131,6 @@ const ProductCard: FC<Props> = ({
       </a>
     </Link>
   )
+}
 
 export default ProductCard

components/product/ProductView/ProductView.module.css

@@ -7,18 +7,28 @@
   min-height: 500px;
 }
 
-.nameBox {
-  @apply absolute top-0 left-0 z-20 pr-16;
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
 }
 
-.nameBox .name {
-  @apply px-6 py-2 bg-primary text-primary font-bold;
-  font-size: 1.8rem;
+.header .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose;
+  font-size: 2rem;
   letter-spacing: 0.4px;
 }
 
-.nameBox .price {
-  @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
+.header .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
 }
 
 .sidebar {
@@ -60,15 +70,6 @@
     @apply mx-0 col-span-8;
   }
 
-  .nameBox {
-    @apply left-0 pr-16;
-  }
-
-  .nameBox .name,
-  .nameBox .price {
-    @apply bg-accent-0 text-accent-9;
-  }
-
   .sidebar {
     @apply col-span-4 py-6;
   }

components/product/ProductView/ProductView.tsx

@@ -80,8 +80,10 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
       />
       <div className={cn(s.root, 'fit')}>
         <div className={cn(s.main, 'fit')}>
-          <div className={s.nameBox}>
-            <h1 className={s.name}>{product.name}</h1>
+          <div className={s.header}>
+            <h3 className={s.name}>
+              <span>{product.name}</span>
+            </h3>
             <div className={s.price}>
               {`${price} ${product.price?.currencyCode}`}
             </div>

components/ui/Modal/Modal.module.css

@@ -11,3 +11,7 @@
 .modal:focus {
   @apply outline-none;
 }
+
+.close {
+  @apply hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6;
+}

components/ui/Modal/Modal.tsx

@@ -39,7 +39,7 @@ const Modal: FC<ModalProps> = ({ children, onClose }) => {
         <button
           onClick={() => onClose()}
           aria-label="Close panel"
-          className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6"
+          className={s.close}
         >
           <Cross className="h-6 w-6" />
         </button>