feat: add dark splash screen, ref #4398

leather-io · Feb 20, 2024 · 613fc9d · 613fc9d
1 parent c49f7e9
commit 613fc9d
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 1 deletion.
diff --git a/public/assets/base.css b/public/assets/base.css
@@ -44,3 +44,11 @@
   font-weight: 400;
   font-style: normal;
 }
+
+#splash-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/public/assets/splash-screen.js b/public/assets/splash-screen.js
@@ -0,0 +1,11 @@
+var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+var splashScreen = document.getElementById('splash-screen');
+
+// set accent.background-secondary
+if (isDark) {
+  // darkModeInk.2
+  splashScreen.style.backgroundColor = '#2C2A24';
+} else {
+  // lightModeInk.3
+  splashScreen.style.backgroundColor = '#F5F1ED';
+}
diff --git a/public/html/index.html b/public/html/index.html
@@ -32,7 +32,9 @@
     />
   </head>
   <body>
+    <div id="splash-screen"></div>
     <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
@@ -6,7 +6,9 @@
     <link href="/assets/base.css" rel="stylesheet" />
   </head>
   <body>
+    <div id="splash-screen"></div>
     <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,19 @@ function setUserSelectedTheme(theme: UserSelectedTheme) {
 interface ThemeSwitcherProviderProps {
   children: React.JSX.Element | React.JSX.Element[];
 }
+
+function removeSplashScreen() {
+  document.getElementById('splash-screen')?.remove();
+}
+
 export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps) {
   const userSelectedTheme = useUserSelectedTheme();
   const [theme, setTheme] = useState<ComputedTheme>(() => getComputedTheme(userSelectedTheme));
 
+  useOnMount(() => {
+    removeSplashScreen();
+  });
+
   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="500ms"
+    >
       <Stack
         data-testid={HomePageSelectors.HomePageContainer}
         maxWidth={['unset', 'unset', '882px']}