Skip to content

Commit

Permalink
feat(deps): upgrade to mantine v7 (#283)
Browse files Browse the repository at this point in the history
Co-authored-by: Aether Chen <15167799+chenjunyu19@users.noreply.github.com>

feat: add auto scroll to tables
feat: wp cards
feat: unify team info query hook
feat: update challenge accepted count
fix: use config hook
fix: challenge countdown not work
fix: last fallback to `sans-serif` for `monospace`
fix: footer padding
fix: strange rendering behavior of `Segmented Control` in the user edit modal.
  • Loading branch information
GZTimeWalker committed May 8, 2024
1 parent eabffc7 commit a72e47d
Show file tree
Hide file tree
Showing 120 changed files with 2,929 additions and 2,296 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ jobs:

- uses: actions/setup-node@v4
with:
node-version: 20
node-version: 22

- name: Get current date time
id: datetime
Expand Down
3 changes: 2 additions & 1 deletion src/GZCTF/ClientApp/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
"react-hooks/exhaustive-deps": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-non-null-asserted-optional-chain": "off"
"@typescript-eslint/no-non-null-asserted-optional-chain": "off",
"@typescript-eslint/no-unused-vars": "warn"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
Expand Down
9 changes: 8 additions & 1 deletion src/GZCTF/ClientApp/.vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,12 @@
"i18n-ally.extract.keyMaxLength": 20,
"i18n-ally.extract.keygenStyle": "snake_case",
"i18n-ally.sortKeys": true,
"i18n-ally.sourceLanguage": "zh"
"i18n-ally.sourceLanguage": "zh",
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/@mantine/core/styles.css"
]
}
26 changes: 15 additions & 11 deletions src/GZCTF/ClientApp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,25 @@
"dependencies": {
"@babel/core": "^7.24.5",
"@emotion/react": "^11.11.4",
"@mantine/carousel": "^6.0.21",
"@mantine/core": "^6.0.21",
"@mantine/dates": "^6.0.21",
"@mantine/dropzone": "^6.0.21",
"@mantine/form": "^6.0.21",
"@mantine/hooks": "^6.0.21",
"@mantine/modals": "^6.0.21",
"@mantine/notifications": "^6.0.21",
"@mantine/carousel": "^7.9.1",
"@mantine/core": "^7.9.1",
"@mantine/dates": "^7.9.1",
"@mantine/dropzone": "^7.9.1",
"@mantine/emotion": "^7.9.1",
"@mantine/form": "^7.9.1",
"@mantine/hooks": "^7.9.1",
"@mantine/modals": "^7.9.1",
"@mantine/notifications": "^7.9.1",
"@marsidev/react-turnstile": "^0.6.0",
"@mdi/js": "^7.4.47",
"@mdi/react": "^1.6.1",
"@microsoft/signalr": "^8.0.0",
"dayjs": "^1.11.11",
"echarts": "^5.5.0",
"echarts-for-react": "^3.0.2",
"embla-carousel": "^7.0.0",
"embla-carousel-autoplay": "^7.0.0",
"embla-carousel-react": "^7.0.0",
"embla-carousel": "^8.0.4",
"embla-carousel-autoplay": "^8.0.4",
"embla-carousel-react": "^8.0.4",
"i18next": "^23.11.3",
"i18next-browser-languagedetector": "^7.2.1",
"katex": "^0.16.10",
Expand Down Expand Up @@ -69,6 +70,9 @@
"eslint-plugin-react-hooks": "^4.6.2",
"form-data": "~4.0.0",
"lodash": "^4.17.21",
"postcss": "^8.4.38",
"postcss-preset-mantine": "^1.15.0",
"postcss-simple-vars": "^7.0.1",
"prettier": "~3.2.5",
"rollup": "^4.17.2",
"swagger-typescript-api": "^13.0.3",
Expand Down
803 changes: 450 additions & 353 deletions src/GZCTF/ClientApp/pnpm-lock.yaml

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/GZCTF/ClientApp/postcss.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default {
plugins: {
'postcss-preset-mantine': {},
},
};
1 change: 1 addition & 0 deletions src/GZCTF/ClientApp/prettier.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default {
'^@Components/(.*)$',
'^@Utils/(.*)$',
'^@Api$',
'^@(.*).css$',
'^[./]',
],
}
29 changes: 29 additions & 0 deletions src/GZCTF/ClientApp/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
body {
padding: 0;
margin: 0;

background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-gray-7));
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));

