From 5d8f9e2a00c1efc50c9a4f00de395c3fbbc09f87 Mon Sep 17 00:00:00 2001 From: Nudesuppe42 Date: Sat, 23 Sep 2023 17:10:53 +0200 Subject: [PATCH] fix(src): :arrow_up: 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 --- package.json | 2 +- src/components/Footer.tsx | 7 +- src/components/Header.tsx | 49 +++++--- src/components/LanguageSwitcher.tsx | 2 +- src/components/Page.tsx | 105 ++++++++++-------- src/pages/404.tsx | 3 +- src/pages/500.tsx | 3 +- src/pages/_app.tsx | 11 +- src/pages/_error.tsx | 3 +- src/pages/index.tsx | 5 +- src/pages/legal/privacy.tsx | 7 +- src/pages/map.tsx | 2 +- src/pages/teams/[team]/index.tsx | 101 +++++++---------- src/pages/teams/[team]/manage/apply.tsx | 5 +- src/styles/components/Footer.module.css | 27 ++--- src/styles/components/Header.module.css | 71 ++++++------ .../components/LanguageSwitcher.module.css | 50 ++++----- src/styles/components/Page.module.css | 26 +++++ src/styles/nprogress.css | 18 --- yarn.lock | 15 +-- 20 files changed, 263 insertions(+), 249 deletions(-) create mode 100644 src/styles/components/Page.module.css delete mode 100644 src/styles/nprogress.css diff --git a/package.json b/package.json index 678e51fb..c0be9d8e 100644 --- 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 index 5516d73e..06206949 100644 --- 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) => ( - color="dimmed" key={link.translation} href={link.link} size="sm"> + {t(`links.${link.translation}`)} )); return (
- - style={{ fontSize: '14px' }} color="#666" variant="text"> + + style={{ fontSize: '14px' }} c="dimmed" variant="text"> {t('copyright', { year: new Date().getFullYear() })} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 9a7d971b..80654847 100644 --- 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) => ( - { - router.push(link.link); handler.close(); }} href={link.link} - data-linkactive={router.pathname.includes(link.link)} > {t(`links.${link.translation}`)} - + )); return ( - + router.push('/')}> Mantine @@ -102,7 +105,7 @@ const Header = ({ links, style }: HeaderProps) => { }>{t('user.upload')} - } component="a" href="/me/settings"> + } component={Link} href="/me/settings"> Settings @@ -124,14 +127,14 @@ const Header = ({ links, style }: HeaderProps) => { ) : ( <> - { signIn('keycloak'); }} > {t('auth.signin')} - + )} @@ -325,8 +341,7 @@ export const LogoHeader = (props: LogoHeaderProps) => { ], props.id, ) && ( - )} diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx index baea569d..7c44ab81 100644 --- 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 index 5319a30e..4cc7e146 100644 --- 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} /> -
+ )} + - {!props.disabled?.header && ( -
- )} - {props.head && ( { {props.fullWidth ? ( props.children ) : ( - + {props.children} - + )} {!props.disabled?.footer && ( @@ -143,8 +127,31 @@ const Page = (props: PageProps) => { ]} /> )} -
+ ); }; + +export const LogoPage = (props: PageProps & { headData: any; team: string }) => { + return ( + + + + {props.children} + + + ); +}; export default Page; + +const ContentContainer = (props: { children: any; smallPadding?: boolean; style?: React.CSSProperties }) => { + return ( + + {props.children} + + ); +}; diff --git a/src/pages/404.tsx b/src/pages/404.tsx index ddf36b2a..a787c0d1 100644 --- 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, }} >
- + <Title style={{ color: '#ffffff', fontSize: 220, userSelect: 'none' }} ta="center" order={1}> 404 diff --git a/src/pages/500.tsx b/src/pages/500.tsx index d6dbaf85..61a2c2e3 100644 --- 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 diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 76aaef67..1977be4d 100644 --- 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 /> diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx index 09afe530..4604a0e2 100644 --- a/src/pages/_error.tsx +++ b/src/pages/_error.tsx @@ -26,7 +26,6 @@ function ErrorPage(props: any) { filter: 'brightness(0.5)', width: '100%', height: 'calc(100vh - 60px)', - marginTop: 60, }} ></div> <Center @@ -39,7 +38,7 @@ function ErrorPage(props: any) { }} > <div> - <Title style={{ color: '#ffffff', fontSize: 220 }} ta="center" order={1}> + <Title style={{ color: '#ffffff', fontSize: 220, userSelect: 'none' }} ta="center" order={1}> {code} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 85c0c550..db004e4f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,6 +12,7 @@ import { import { ChevronDown } from 'tabler-icons-react'; import Gallery from '../components/Gallery'; +import Link from 'next/link'; import { NextPage } from 'next'; import Page from '../components/Page'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; @@ -93,7 +94,7 @@ const Home: NextPage = () => { }} /> <p>{t('mission.content')}</p> - <Button<'a'> px={'calc(var(--mantine-spacing-xl)*2)'} component="a" href="/about" mt="md"> + <Button px={'calc(var(--mantine-spacing-xl)*2)'} component={Link} href="/about" mt="md"> {t('mission.action')} </Button> </div> @@ -163,7 +164,7 @@ const Home: NextPage = () => { }} /> <p>{t('join.content')}</p> - <Button<'a'> px={'calc(var(--mantine-spacing-xl)*2)'} component="a" href="/getstarted" mt="md"> + <Button px={'calc(var(--mantine-spacing-xl)*2)'} component={Link} href="/getstarted" mt="md"> {t('join.action')} </Button> </div> diff --git a/src/pages/legal/privacy.tsx b/src/pages/legal/privacy.tsx index bbb1de84..4488e30c 100644 --- a/src/pages/legal/privacy.tsx +++ b/src/pages/legal/privacy.tsx @@ -1,4 +1,5 @@ import { Anchor } from '@mantine/core'; +import Link from 'next/link'; import { NextPage } from 'next'; import Page from '../../components/Page'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; @@ -41,8 +42,10 @@ const Team: NextPage = () => { 13. Personal data is only collected when a visitor logs in on <i>My BuildTheEarth</i>, which requires a Discord account. It is against Discord's Terms of Service for children younger than 13 to create an account. If you think that your child provided this kind of information on our website, we strongly encourage you{' '} - <Anchor href="/contact">contact</Anchor> us immediately and we will do our best efforts to promptly remove such - information from our records. + <Anchor component={Link} href="/contact"> + contact + </Anchor>{' '} + us immediately and we will do our best efforts to promptly remove such information from our records. </p> <h2>Online Privacy Policy Only</h2> <p> diff --git a/src/pages/map.tsx b/src/pages/map.tsx index efa79597..07cda620 100644 --- a/src/pages/map.tsx +++ b/src/pages/map.tsx @@ -6,7 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; const MapPage: NextPage = () => { return ( <Page fullWidth> - <div style={{ height: '96vh', width: '100%', marginTop: '60px' }}> + <div style={{ height: '96vh', width: '100%' }}> <Map /> </div> </Page> diff --git a/src/pages/teams/[team]/index.tsx b/src/pages/teams/[team]/index.tsx index aee8b782..287fd756 100644 --- a/src/pages/teams/[team]/index.tsx +++ b/src/pages/teams/[team]/index.tsx @@ -1,10 +1,11 @@ import { Container, Divider, Grid, Group, Stack, useMantineColorScheme, useMantineTheme } from '@mantine/core'; +import Page, { LogoPage } from '../../../components/Page'; import Gallery from '../../../components/Gallery'; import { LogoHeader } from '../../../components/Header'; import { NextPage } from 'next'; -import Page from '../../../components/Page'; import fetcher from '../../../utils/Fetcher'; +import sanitizeHtml from 'sanitize-html'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useMediaQuery } from '@mantine/hooks'; import { useRouter } from 'next/router'; @@ -19,65 +20,49 @@ const Team: NextPage = ({ data }: any) => { const theme = useMantineTheme(); const scheme = useMantineColorScheme(); return ( - <Page fullWidth title={data?.name} description={data?.about}> - <LogoHeader {...data} applyHref={`${team}/apply`} settingsHref={`${team}/manage/settings`} /> - <Container - size="xl" - style={{ - backgroundColor: scheme.colorScheme === 'dark' ? theme.colors.dark[7] : '#ffffff', - boxShadow: 'none', - marginBottom: 'calc(var(--mantine-spacing-xl)*2)', - padding: !matches ? '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', - }} - > - <Grid> - <Grid.Col span={8}> - <h2>Overview</h2> - <p>{data?.about}</p> - </Grid.Col> - <Grid.Col span={4}> - <h2>Details</h2> - <Stack> - <Group justify="space-between"> - <p>Location</p> - <p>{data?.location}</p> - </Group> - <Divider style={{ margin: '0' }} my="sm" /> + <LogoPage fullWidth title={data?.name} description={data?.about} headData={data} team={team?.toString() || ''}> + <Grid> + <Grid.Col span={8}> + <h2>Overview</h2> + <p dangerouslySetInnerHTML={{ __html: sanitizeHtml(data?.about) }} /> + </Grid.Col> + <Grid.Col span={4}> + <h2>Details</h2> + <Stack> + <Group justify="space-between"> + <p>Location</p> + <p>{data?.location}</p> + </Group> + <Divider style={{ margin: '0' }} my="sm" /> - <Group justify="space-between"> - <p>Members</p> - <p>{data?._count?.members}</p> - </Group> - <Divider style={{ margin: '0' }} my="sm" /> + <Group justify="space-between"> + <p>Members</p> + <p>{data?._count?.members}</p> + </Group> + <Divider style={{ margin: '0' }} my="sm" /> - <Group justify="space-between"> - <p>Builds</p> - <p>{data?._count?.builds}</p> - </Group> - </Stack> - </Grid.Col> - </Grid> - {data?.showcases && data.showcases.length >= 1 ? ( - <Group> - <h2>Images</h2> - <Gallery - style={{ height: '80vh' }} - images={ - data?.showcases.map(({ image, title }: any) => ({ - src: image, - location: title, - })) || [{}] - } - /> - </Group> - ) : undefined} - </Container> - </Page> + <Group justify="space-between"> + <p>Builds</p> + <p>{data?._count?.builds}</p> + </Group> + </Stack> + </Grid.Col> + </Grid> + {data?.showcases && data.showcases.length >= 1 ? ( + <Group> + <h2>Images</h2> + <Gallery + style={{ height: '80vh' }} + images={ + data?.showcases.map(({ image, title }: any) => ({ + src: image, + location: title, + })) || [{}] + } + /> + </Group> + ) : undefined} + </LogoPage> ); }; diff --git a/src/pages/teams/[team]/manage/apply.tsx b/src/pages/teams/[team]/manage/apply.tsx index f35dd3c5..c174b538 100644 --- a/src/pages/teams/[team]/manage/apply.tsx +++ b/src/pages/teams/[team]/manage/apply.tsx @@ -25,6 +25,7 @@ import Question, { EditQuestion } from '../../../../components/application/quest import App from 'next/app'; import Icon from '../../../../components/Icon'; +import Link from 'next/link'; import { NextPage } from 'next'; import Page from '../../../../components/Page'; import SettingsTabs from '../../../../components/SettingsTabs'; @@ -172,9 +173,9 @@ const Apply: NextPage = () => { /> </Group> {editingQuestion?.type && <EditQuestion type={editingQuestion?.type} {...editingQuestion.additionalData} />} - <Text color="dimmed" size="sm" mt="md"> + <Text c="dimmed" size="sm" mt="md"> A list of all Supported Icons can be found at{' '} - <Anchor href="https://tabler-icons.io/" target="_blank"> + <Anchor component={Link} href="https://tabler-icons.io/" target="_blank"> tabler-icons </Anchor> </Text> diff --git a/src/styles/components/Footer.module.css b/src/styles/components/Footer.module.css index f74ddd9a..57d8c13c 100644 --- a/src/styles/components/Footer.module.css +++ b/src/styles/components/Footer.module.css @@ -1,23 +1,24 @@ .footer { - border-top: 1px solid light-dark(#eaeaea, var(--mantine-color-dark-5)); - background-color: light-dark(#fafafa, var(--mantine-color-dark-7)); + border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5)); + background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7)); } .inner { - display: 'flex'; - justify-content: 'space-between'; - align-items: 'center'; - padding-top: var(--mantine-spacing-sm); - padding-bottom: var(--mantine-spacing-sm); + display: flex; + justify-content: space-between; + align-items: center; + padding-top: var(--mantine-spacing-sm); + padding-bottom: var(--mantine-spacing-sm); - @media (max-width: $mantine-breakpoint-xs) { - flex-direction: 'column'; - } + @media (max-width: $mantine-breakpoint-xs) { + flex-direction: column; + } } .links { - @media (max-width: $mantine-breakpoint-xs) { - margin-top: var(--mantine-spacing-md); + width: fit-content; - } + @media (max-width: $mantine-breakpoint-xs) { + margin-top: var(--mantine-spacing-md); + } } diff --git a/src/styles/components/Header.module.css b/src/styles/components/Header.module.css index 631b6d1c..7cb2bec9 100644 --- a/src/styles/components/Header.module.css +++ b/src/styles/components/Header.module.css @@ -1,8 +1,8 @@ -.root: { - z-index: 99; - } +.root { + z-index: 99; +} -.dropdown: { +.dropdown { position: absolute; top: 60; left: 0; @@ -10,16 +10,16 @@ z-index: 0; border-top-right-radius: 0; border-top-left-radius: 0; - botrder-top-width: 0; + border-top-width: 0; overflow: hidden; box-shadow: var(--mantine-shadow-md); @media (min-width: $mantine-breakpoint-sm) { display: none; - }; + } } -.header: { +.header { display: flex; align-items: center; margin: auto; @@ -29,87 +29,80 @@ height: 100%; } -.logo: { +.logo { font-family: Minecraft; font-size: 20px; position: relative; top: 2px; cursor: pointer; user-select: none; - img: { + img { position: relative; top: -2px; - }; + } } -.links: { +.links { @media (max-width: $mantine-breakpoint-sm) { display: none; - }; + } } -.burger: { - @media (min-width: $mantine-breakpoint-sm) { - display: none; - }; +.burger { display: flex; justify-content: space-between; align-items: center; + + @media (min-width: $mantine-breakpoint-sm) { + display: none; + } } -.link: { +.link { display: block; line-height: 1; padding: 8px 12px; cursor: pointer; - border-radius: var(--mantine-radius-sm); + border-radius: 0; text-decoration: none; - color: light-dark(var(#666,--mantine-color-dark-0)); + color: light-dark(#666, var(--mantine-color-dark-0)); font-size: var(--mantine-font-size-sm); @media (min-width: $mantine-breakpoint-sm) { - border-radius: 0; - padding: var(--mantine-spacing-md); + border-radius: var(--mantine-radius-sm); } - &:hover: { + &:hover { background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)); color: light-dark(#000, var(--mantine-color-dark-0)); } - - &[data-linkactive] { - /* &; &:hover: { */ - background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); - color: var(--mantine-color-dark-0); - - } } -.userMenu: { +.userMenu { border: none !important; @media (max-width: $mantine-breakpoint-sm) { display: none; - }; + } &[data-useractive] { - /* &; &:hover: { */ + /* &; &:hover: { */ background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); } } -.user: { +.user { color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm); border-radius: var(--mantine-radius-sm); - marginLeft: var(--mantine-spacing-xs); + marginleft: var(--mantine-spacing-xs); transition: background-color 100ms ease; @media (max-width: $mantine-breakpoint-sm) { border-radius: 0; padding: var(--mantine-spacing-md); margin: 0; width: 100%; - }; - &:hover: { - backgroundColor: light-dark(var(--mantine-color-gray-0, var(--mantine-color-dark-6)); - }; -} \ No newline at end of file + } + &:hover { + backgroundcolor: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)); + } +} diff --git a/src/styles/components/LanguageSwitcher.module.css b/src/styles/components/LanguageSwitcher.module.css index 062fe2b1..305b60e8 100644 --- a/src/styles/components/LanguageSwitcher.module.css +++ b/src/styles/components/LanguageSwitcher.module.css @@ -1,33 +1,33 @@ -.control: { - width: 200; - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 15px; - border-radius: var(--mantine-radius-md); - border: `1px solid light-dark(var(--mantine-color-gray-2),var(--mantine-color-dark-6)); - transition: background-color 150ms ease; - background-color: light-dark(var(--mantine-color-white),var(--mantine-color-dark-6)); +.control { + width: rem(200px); + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--mantine-spacing-xs) var(--mantine-spacing-md); + border-radius: var(--mantine-radius-md); + border: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6)); + transition: background-color 150ms ease; + background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); - &:hover: { - background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); - } + &[data-expanded] { + background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); + } - &[data-opened] { - background-color: light-dark(var(--mantine-color-gray-0),var(--mantine-color-dark-5)); - } + @mixin hover { + background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); + } } -.label: { - font-weight: 500; - font-size: theme.fontSizes.sm; +.label { + font-weight: 500; + font-size: var(--mantine-font-size-sm); } -.icon: { - transition: transform 150ms ease; - transform: rotate(0deg); +.icon { + transition: transform 150ms ease; + transform: rotate(0deg); - &[data-opened] { - transform: rotate(180deg); - } + [data-expanded] & { + transform: rotate(180deg); + } } \ No newline at end of file diff --git a/src/styles/components/Page.module.css b/src/styles/components/Page.module.css new file mode 100644 index 00000000..8f268127 --- /dev/null +++ b/src/styles/components/Page.module.css @@ -0,0 +1,26 @@ +.root { + display: flex; + flex-direction: column; + min-height: 100vh; + width: 100%; + background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8)); +} + +.container { + background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7)); + box-shadow: none; + flex: 1; + width: 100%; + position: relative; + margin-top: calc(var(--mantine-spacing-xl) * 2); + margin-bottom: calc(var(--mantine-spacing-xl) * 2); + padding: calc(var(--mantine-spacing-xl) * 1.5) calc(var(--mantine-spacing-xl) * 3); + + &[data-smallpadding] { + padding: calc(var(--mantine-spacing-xs) * 2) calc(var(--mantine-spacing-xs) * 3); + } + + @media (max-width: $mantine-breakpoint-md) { + padding: calc(var(--mantine-spacing-xs) * 2) calc(var(--mantine-spacing-xs) * 3); + } +} diff --git a/src/styles/nprogress.css b/src/styles/nprogress.css deleted file mode 100644 index f66eb88b..00000000 --- a/src/styles/nprogress.css +++ /dev/null @@ -1,18 +0,0 @@ -#nprogress { - pointer-events: none; -} - -#nprogress .bar { - background: #1c7ed6; - position: fixed; - z-index: 2000; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 4px; -} - -#nprogress .peg { - box-shadow: 0 0 10px #000, 0 0 5px #000; -} diff --git a/yarn.lock b/yarn.lock index 16c21c5a..4e092f9b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -389,12 +389,10 @@ resolved "https://registry.yarnpkg.com/@linaria/core/-/core-3.0.0-beta.13.tgz#049c5be5faa67e341e413a0f6b641d5d78d91056" integrity sha512-3zEi5plBCOsEzUneRVuQb+2SAx3qaC1dj0FfFAI6zIJQoDWu0dlSwKijMRack7oO9tUWrchfj3OkKQAd1LBdVg== -"@mantine/carousel@^5.2.6": - version "5.10.5" - resolved "https://registry.yarnpkg.com/@mantine/carousel/-/carousel-5.10.5.tgz#0735228c62e934dabd5f14521ae83d5cd56b6a15" - integrity sha512-r7KSNqGia/HHvZGSeOqcV2ptOpk/ljrgm6L92DE03i4DgUNT1y8QlF3hCK865xHecyj6nTRYDnoBLAuBufe/Yw== - dependencies: - "@mantine/utils" "5.10.5" +"@mantine/carousel@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@mantine/carousel/-/carousel-7.0.0.tgz#65674170d2ececdd5110c00441ecc443ebbce159" + integrity sha512-3GGEBU7primkZ+MUGjQYwtqRYaf1rdr3aQ+qc5RVXKizUkwMymceS1R8T8Zo+pwQf9si2+cvf5wBx/X7nJR+lw== "@mantine/core@^7.0.0": version "7.0.0" @@ -513,11 +511,6 @@ resolved "https://registry.yarnpkg.com/@mantine/tiptap/-/tiptap-7.0.0.tgz#d116dcc11a609a2b51fac710eb3729c07faa7971" integrity sha512-Xe+chsf3H2uoM3QrYSfEyKUNByXYOtGcr4hUB95Bxu7dMHMf4ciSeDeOoKJBujsLxXU1pfmtSZLlhco4xcEzrg== -"@mantine/utils@5.10.5": - version "5.10.5" - resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-5.10.5.tgz#ad620d714e545c6efb7f69d94ce46e3fd2fe01fb" - integrity sha512-FGMq4dGs5HhDAtI0z46uzxzKKPmZ3h5uKUyKg1ZHoFR1mBtcUMbB6FylFmHqKFRWlJ5IXqX9dwmiVrLYUOfTmA== - "@mantine/utils@6.0.21": version "6.0.21" resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.21.tgz#6185506e91cba3e308aaa8ea9ababc8e767995d6"