From e03c2f88afb7b32b72b0b4aa857b15b1287897a4 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 24 Jun 2021 21:07:07 +0100
Subject: [PATCH] Fix: Load Theme early for onboarding.

---
 index.html                                    |  5 ++++
 src/context/index.tsx                         | 24 ++++++++++---------
 .../modals/Onboarding.module.scss             |  3 +++
 src/styles/_page.scss                         |  2 +-
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 20826661..c83d63f4 100644
--- a/index.html
+++ b/index.html
@@ -11,4 +11,9 @@
     <div id="app"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+  <style>
+    html {
+      background-color: #191919;
+    }
+  </style>
 </html>
diff --git a/src/context/index.tsx b/src/context/index.tsx
index 6bb0de8f..4cbbb76b 100644
--- a/src/context/index.tsx
+++ b/src/context/index.tsx
@@ -13,17 +13,19 @@ export default function Context({ children }: { children: Children }) {
     return (
         <Router>
             <State>
-                <Settings>
-                    <Locale>
-                        <Intermediate>
-                            <Client>
-                                <Voice>
-                                    <Theme>{children}</Theme>
-                                </Voice>
-                            </Client>
-                        </Intermediate>
-                    </Locale>
-                </Settings>
+                <Theme>
+                    <Settings>
+                        <Locale>
+                            <Intermediate>
+                                <Client>
+                                    <Voice>
+                                        {children}
+                                    </Voice>
+                                </Client>
+                            </Intermediate>
+                        </Locale>
+                    </Settings>
+                </Theme>
             </State>
         </Router>
     );
diff --git a/src/context/intermediate/modals/Onboarding.module.scss b/src/context/intermediate/modals/Onboarding.module.scss
index f3ed2dde..93f5e4b9 100644
--- a/src/context/intermediate/modals/Onboarding.module.scss
+++ b/src/context/intermediate/modals/Onboarding.module.scss
@@ -1,4 +1,5 @@
 .onboarding {
+    height: 100vh;
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -7,7 +8,9 @@
         flex: 1;
 
         &.header {
+            gap: 8px;
             padding: 3em;
+            display: flex;
             text-align: center;
 
             h1 {
diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index c99320ab..124e530a 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -9,9 +9,9 @@
 
 html {
     // contain: content;
-    background: var(--background);
     background-size: cover !important;
     background-repeat: no-repeat !important;
+    background-color: var(--background) !important;
 }
 
 html,