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 2082666..c83d63f 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 6bb0de8..4cbbb76 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 f3ed2dd..93f5e4b 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 c99320a..124e530 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,
--
GitLab