chore: re-org css and fix incorrectly nested provider

Author: matthewlilley

apps/_root/pages/_app.tsx

@@ -1,7 +1,6 @@
 import '@sushiswap/ui/index.css'
-import '../variables.css'
-import '../styles/index.css'
-import { App, ThemeProvider } from '@sushiswap/ui'
+import '../varaibles.css'
+import { App } from '@sushiswap/ui'
 import { Analytics } from '@vercel/analytics/react'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'

apps/_root/pages/index.tsx

@@ -17,27 +17,52 @@ const Index = () => {
   const isSmallScreen = useIsSmScreen()
 
   return (
-    <ThemeProvider forcedTheme="dark">
-      <Header />
-      <MotionConfig reducedMotion={isSmallScreen ? 'always' : 'user'}>
-        <article className="my-20 w-full">
-          <Hero />
-          <Stats />
-
-          <div className="bg-black overflow-x-hidden">
-            <Partners />
-            <Story />
-            <div className="flex flex-col gap-2 border-t border-neutral-200/10">
-              <BuildWealth />
-              <Ecosystem />
-              <BuildFuture />
-              <NeedHelp />
+    <>
+      <ThemeProvider forcedTheme="dark">
+        <Header />
+        <MotionConfig reducedMotion={isSmallScreen ? 'always' : 'user'}>
+          <article className="my-20 w-full">
+            <Hero />
+            <Stats />
+
+            <div className="bg-black overflow-x-hidden">
+              <Partners />
+              <Story />
+              <div className="flex flex-col gap-2 border-t border-neutral-200/10">
+                <BuildWealth />
+                <Ecosystem />
+                <BuildFuture />
+                <NeedHelp />
+              </div>
             </div>
-          </div>
-        </article>
-      </MotionConfig>
-      <App.Footer />
-    </ThemeProvider>
+          </article>
+        </MotionConfig>
+        <App.Footer />
+      </ThemeProvider>
+      <style global jsx>{`
+        html {
+          background-color: black !important;
+          /* color: white; */
+        }
+
+        button:focus {
+          outline: none !important;
+        }
+
+        input:focus {
+          box-shadow: none !important;
+        }
+
+        .no-scrollbar::-webkit-scrollbar {
+          display: none;
+        }
+
+        .no-scrollbar {
+          -ms-overflow-style: none; /* IE and Edge */
+          scrollbar-width: none; /* Firefox */
+        }
+      `}</style>
+    </>
   )
 }
 

apps/_root/pages/swap/index.tsx

@@ -15,10 +15,10 @@ import { ThemeProvider } from '@sushiswap/ui'
 
 export const Page: FC = () => {
   return (
-    <TokenProvider>
-      <SplashController>
-        <SwapProvider>
-          <ThemeProvider>
+    <ThemeProvider>
+      <TokenProvider>
+        <SplashController>
+          <SwapProvider>
             <Onramper.Provider>
               <Header />
               <Container maxWidth={520} className="p-4 mx-auto mt-16 mb-[86px] flex flex-col gap-4">
@@ -35,10 +35,10 @@ export const Page: FC = () => {
                 <div className="h-[68px] w-full" />
               </Container>
             </Onramper.Provider>
-          </ThemeProvider>
-        </SwapProvider>
-      </SplashController>
-    </TokenProvider>
+          </SwapProvider>
+        </SplashController>
+      </TokenProvider>
+    </ThemeProvider>
   )
 }
 

apps/_root/styles/index.css

@@ -0,0 +1,17 @@
+:root,
+::before,
+::after {
+  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  color-scheme: dark;
+  --background-color: #0f172a;
+  --color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --background-color: #0f172a;
+    --color: #ffffff;
+  }
+}