fix: tweak default mantine theme

config/project.ts

@@ -1,4 +1,4 @@
-export const APP_COLOR = '#f0eef6';
+export const PRIMARY_COLOR = '#3f88c5';
 
 export const PROJECT_NAME = 'MyLinks';
 export const PROJECT_DESCRIPTION =

inertia/components/common/floating_navbar/user_dropdown.module.css

@@ -1,6 +1,6 @@
 .user {
 	color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm) !important;
 	border-radius: var(--mantine-radius-sm);
 	transition: background-color 100ms ease;
 

inertia/layouts/_base_layout.tsx

@@ -1,7 +1,13 @@
 import { api } from '#adonis/api';
+import { PRIMARY_COLOR } from '#config/project';
 import { PageProps } from '@adonisjs/inertia/types';
 import { router, usePage } from '@inertiajs/react';
-import { ColorSchemeScript, MantineProvider } from '@mantine/core';
+import {
+	ColorSchemeScript,
+	createTheme,
+	MantineProvider,
+	rem,
+} from '@mantine/core';
 import '@mantine/core/styles.css';
 import '@mantine/spotlight/styles.css';
 import { createTuyau } from '@tuyau/client';
@@ -14,6 +20,57 @@ import '../styles/index.css';
 const TRANSITION_IN_CLASS = '__transition_fadeIn';
 const TRANSITION_OUT_CLASS = '__transition_fadeOut';
 
+const customTheme = createTheme({
+	colors: {
+		blue: [
+			'#e7f5ff',
+			'#d0ebff',
+			'#a5d8ff',
+			'#74c0fc',
+			'#4dabf7',
+			PRIMARY_COLOR,
+			'#228be6',
+			'#1c7ed6',
+			'#1971c2',
+			'#1864ab',
+		],
+	},
+	primaryColor: 'blue',
+	fontFamily: 'Poppins, sans-serif',
+	respectReducedMotion: true,
+	components: {
+		Button: {
+			styles: {
+				root: {
+					fontWeight: '400',
+				},
+			},
+		},
+		Badge: {
+			styles: {
+				root: {
+					fontWeight: '500',
+				},
+			},
+		},
+	},
+	headings: {
+		fontWeight: '400',
+
+		sizes: {
+			h1: {
+				fontSize: rem(36),
+				lineHeight: '1.4',
+			},
+			h2: { fontSize: rem(30), lineHeight: '1.2' },
+			h3: { fontSize: rem(24), lineHeight: '1.2' },
+			h4: { fontSize: rem(20), lineHeight: '1.2' },
+			h5: { fontSize: rem(16), lineHeight: '1.2' },
+			h6: { fontSize: rem(12), lineHeight: '1.2' },
+		},
+	},
+});
+
 export function BaseLayout({ children }: { children: ReactNode }) {
 	const { i18n } = useTranslation();
 	dayjs.locale(i18n.language);
@@ -62,7 +119,7 @@ export function BaseLayout({ children }: { children: ReactNode }) {
 	return (
 		<TuyauProvider client={tuyauClient}>
 			<ColorSchemeScript />
-			<MantineProvider>{children}</MantineProvider>
+			<MantineProvider theme={customTheme}>{children}</MantineProvider>
 		</TuyauProvider>
 	);
 }

inertia/layouts/form_layout.tsx

@@ -3,7 +3,6 @@ import { route } from '@izzyjs/route/client';
 import { Anchor, Button, Container, Group, rem, Title } from '@mantine/core';
 import { FormEvent, PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Footer } from '~/components/common/footer/footer';
 import i18n from '~/i18n';
 import { BaseLayout } from '~/layouts/_base_layout';
 import { appendCollectionId } from '~/lib/navigation';
@@ -40,7 +39,7 @@ function FormLayout({
 				display: 'flex',
 				flexDirection: 'column',
 			}}
-			pt={80}
+			pt={rem(40)}
 		>
 			<main
 				style={{
@@ -87,7 +86,6 @@ function FormLayout({
 							{textSubmitButton}
 						</Button>
 					</Group>
-					<Footer />
 				</form>
 			</main>
 		</Container>

inertia/pages/home.module.css

@@ -17,6 +17,7 @@
 }
 
 .description {
+	color: var(--mantine-color-dimmed);
 	text-align: center;
 
 	@media (max-width: $mantine-breakpoint-sm) {

vite.config.ts

@@ -1,4 +1,8 @@
-import { APP_COLOR, PROJECT_DESCRIPTION, PROJECT_NAME } from '#config/project';
+import {
+	PRIMARY_COLOR,
+	PROJECT_DESCRIPTION,
+	PROJECT_NAME,
+} from '#config/project';
 import { getDirname } from '@adonisjs/core/helpers';
 import inertia from '@adonisjs/inertia/client';
 import adonisjs from '@adonisjs/vite/client';
@@ -19,8 +23,8 @@ export default defineConfig({
 				name: PROJECT_NAME,
 				short_name: PROJECT_NAME,
 				description: PROJECT_DESCRIPTION,
-				theme_color: APP_COLOR,
-				background_color: APP_COLOR,
+				theme_color: PRIMARY_COLOR,
+				background_color: PRIMARY_COLOR,
 				scope: '/',
 				display: 'standalone',
 				orientation: 'portrait',