feat: add dark splash screen, ref #4398

leather-io · Feb 10, 2024 · 4e8723b · 4e8723b
1 parent 787c03a
commit 4e8723b
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 5 deletions.
diff --git a/public/assets/base.css b/public/assets/base.css
@@ -44,3 +44,8 @@
   font-weight: 400;
   font-style: normal;
 }
+
+.splash-screen {
+  /* lightModeBrown.11  */
+  background-color: #12100F !important;
+}
diff --git a/public/assets/splash-screen.js b/public/assets/splash-screen.js
@@ -0,0 +1,10 @@
+var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+var body = document.querySelector('body');
+var html = document.querySelector('html');
+var defClassName = 'splash-screen';
+
+if (!isDark) {
+  body?.classList.remove(defClassName);
+  html.classList.remove(defClassName);
+}
diff --git a/public/html/index.html b/public/html/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="mode__full-page light">
+<html class="mode__full-page light splash-screen">
   <!--
     Hello! Thanks for showing interest in our code.
     Interested in joining our team? To learn more, email us:
@@ -31,8 +31,9 @@
       type="font/woff2"
     />
   </head>
-  <body>
+  <body class="splash-screen">
     <div id="app"></div>
+    <script src="/assets/splash-screen.js"></script>
     <script src="browser-polyfill.js"></script>
   </body>
 </html>
diff --git a/public/html/popup.html b/public/html/popup.html
@@ -1,12 +1,13 @@
 <!doctype html>
-<html class="mode__popup light">
+<html class="mode__popup light splash-screen">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="/assets/base.css" rel="stylesheet" />
   </head>
-  <body>
+  <body class="splash-screen">
     <div id="app"></div>
+    <script src="/assets/splash-screen.js"></script>
     <script src="browser-polyfill.js"></script>
   </body>
 </html>
diff --git a/src/app/common/theme-provider.tsx b/src/app/common/theme-provider.tsx
@@ -9,6 +9,8 @@ import { store } from '@app/store';
 import { settingsActions } from '@app/store/settings/settings.actions';
 import { useUserSelectedTheme } from '@app/store/settings/settings.selectors';
 
+import { useOnMount } from './hooks/use-on-mount';
+
 export const themeLabelMap = {
   light: 'Light',
   dark: 'Dark',
@@ -48,10 +50,26 @@ function setUserSelectedTheme(theme: UserSelectedTheme) {
 interface ThemeSwitcherProviderProps {
   children: React.JSX.Element | React.JSX.Element[];
 }
+
+function removeDefaultBg() {
+  const body = document.querySelector('body');
+  const html = document.querySelector('html');
+  const defClassName = 'splash-screen';
+
+  if (!body || !html) return;
+
+  body.classList.remove(defClassName);
+  html.classList.remove(defClassName);
+}
+
 export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps) {
   const userSelectedTheme = useUserSelectedTheme();
   const [theme, setTheme] = useState<ComputedTheme>(() => getComputedTheme(userSelectedTheme));
 
+  useOnMount(() => {
+    removeDefaultBg();
+  });
+
   useEffect(() => {
     switch (userSelectedTheme) {
       case 'system': {

diff --git a/src/app/pages/home/components/home.layout.tsx b/src/app/pages/home/components/home.layout.tsx
@@ -8,7 +8,13 @@ import { AccountInfoCard } from './account-info-card';
 type HomeLayoutProps = Record<'currentAccount' | 'children', React.ReactNode>;
 export function HomeLayout({ children }: HomeLayoutProps) {
   return (
-    <Stack alignItems="center" width="100%" mx={['', 'space.04']}>
+    <Stack
+      alignItems="center"
+      width="100%"
+      mx={['', 'space.04']}
+      animation="fadein"
+      animationDuration="900ms"
+    >
       <Stack
         data-testid={HomePageSelectors.HomePageContainer}
         maxWidth={['unset', 'unset', '882px']}