fix(src): ⬆️ Migrate Styling and fix bugs that happened during migration

This commit is fully working. Do not use the last migration commits as a base. No Mantine v5 and v6 compatibility
BuildTheEarth · Sep 23, 2023 · 5d8f9e2 · 5d8f9e2
1 parent f0e7263
commit 5d8f9e2
Show file tree

Hide file tree

Showing 20 changed files with 263 additions and 249 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
 		"@emotion/react": "^11.10.4",
 		"@emotion/server": "^11.10.0",
 		"@icons-pack/react-simple-icons": "^5.5.0",
-		"@mantine/carousel": "^5.2.6",
+		"@mantine/carousel": "^7.0.0",
 		"@mantine/core": "^7.0.0",
 		"@mantine/dates": "^7.0.0",
 		"@mantine/dropzone": "^7.0.0",

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,6 +1,7 @@
 import { Anchor, Container, Group } from '@mantine/core';
 
 import { LanguageSwitcher } from './LanguageSwitcher';
+import Link from 'next/link';
 import React from 'react';
 import classes from '../styles/components/Footer.module.css';
 import { useTranslation } from 'react-i18next';
@@ -13,15 +14,15 @@ interface FooterSimpleProps {
 export default function Footer({ links, style }: FooterSimpleProps) {
 	const { t } = useTranslation();
 	const items = links.map((link) => (
-		<Anchor<'a'> color="dimmed" key={link.translation} href={link.link} size="sm">
+		<Anchor component={Link} c="dimmed" key={link.translation} href={link.link} size="sm">
 			{t(`links.${link.translation}`)}
 		</Anchor>
 	));
 
 	return (
 		<div className={classes.footer} style={style}>
-			<Container className={classes.inner} size={'xl'}>
-				<Anchor<'a'> style={{ fontSize: '14px' }} color="#666" variant="text">
+			<Container className={classes.inner} size="xl">
+				<Anchor<'a'> style={{ fontSize: '14px' }} c="dimmed" variant="text">
 					{t('copyright', { year: new Date().getFullYear() })}
 				</Anchor>
 				<Group className={classes.links}>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,8 +1,10 @@
 import {
 	ActionIcon,
+	Anchor,
 	AppShellHeader,
 	Avatar,
 	Badge,
+	Box,
 	Burger,
 	Button,
 	Container,
@@ -26,6 +28,7 @@ import { useClickOutside, useDisclosure } from '@mantine/hooks';
 
 import Icon from './Icon';
 import { IconSettings } from '@tabler/icons';
+import Link from 'next/link';
 import classes from '../styles/components/Header.module.css';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
@@ -48,22 +51,22 @@ const Header = ({ links, style }: HeaderProps) => {
 	const theme = useMantineTheme();
 	const mobilePaperRef = useClickOutside(() => handler.close());
 	const { data: session, status } = useSession();
+	console.log(router.pathname);
 	const items = links.map((link) => (
-		<a
+		<Anchor
+			component={Link}
 			key={link.translation}
 			className={classes.link}
 			onClick={() => {
-				router.push(link.link);
 				handler.close();
 			}}
 			href={link.link}
-			data-linkactive={router.pathname.includes(link.link)}
 		>
 			{t(`links.${link.translation}`)}
-		</a>
+		</Anchor>
 	));
 	return (
-		<AppShellHeader h={60} className={classes.root} /*fixed*/ style={style}>
+		<Box className={classes.root} /*fixed*/ style={{ ...style, height: 60 }}>
 			<Container className={classes.header} size={'xl'}>
 				<Group gap={5} className={classes.logo} onClick={() => router.push('/')}>
 					<img src="/logo.gif" alt="Mantine" height="40" style={{ marginRight: '4px' }} />
@@ -102,7 +105,7 @@ const Header = ({ links, style }: HeaderProps) => {
 							</Menu.Target>
 							<Menu.Dropdown>
 								<Menu.Item leftSection={<FileUpload size={14} />}>{t('user.upload')}</Menu.Item>
-								<Menu.Item leftSection={<IconSettings size={14} />} component="a" href="/me/settings">
+								<Menu.Item leftSection={<IconSettings size={14} />} component={Link} href="/me/settings">
 									Settings
 								</Menu.Item>
 								<Menu.Divider />
@@ -124,14 +127,14 @@ const Header = ({ links, style }: HeaderProps) => {
 						</Menu>
 					) : (
 						<>
-							<a
+							<Anchor
 								className={classes.link}
 								onClick={() => {
 									signIn('keycloak');
 								}}
 							>
 								{t('auth.signin')}
-							</a>
+							</Anchor>
 							<Button
 								style={{ fontWeight: '500', paddingLeft: '12px', paddingRight: '12px', height: '32px' }}
 								onClick={() => router.push('/getstarted')}
@@ -192,7 +195,7 @@ const Header = ({ links, style }: HeaderProps) => {
 					)}
 				</Transition>
 			</Container>
-		</AppShellHeader>
+		</Box>
 	);
 };
 
@@ -224,13 +227,12 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 					backgroundColor: scheme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
 					background: `url("${props.backgroundImage}") center center / cover`,
 					backgroundPositionY: bgPosY,
-
 					width: '100%',
 					height: '50vh',
 				}}
-			></motion.div>
+			/>
 			<Group
-				justify="space-between"
+				justify="center"
 				style={{
 					width: '100%',
 					backgroundColor: scheme.colorScheme === 'dark' ? theme.colors.dark[7] : '#fff',
@@ -296,13 +298,27 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 									icon = <Icon icon={social.icon} />;
 							}
 							return (
-								<ActionIcon component="a" href={social.url} target="_blank" key={social.name}>
+								<ActionIcon
+									component={Link}
+									href={social.url}
+									target="_blank"
+									variant="transparent"
+									color="gray"
+									key={social.name}
+								>
 									{icon}
 								</ActionIcon>
 							);
 						})}
 						{props.invite && (
-							<ActionIcon component="a" href={props.invite} target="_blank" key={'discord-inv'}>
+							<ActionIcon
+								component={Link}
+								href={props.invite}
+								target="_blank"
+								variant="transparent"
+								color="gray"
+								key={'discord-inv'}
+							>
 								<Discord />
 							</ActionIcon>
 						)}
@@ -311,7 +327,7 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 								{props.userStatus}
 							</Badge>
 						) : (
-							<Button component="a" href={props.applyHref}>
+							<Button component={Link} href={props.applyHref || ''}>
 								Apply
 							</Button>
 						)}