@media print {
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-gray-7));
}
}

::-webkit-scrollbar {
height: 6px;
width: 6px;
}

::-webkit-scrollbar-thumb {
background: var(--mantine-color-dark-3);
border-radius: 3px;
}

::-webkit-scrollbar-track {
background-color: transparent;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}
123 changes: 42 additions & 81 deletions src/GZCTF/ClientApp/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,102 +1,63 @@
import {
Center,
ColorScheme,
ColorSchemeProvider,
Global,
Loader,
MantineProvider,
} from '@mantine/core'
import { useLocalStorage } from '@mantine/hooks'
import { Center, Loader, MantineProvider } from '@mantine/core'
import { DatesProvider } from '@mantine/dates'
import { emotionTransform, MantineEmotionProvider } from '@mantine/emotion'
import { ModalsProvider } from '@mantine/modals'
import { Notifications } from '@mantine/notifications'
import { FC, Suspense } from 'react'
import { useTranslation } from 'react-i18next'
import { useRoutes } from 'react-router-dom'
import { SWRConfig } from 'swr'
import routes from '~react-pages'
import { ThemeOverride } from '@Utils/ThemeOverride'
import { useLanguage } from '@Utils/I18n'
import { CustomTheme } from '@Utils/ThemeOverride'
import { useBanner, localCacheProvider } from '@Utils/useConfig'
import { fetcher } from '@Api'
import '@mantine/carousel/styles.css'
import '@mantine/core/styles.css'
import '@mantine/dates/styles.css'
import '@mantine/dropzone/styles.css'
import '@mantine/notifications/styles.css'
import './App.css'

export const App: FC = () => {
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
key: 'color-scheme',
defaultValue: 'dark',
getInitialValueInEffect: true,
})

const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'))

useBanner()

const { t } = useTranslation()
const { locale } = useLanguage()

return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider withGlobalStyles withCSSVariables theme={{ ...ThemeOverride, colorScheme }}>
<MantineProvider
defaultColorScheme="dark"
theme={CustomTheme}
stylesTransform={emotionTransform}
>
<MantineEmotionProvider>
<Notifications zIndex={5000} />
{StyledGlobal}
<ModalsProvider
labels={{ confirm: t('common.modal.confirm'), cancel: t('common.modal.cancel') }}
>
<SWRConfig
value={{
refreshInterval: 10000,
provider: localCacheProvider,
fetcher,
}}

<DatesProvider settings={{ locale }}>
<ModalsProvider
labels={{ confirm: t('common.modal.confirm'), cancel: t('common.modal.cancel') }}
>
<Suspense
fallback={
<Center h="100vh" w="100vw">
<Loader />
</Center>
}
<SWRConfig
value={{
refreshInterval: 10000,
provider: localCacheProvider,
fetcher,
}}
>
{useRoutes(routes)}
</Suspense>
</SWRConfig>
</ModalsProvider>
</MantineProvider>
</ColorSchemeProvider>
<Suspense
fallback={
<Center h="100vh" w="100vw">
<Loader />
</Center>
}
>
{useRoutes(routes)}
</Suspense>
</SWRConfig>
</ModalsProvider>
</DatesProvider>
</MantineEmotionProvider>
</MantineProvider>
)
}

