From e881121913a3df21ad226cd4d516c995574b1bdc Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 15 Oct 2020 16:25:44 -0300
Subject: [PATCH] Normalizing Style Sheets

---
 components/core/Layout/Layout.module.css |  4 ++++
 components/core/Layout/Layout.tsx        | 21 ++++++++++++++-------
 pages/_app.tsx                           | 18 +++++++-----------
 3 files changed, 25 insertions(+), 18 deletions(-)
 create mode 100644 components/core/Layout/Layout.module.css

diff --git a/components/core/Layout/Layout.module.css b/components/core/Layout/Layout.module.css
new file mode 100644
index 000000000..54fc80eb8
--- /dev/null
+++ b/components/core/Layout/Layout.module.css
@@ -0,0 +1,4 @@
+.root {
+  @apply h-full bg-primary mx-auto;
+  max-width: 2460px;
+}
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 603f1a50f..a9039b1fd 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,10 +1,13 @@
 import cn from 'classnames'
 import { FC } from 'react'
-import { CommerceProvider } from '@lib/bigcommerce'
+
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
 import { UIProvider, useUI } from '@components/ui/context'
+import s from './Layout.module.css'
+import { ThemeProvider } from 'next-themes'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 
 interface Props {
   className?: string
@@ -12,7 +15,7 @@ interface Props {
 }
 
 const CoreLayout: FC<Props> = ({ className, children }) => {
-  const rootClassName = cn('h-full bg-primary', className)
+  const rootClassName = cn(s.root, className)
   const { displaySidebar, closeSidebar } = useUI()
 
   return (
@@ -34,11 +37,15 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
 }
 
 const Layout: FC<Props> = (props) => (
-  <CommerceProvider locale="en-us">
-    <UIProvider>
-      <CoreLayout {...props} />
-    </UIProvider>
-  </CommerceProvider>
+  <UIProvider>
+    <ThemeProvider>
+      <SSRProvider>
+        <OverlayProvider>
+          <CoreLayout {...props} />
+        </OverlayProvider>
+      </SSRProvider>
+    </ThemeProvider>
+  </UIProvider>
 )
 
 export default Layout
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 787a7758d..0339d477f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,10 +5,10 @@ import 'animate.css'
 import { FC } from 'react'
 import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
-import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
+
 import config from '../config.json'
 import Head from 'next/head'
+import { CommerceProvider } from '@lib/bigcommerce'
 
 const Noop: FC = ({ children }) => <>{children}</>
 
@@ -22,15 +22,11 @@ export default function MyApp({ Component, pageProps }: AppProps) {
         <link rel="manifest" href="/site.webmanifest" key="site-manifest" />
       </Head>
       <DefaultSeo {...config.seo} />
-      <ThemeProvider>
-        <SSRProvider>
-          <OverlayProvider>
-            <Layout>
-              <Component {...pageProps} />
-            </Layout>
-          </OverlayProvider>
-        </SSRProvider>
-      </ThemeProvider>
+      <CommerceProvider locale="en-us">
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </CommerceProvider>
     </>
   )
 }