From 400e40358bfb78e0cad7fc2a880ce17ec3fbf266 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 18:13:45 -0300
Subject: [PATCH] New Container

---
 assets/base.css                                |   5 ++++-
 components/core/Footer/Footer.tsx              |  17 ++++++++++++-----
 components/icon/DoubleChevron.tsx              |   4 ++--
 components/icon/index.ts                       |   1 +
 .../product/ProductView/ProductView.module.css |  15 +++++----------
 components/product/ProductView/ProductView.tsx |   1 -
 components/ui/Container/Container.tsx          |   2 +-
 components/ui/Modal/Modal.tsx                  |   5 ++++-
 components/ui/Sidebar/Sidebar.tsx              |   2 +-
 public/{us-flag.png => flag-us.png}            | Bin
 tailwind.config.js                             |   4 ++++
 11 files changed, 34 insertions(+), 22 deletions(-)
 rename public/{us-flag.png => flag-us.png} (100%)

diff --git a/assets/base.css b/assets/base.css
index af58c1b0f..3c962b16c 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -17,9 +17,12 @@
   --red: #da3c3c;
   --pink: #e64980;
   --purple: #f81ce5;
-  --violet: #5f3dc4;
+
   --blue: #0070f3;
 
+  --violet-light: #7048e8;
+  --violet: #5f3dc4;
+
   --accents-0: #f8f9fa;
   --accents-1: #f1f3f5;
   --accents-2: #e9ecef;
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index 83bde14b0..e98cf1bda 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
 import { Logo, Container } from '@components/ui'
-import { Github } from '@components/icon'
+import { Github, DoubleChevron } from '@components/icon'
 
 interface Props {
   className?: string
@@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
@@ -79,14 +79,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
               ))}
             </ul>
           </div>
-          <div className="col-span-1 lg:col-span-6 flex lg:justify-end text-white">
-            <div>
+          <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
+            <div className="flex space-x-6 items-center h-10">
               <Github />
+              <div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center">
+                <img className="" src="/flag-us.png" />
+                <span>English</span>
+                <span className="">
+                  <DoubleChevron />
+                </span>
+              </div>
             </div>
           </div>
         </div>
         <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
-          <div className="text-white">
+          <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
           <div className="flex items-center text-accents-4">
diff --git a/components/icon/DoubleChevron.tsx b/components/icon/DoubleChevron.tsx
index a26cb755e..00ed94a60 100644
--- a/components/icon/DoubleChevron.tsx
+++ b/components/icon/DoubleChevron.tsx
@@ -1,4 +1,4 @@
-const Sun = ({ ...props }) => {
+const DoubleChevron = ({ ...props }) => {
   return (
     <svg
       width="24"
@@ -19,4 +19,4 @@ const Sun = ({ ...props }) => {
   )
 }
 
-export default Sun
+export default DoubleChevron
diff --git a/components/icon/index.ts b/components/icon/index.ts
index 399ae4f5b..e76cfa493 100644
--- a/components/icon/index.ts
+++ b/components/icon/index.ts
@@ -9,3 +9,4 @@ export { default as Check } from './Check'
 export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
 export { default as Github } from './Github'
+export { default as DoubleChevron } from './DoubleChevron'
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index a1e5df481..98264a46c 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -7,7 +7,7 @@
 }
 
 .productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-1;
+  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
   margin-right: -2rem;
   margin-left: -2rem;
   min-height: 400px;
@@ -34,7 +34,7 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-0 z-10;
+  @apply absolute top-6 left-10 z-10;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -49,7 +49,7 @@
   @screen md {
     & .name,
     & .price {
-      @apply bg-violet text-white;
+      @apply bg-violet-light text-white;
     }
   }
 }
@@ -76,13 +76,8 @@
   }
 
   @screen lg {
-    height: 150%;
-    margin-top: -10%;
-  }
-
-  @screen xl {
-    height: 170%;
-    margin-top: -19%;
+    height: 100%;
+    margin-top: -8%;
   }
 }
 
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 16d333a0c..a582981dc 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -66,7 +66,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
       />
       <div className={cn(s.root, 'fit')}>
         <div className={cn(s.productDisplay, 'fit')}>
-          <div className={s.squareBg}></div>
           <div className={s.nameBox}>
             <h1 className={s.name}>{product.name}</h1>
             <div className={s.price}>
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index 821c182cd..582c781b3 100644
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-7xl px-6', className)
+  const rootClassName = cn('mx-auto max-w-8xl px-12', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index 97f750efd..e1ff99aa0 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -21,11 +21,14 @@ const Modal: FC<Props> = ({
 }) => {
   const rootClassName = cn(s.root, className)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  usePreventScroll()
   let { modalProps } = useModal()
   let { overlayProps } = useOverlay(props, ref)
   let { dialogProps } = useDialog(props, ref)
 
+  usePreventScroll({
+    isDisabled: !show,
+  })
+
   return (
     <div className={rootClassName}>
       <FocusScope contain restoreFocus autoFocus>
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index a104ae42d..6f700c221 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveFrom="translate-x-0"
                   leaveTo="translate-x-full"
                 >
-                  <div className="h-full w-screen max-w-lg">
+                  <div className="h-full w-screen max-w-xl">
                     <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
                       {children}
                     </div>
diff --git a/public/us-flag.png b/public/flag-us.png
similarity index 100%
rename from public/us-flag.png
rename to public/flag-us.png
diff --git a/tailwind.config.js b/tailwind.config.js
index 03b3c7f7b..4ef5bb95c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,9 @@ module.exports = {
   purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      maxWidth: {
+        '8xl': '1920px',
+      },
       backgroundOpacity: {
         075: '0.75',
       },
@@ -26,6 +29,7 @@ module.exports = {
         'accents-8': 'var(--accents-8)',
         'accents-9': 'var(--accents-9)',
         violet: 'var(--violet)',
+        'violet-light': 'var(--violet-light)',
         pink: 'var(--pink)',
         cyan: 'var(--cyan)',
         blue: 'var(--blue)',