@@ -325,8 +341,7 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 							],
 							props.id,
 						) && (
-							<Button component="a" href={props.settingsHref} variant="outline">
-								{/*TODO: Add Permision check */}
+							<Button component={Link} href={props.settingsHref || ''} variant="outline">
 								Settings
 							</Button>
 						)}

diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
@@ -26,7 +26,7 @@ export function LanguageSwitcher() {
 	const changeLanguage = (lang: { label: string; code: string; flag: string }) => {
 		setSelected(lang);
 		const { pathname, asPath, query } = router;
-		router.push(pathname, pathname, { locale: lang.code });
+		router.push({ pathname, query }, asPath, { locale: lang.code });
 	};
 
 	const items = languages.map((item) => (

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -1,9 +1,10 @@
-import { BackgroundImage, Center, Container, Text, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { BackgroundImage, Center, Container, Paper, Text, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import Header, { LogoHeader } from './Header';
 import { NextSeo, NextSeoProps } from 'next-seo';
 
 import Footer from './Footer';
-import Header from './Header';
 import React from 'react';
+import classes from '../styles/components/Page.module.css';
 import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/router';
 import { useScrollPosition } from '../hooks/useScrollPosition';
@@ -46,31 +47,34 @@ const Page = (props: PageProps) => {
 				description={props.description}
 				{...props.seo}
 			/>
-			<div
-				style={{
-					backgroundColor: scheme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-					width: 'calc(100vw - (100vw - 100%))',
-					minHeight: '100vh',
-					display: 'flex',
-					flexDirection: 'column',
-				}}
+			{!props.disabled?.header && (
+				<Header
+					links={[
+						{ link: '/faq', translation: 'faq' },
+						{ link: '/map', translation: 'map' },
+						{ link: '/teams', translation: 'teams' },
+						{ link: '/contact', translation: 'contact' },
+					]}
+					style={{
+						opacity: props.hideHeaderOnInitialScroll && scrollY <= 20 ? 0 : 1,
+						transition: 'opacity 0.2s linear',
+						zIndex: 9999,
+					}}
+				/>
+			)}
+			<Paper
+				className={classes.root}
+				// style={
+				// 	{
+				// backgroundColor: 'var(--mantine-color-dark-8)',
+				// backgroundColor: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-8))',
+				// width: 'calc(100vw - (100vw - 100%))',
+				// minHeight: '100vh',
+				// display: 'flex',
+				// flexDirection: 'column',
+				// 	}
+				// }
 			>
-				{!props.disabled?.header && (
-					<Header
-						links={[
-							{ link: '/faq', translation: 'faq' },
-							{ link: '/map', translation: 'map' },
-							{ link: '/teams', translation: 'teams' },
-							{ link: '/contact', translation: 'contact' },
-						]}
-						style={{
-							opacity: props.hideHeaderOnInitialScroll && scrollY <= 20 ? 0 : 1,
-							transition: 'opacity 0.2s linear',
-							zIndex: 9999,
-						}}
-					/>
-				)}
-
 				{props.head && (
 					<BackgroundImage
 						src={props.head?.image || ''}
@@ -109,29 +113,9 @@ const Page = (props: PageProps) => {
 				{props.fullWidth ? (
 					props.children
 				) : (
-					<Container
-						size="xl"
-						style={{
-							backgroundColor: scheme.colorScheme === 'dark' ? theme.colors.dark[7] : '#ffffff',
-							boxShadow: 'none',
-							marginTop: 'calc(var(--mantine-spacing-xl) * 2)',
-							marginBottom: 'calc(var(--mantine-spacing-xl) * 2)',
-							padding:
-								!matches || props.smallPadding
-									? 'calc(var(--mantine-spacing-xs) * 3)'
-									: 'calc(var(--mantine-spacing-xl) * 3)',
-							paddingBottom: !matches
-								? 'calc(var(--mantine-spacing-xs) * 1.5)'
-								: 'calc(var(--mantine-spacing-xl) * 1.5)',
-							paddingTop: !matches ? 'var(--mantine-spacing-xs' : 'var(--mantine-spacing-xl',
-							flex: 1,
-							width: '100%',
-							position: 'relative',
-							...props.style,
-						}}
-					>
+					<ContentContainer style={props.style} smallPadding={props.smallPadding}>
 						{props.children}
-					</Container>
+					</ContentContainer>
 				)}
 
 				{!props.disabled?.footer && (
@@ -143,8 +127,31 @@ const Page = (props: PageProps) => {
 						]}
 					/>
 				)}
-			</div>
+			</Paper>
 		</>
 	);
 };
+
+export const LogoPage = (props: PageProps & { headData: any; team: string }) => {
+	return (
+		<Page {...props} fullWidth>
+			<LogoHeader
+				{...props.headData}
+				applyHref={`${props.team}/apply`}
+				settingsHref={`${props.team}/manage/settings`}
+			/>
+			<ContentContainer style={props.style} smallPadding={props.smallPadding}>
+				{props.children}
+			</ContentContainer>
+		</Page>
+	);
+};
 export default Page;
+
+const ContentContainer = (props: { children: any; smallPadding?: boolean; style?: React.CSSProperties }) => {
+	return (
+		<Container className={classes.container} size="lg" style={props.style} data-smallpadding={props.smallPadding}>
+			{props.children}
+		</Container>
+	);
+};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -25,7 +25,6 @@ function ErrorPage() {
 						filter: 'brightness(0.5)',
 						width: '100%',
 						height: 'calc(100vh - 60px)',
-						marginTop: 60,
 					}}
 				></div>
 				<Center
@@ -38,7 +37,7 @@ function ErrorPage() {
 					}}
 				>
 					<div>
-						<Title style={{ color: '#ffffff', fontSize: 220 }} ta="center" order={1}>
+						<Title style={{ color: '#ffffff', fontSize: 220, userSelect: 'none' }} ta="center" order={1}>
 							404
 						</Title>
 						<Title style={{ color: '#ffffff' }} ta="center" order={1}>

diff --git a/src/pages/500.tsx b/src/pages/500.tsx
@@ -25,7 +25,6 @@ function ErrorPage() {
 						filter: 'brightness(0.5)',
 						width: '100%',
 						height: 'calc(100vh - 60px)',
-						marginTop: 60,
 					}}
 				></div>
 				<Center
@@ -38,7 +37,7 @@ function ErrorPage() {
 					}}
 				>
 					<div>
-						<Title style={{ color: '#ffffff', fontSize: 220 }} ta="center" order={1}>
+						<Title style={{ color: '#ffffff', fontSize: 220, userSelect: 'none' }} ta="center" order={1}>
 							500
 						</Title>
 						<Title style={{ color: '#ffffff' }} ta="center" order={1}>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,8 +1,9 @@
 import 'mapbox-gl/dist/mapbox-gl.css';
 import '../styles/globals.css';
-import '../styles/nprogress.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/core/styles.css';
+import '@mantine/nprogress/styles.css';
+import '@mantine/carousel/styles.css';
 
 import { useHotkeys, useLocalStorage } from '@mantine/hooks';
 
@@ -30,9 +31,17 @@ function MyApp({ Component, pageProps }: AppProps) {
 		<SessionProvider session={pageProps.session}>
 			<DefaultSeo {...defaultSeo} />
 			<MantineProvider
+				defaultColorScheme="dark"
 				theme={{
 					fontFamily:
 						'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+					breakpoints: {
+						xs: '36em',
+						sm: '48em',
+						md: '62em',
+						lg: '75em',
+						xl: '88em',
+					},
 				}}
 			>
 				<Notifications />