const StyledGlobal = (
<Global
styles={(theme) => ({
body: {
...theme.fn.fontStyles(),
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2],
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
lineHeight: theme.lineHeight,
padding: 0,
margin: 0,

'@media print': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.white,
},
},

'::-webkit-scrollbar': {
height: 6,
width: 6,
},

'::-webkit-scrollbar-thumb': {
background: 'var(--mantine-color-dark-3)',
borderRadius: 3,
},

'::-webkit-scrollbar-track': {
backgroundColor: 'transparent',
},

'::-webkit-scrollbar-corner': {
backgroundColor: 'transparent',
},
})}
/>
)
5 changes: 3 additions & 2 deletions src/GZCTF/ClientApp/src/components/AccountView.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Center, createStyles, Stack } from '@mantine/core'
import { Center, Stack } from '@mantine/core'
import { createStyles } from '@mantine/emotion'
import { FC } from 'react'
import { useNavigate } from 'react-router-dom'
import LogoHeader from '@Components/LogoHeader'
Expand All @@ -24,7 +25,7 @@ const AccountView: FC<AccountViewProps> = ({ onSubmit, children }) => {
<Stack align="center" justify="center">
<LogoHeader onClick={() => navigate('/')} />
<form className={classes.input} onSubmit={onSubmit}>
<Stack spacing="xs" align="center" justify="center">
<Stack gap="xs" align="center" justify="center">
{children}
</Stack>
</form>
Expand Down
8 changes: 4 additions & 4 deletions src/GZCTF/ClientApp/src/components/ActionIconWithConfirm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Button,
Group,
MantineColor,
MantineNumberSize,
MantineSpacing,
Popover,
Stack,
Text,
Expand All @@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next'
export interface ActionIconWithConfirmProps {
iconPath: string
color?: MantineColor
size?: MantineNumberSize
size?: MantineSpacing
message: string
disabled?: boolean
onClick: () => Promise<void>
Expand All @@ -41,7 +41,7 @@ export const ActionIconWithConfirm: FC<ActionIconWithConfirmProps> = (props) =>
</ActionIcon>
</Popover.Target>
<Popover.Dropdown>
<Stack align="center" spacing={6}>
<Stack align="center" gap={6}>
<Text
size="sm"
fw="bold"
Expand All @@ -54,7 +54,7 @@ export const ActionIconWithConfirm: FC<ActionIconWithConfirmProps> = (props) =>
{props.message}
</Text>

<Group w="100%" position="apart">
<Group w="100%" justify="space-between">
<Button
size="xs"
py={2}
Expand Down
19 changes: 9 additions & 10 deletions src/GZCTF/ClientApp/src/components/AppFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ import { useConfig } from '@Utils/useConfig'
const AppFooter: FC = () => {
const { config } = useConfig()
const isMobile = useIsMobile()
const { classes, theme } = useFooterStyles()
const { classes } = useFooterStyles()
const { classes: logoClasses } = useLogoStyles()

const copyright = (
<Text size="xs" align="center" fw={500} color="dimmed" ff={theme.fontFamilyMonospace}>
<Text size="xs" ta="center" fw={500} c="dimmed" ff="monospace">
Copyright&nbsp;©&nbsp;2022-now&nbsp;
{isMobile && <br />}
<Anchor
href="https://github.com/GZTimeWalker"
color="dimmed"
c="dimmed"
size="sm"
fw={500}
sx={{ lineHeight: 1 }}
style={{ lineHeight: 1 }}
>
@GZTimeWalker
</Anchor>
&nbsp;All&nbsp;Rights&nbsp;Reserved.
,&nbsp;All&nbsp;Rights&nbsp;Reserved.
</Text>
)

Expand All @@ -33,11 +33,10 @@ const AppFooter: FC = () => {
<div className={classes.spacer} />
<div className={classes.wrapper}>
<Center mx="auto" h="100%">
<Stack spacing="sm" w={isMobile ? '100%' : '80%'}>
<Stack w="100%" align="center" spacing={2}>
<MainIcon style={{ maxWidth: isMobile ? 45 : 50, height: 'auto' }} />

<Text fw="bold" size={isMobile ? 28 : 36}>
<Stack gap="sm" w={isMobile ? '100%' : '80%'}>
<Stack w="100%" align="center" gap={2}>
<MainIcon style={{ maxWidth: isMobile ? '3rem' : '4rem', height: 'auto' }} />
<Text fw="bold" size={isMobile ? '2rem' : '2.5rem'}>
GZ<span className={logoClasses.brand}>::</span>CTF
</Text>
</Stack>
Expand Down
Loading

0 comments on commit a72e47d

Please sign in to comment.