add logo

willpinha · Oct 16, 2024 · 18ef81e · 18ef81e
1 parent 7318137
commit 18ef81e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/app/components/loading/WelcomeLoading.tsx b/app/components/loading/WelcomeLoading.tsx
@@ -1,4 +1,4 @@
-import { Flex, Title } from "@mantine/core";
+import { Center, Flex, Image, Stack, Title } from "@mantine/core";
 import { useTimeout } from "@mantine/hooks";
 import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useState } from "react";
@@ -24,9 +24,24 @@ function Base() {
 					color: "white",
 				}}
 			>
-				<Title>
-					<TextTyping text="Mantine Themes." />
-				</Title>
+				<Stack>
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						transition={{ duration: 0.5 }}
+					>
+						<Center>
+							<Image
+								src="/logo-light.svg"
+								alt="Mantine Themes"
+								w={100}
+							/>
+						</Center>
+					</motion.div>
+					<Title>
+						<TextTyping text="Mantine Themes." />
+					</Title>
+				</Stack>
 			</Flex>
 		</motion.div>
 	);

diff --git a/app/root.tsx b/app/root.tsx
@@ -18,7 +18,7 @@ export const links: LinksFunction = () => [
 	},
 	{
 		rel: "icon",
-		href: "/logo.svg",
+		href: "/logo-dark.svg",
 	},
 ];
 
@@ -33,12 +33,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
 					name="viewport"
 					content="width=device-width, initial-scale=1"
 				/>
-				<ColorSchemeScript />
+				<ColorSchemeScript defaultColorScheme="dark" />
 				<Meta />
 				<Links />
 			</head>
 			<body>
-				<MantineProvider theme={themes[currentThemeName].mantineTheme}>
+				<MantineProvider
+					theme={themes[currentThemeName].mantineTheme}
+					defaultColorScheme="dark"
+				>
 					<WelcomeLoading />
 					{children}
 				</MantineProvider>

diff --git a/app/themes/christimas.ts → app/themes/christmas.ts b/app/themes/christimas.ts → app/themes/christmas.ts
@@ -1,7 +1,7 @@
 import { createMantineTheme } from "~/lib/create-mantine-theme";
 import { Theme } from "~/lib/theme";
 
-export const christimas: Theme = {
+export const christmas: Theme = {
 	label: "🎄 Christmas",
 	mantineTheme: createMantineTheme({
 		baseHue: 140,

diff --git a/app/themes/index.ts b/app/themes/index.ts
@@ -1,9 +1,9 @@
 import { ThemeName } from "~/lib/theme";
-import { christimas } from "./christimas";
+import { christmas } from "./christmas";
 import { dracula } from "./dracula";
 import { forest } from "./forest";
 
-export const themes = { christimas, dracula, forest };
+export const themes = { christmas, dracula, forest };
 
 export const sortedThemeNames = Object.keys(themes)
 	.map((key) => key as ThemeName)

diff --git a/public/logo-dark.svg b/public/logo-dark.svg