New changes

components/icons/Star.tsx

@@ -0,0 +1,16 @@
+const Star = ({ ...props }) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12.43 8L10 0L7.57 8H0L6.18 12.41L3.83 20L10 15.31L16.18 20L13.83 12.41L20 8H12.43Z" />
+    </svg>
+  )
+}
+
+export default Star

components/icons/index.ts

@@ -13,6 +13,7 @@ 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 CreditCard } from './CreditCard'
 export { default as ChevronUp } from './ChevronUp'
 export { default as ChevronLeft } from './ChevronLeft'

components/product/ProductSlider/ProductSlider.module.css

@@ -43,8 +43,9 @@
 }
 
 .thumb {
-  @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
+  @apply transition-transform transition-colors
-  inline-block cursor-pointer h-full;
+  ease-linear duration-75 overflow-hidden inline-block
+  cursor-pointer h-full;
   width: 125px;
   width: calc(100% / 3);
 }
@@ -53,6 +54,10 @@
   @apply bg-white;
 }
 
+.thumb img {
+  height: 85% !important;
+}
+
 .album {
   @apply bg-violet-dark;
   overflow-y: hidden;
@@ -72,7 +77,7 @@
   }
 
   .album {
-    height: 235px;
+    height: 182px;
   }
   .thumb {
     width: 235px;

components/product/ProductView/ProductView.module.css

@@ -50,15 +50,10 @@
   @apply absolute z-30 top-0 right-0;
 }
 
-@screen md {
-  .button {
-    max-width: 300px;
-  }
-}
-
 @screen lg {
   .root {
     @apply grid-cols-12;
+    min-height: 900px;
   }
 
   .main {
@@ -75,10 +70,10 @@
   }
 
   .sidebar {
-    @apply col-span-4 py-12;
+    @apply col-span-4 py-6;
   }
 
   .imageContainer {
-    height: 600px;
+    max-height: 600px;
   }
 }

components/product/ProductView/ProductView.tsx

@@ -12,7 +12,8 @@ import { useAddItem } from '@framework/cart'
 import Collapse from '@components/ui/Collapse'
 import ProductCard from '@components/product/ProductCard'
 import WishlistButton from '@components/wishlist/WishlistButton'
-
+import rangeMap from '@lib/range-map'
+import { Star } from '@components/icons'
 interface Props {
   children?: any
   product: Product
@@ -97,8 +98,8 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
                     className={s.img}
                     src={image.url!}
                     alt={image.alt || 'Product Image'}
-                    width={1050}
+                    width={600}
-                    height={1050}
+                    height={600}
                     priority={i === 0}
                     quality="85"
                   />
@@ -148,10 +149,26 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
                 </div>
               </div>
             ))}
-            <div className="pb-14 break-words w-full max-w-xl">
+            <div className="pb-4 break-words w-full max-w-xl">
               <Text html={product.descriptionHtml || product.description} />
             </div>
           </section>
+          <div className="flex flex-row justify-between items-center">
+            {/**
+             * TODO make component Rate stars={}
+             */}
+            <div className="flex flex-row py-6">
+              {rangeMap(4, (i) => (
+                <span className="inline-block ml-1">
+                  <Star />
+                </span>
+              ))}
+              <span className="inline-block ml-1 text-accent-5">
+                <Star />
+              </span>
+            </div>
+            <div className="text-accent-6 pr-1">36 reviews</div>
+          </div>
           <div>
             <Button
               aria-label="Add to Cart"
@@ -174,7 +191,8 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             </Collapse>
             <Collapse title="Care">
               This is a limited edition production run. Printing starts when the
-              drop ends.
+              drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days
+              due to COVID-19.
             </Collapse>
           </div>
         </div>
@@ -182,7 +200,7 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
       <hr className="mt-6" />
       <section className="py-6 px-6 mb-10">
         <Text variant="sectionHeading">Related Products</Text>
-        <div className="grid grid-cols-4 py-3 gap-10">
+        <div className="grid grid-cols-2 py-2 gap-4 md:grid-cols-4 md:gap-20">
           {relatedProducts.map((p) => (
             <div
               key={p.path}
@@ -193,10 +211,10 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
                 product={p}
                 key={p.path}
                 variant="simple"
-                className="animated fadeIn w-12"
+                className="animated fadeIn"
                 imgProps={{
-                  width: 275,
+                  width: 182,
-                  height: 275,
+                  height: 182,
                 }}
               />
             </div>