style(color): adjust placeholder pages

src/GZCTF/ClientApp/src/components/WithNavbar.tsx

@@ -56,7 +56,7 @@ const WithNavBar: FC<WithNavBarProps> = ({
         rotate={-12}
         textSize={14}
         gutter={22}
-        opacity={colorScheme === 'dark' ? 0.02 : 0.03}
+        opacity={colorScheme === 'dark' ? 0.02 : 0.025}
       >
         <AppShell
           padding={0}

src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx

@@ -1,8 +1,9 @@
-import { Stack, Text, Title, useMantineTheme } from '@mantine/core'
+import { Stack, Text, Title } from '@mantine/core'
 import { useViewportSize } from '@mantine/hooks'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import IconWiderScreenRequired from '@Components/icon/WiderScreenRequiredIcon'
+import classes from '@Styles/Placeholder.module.css'
 
 interface WithWiderScreenProps extends React.PropsWithChildren {
   minWidth?: number
@@ -12,16 +13,13 @@ const WithWiderScreen: FC<WithWiderScreenProps> = ({ children, minWidth = 1080 }
   const view = useViewportSize()
 
   const { t } = useTranslation()
-  const theme = useMantineTheme()
 
   const tooSmall = minWidth > 0 && view.width > 0 && view.width < minWidth
 
   return tooSmall ? (
-    <Stack gap={0} align="center" justify="center" h="calc(100vh - 32px)">
+    <Stack gap={0} className={classes.board}>
       <IconWiderScreenRequired />
-      <Title order={1} c={theme.primaryColor} fw="lighter">
-        {t('common.content.wider.title')}
-      </Title>
+      <Title order={1}>{t('common.content.wider.title')}</Title>
       <Text fw="bold">{t('common.content.wider.text')}</Text>
     </Stack>
   ) : (

src/GZCTF/ClientApp/src/locales/en_US/common.json

@@ -54,7 +54,7 @@
     "no_data": "No data",
     "report_error": "Please report this error to the administrator if you think this is a bug",
     "wider": {
-      "text": "Please use a broader device to browse this page",
+      "text": "Try to use a wider device",
       "title": "Not wide enough"
     }
   },

src/GZCTF/ClientApp/src/pages/[...all].tsx

@@ -1,17 +1,17 @@
-import { Stack, Text, Title, useMantineTheme } from '@mantine/core'
+import { Stack, Text, Title } from '@mantine/core'
 import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
 import WithNavBar from '@Components/WithNavbar'
 import Icon404 from '@Components/icon/404Icon'
 import { usePageTitle } from '@Utils/usePageTitle'
+import classes from '@Styles/Placeholder.module.css'
 
 const Error404: FC = () => {
   const navigate = useNavigate()
   const location = useLocation()
 
   const { t } = useTranslation()
-  const theme = useMantineTheme()
 
   usePageTitle(t('common.title.404'))
 
@@ -23,11 +23,9 @@ const Error404: FC = () => {
 
   return (
     <WithNavBar minWidth={0}>
-      <Stack gap={0} align="center" justify="center" h="calc(100vh - 32px)">
+      <Stack gap={0} className={classes.board}>
         <Icon404 />
-        <Title order={1} c={theme.primaryColor} fw="lighter">
-          {t('common.content.404.title')}
-        </Title>
+        <Title order={1}>{t('common.content.404.title')}</Title>
         <Text fw="bold">{t('common.content.404.text')}</Text>
       </Stack>
     </WithNavBar>

src/GZCTF/ClientApp/src/styles/components/Placeholder.module.css

@@ -0,0 +1,15 @@
+.board {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
+  justify-content: center;
+  height: calc(100vh - 3.75rem * var(--mantine-scale));
+  padding: var(--mantine-spacing-lg);
+  align-items: center;
+}
+
+.board > * {
+  text-align: center;
+}
+
+.board > h1 {
+  color: light-dark(var(--mantine-primary-color-filled), var(--mantine-primary-color-4));
+}