New Container

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;

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 className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
-            <div>
+            <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">

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

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'

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%;
+    height: 100%;
-    margin-top: -10%;
+    margin-top: -8%;
-  }
-
-  @screen xl {
-    height: 170%;
-    margin-top: -19%;
   }
 }
 

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}>

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

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>

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>

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)',