From e59b59ef8dd612ed6c92f5ea857336e6c3fc8bdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= <julianbenegas99@gmail.com>
Date: Thu, 22 Oct 2020 20:08:47 -0300
Subject: [PATCH] cover full screen and center

---
 components/product/ProductSlider/ProductSlider.module.css | 6 +++---
 components/product/ProductSlider/ProductSlider.tsx        | 6 +++---
 components/product/ProductView/ProductView.module.css     | 5 ++---
 components/product/ProductView/ProductView.tsx            | 8 +-------
 components/ui/Container/Container.tsx                     | 5 +++--
 5 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index a294a5f5c..e5e6b4fa7 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -5,7 +5,7 @@
 
 .leftControl,
 .rightControl {
-  @apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+  @apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
 }
 
 .leftControl {
@@ -13,11 +13,11 @@
 }
 
 .rightControl {
-  @apply right-6 rotate-180 transform;
+  @apply right-6;
 }
 
 .control {
-  @apply opacity-0 transition-all duration-150;
+  @apply opacity-0 transition duration-150;
 }
 
 .root:hover .control {
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 9f36961af..11d8f5f4f 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -1,6 +1,6 @@
-import { ArrowLeft } from '@components/icon'
 import { useKeenSlider } from 'keen-slider/react'
 import React, { Children, FC, isValidElement, useState } from 'react'
+import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
 import cn from 'classnames'
 
 import s from './ProductSlider.module.css'
@@ -17,10 +17,10 @@ const ProductSlider: FC = ({ children }) => {
   return (
     <div className={s.root}>
       <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
-        <ArrowLeft />
+        <HiChevronLeft />
       </button>
       <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
-        <ArrowLeft />
+        <HiChevronRight />
       </button>
       <div ref={ref} className="keen-slider h-full">
         {Children.map(children, (child) => {
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 4f102a61c..b66c7bba1 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -17,7 +17,7 @@
   }
 
   @screen lg {
-    @apply mx-0 col-span-7;
+    @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
   }
@@ -52,8 +52,7 @@
   @apply flex flex-col col-span-1;
 
   @screen lg {
-    @apply col-span-5;
-    padding-top: 5rem;
+    @apply col-span-5 pl-12 pt-20;
   }
 }
 
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index a582981dc..fc3c5acac 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -46,7 +46,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
   }
 
   return (
-    <Container>
+    <Container className="max-w-none w-full" clean>
       <NextSeo
         title={product.name}
         description={product.description}
@@ -88,12 +88,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
               ))}
             </ProductSlider>
           </div>
-
-          {!validMedia && (
-            <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
-              <img src="/slider-arrows.png" />
-            </div>
-          )}
         </div>
 
         <div className={s.sidebar}>
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index 582c781b3..f037d8486 100644
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@@ -5,10 +5,11 @@ interface Props {
   className?: string
   children?: any
   el?: HTMLElement
+  clean?: boolean
 }
 
-const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-8xl px-12', className)
+const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
+  const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement