From 331e9e155d6859879ff886ec7a27db233eb04b6f Mon Sep 17 00:00:00 2001
From: GZTime <Time.GZ@outlook.com>
Date: Sun, 1 Sep 2024 18:28:37 +0800
Subject: [PATCH] style(color): adjust placeholder pages

---
 src/GZCTF/ClientApp/src/components/WithNavbar.tsx |  2 +-
 .../ClientApp/src/components/WithWiderScreen.tsx  | 10 ++++------
 src/GZCTF/ClientApp/src/locales/en_US/common.json |  2 +-
 src/GZCTF/ClientApp/src/pages/[...all].tsx        | 10 ++++------
 .../src/styles/components/Placeholder.module.css  | 15 +++++++++++++++
 5 files changed, 25 insertions(+), 14 deletions(-)
 create mode 100644 src/GZCTF/ClientApp/src/styles/components/Placeholder.module.css

diff --git a/src/GZCTF/ClientApp/src/components/WithNavbar.tsx b/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
index 78a78cfb5..da66f3469 100644
--- a/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
+++ b/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}
diff --git a/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx b/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx
index 25ef34b84..56a9e3b8c 100644
--- a/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx
+++ b/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>
   ) : (
diff --git a/src/GZCTF/ClientApp/src/locales/en_US/common.json b/src/GZCTF/ClientApp/src/locales/en_US/common.json
index 79e4400c2..3cc865a30 100644
--- a/src/GZCTF/ClientApp/src/locales/en_US/common.json
+++ b/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"
     }
   },
diff --git a/src/GZCTF/ClientApp/src/pages/[...all].tsx b/src/GZCTF/ClientApp/src/pages/[...all].tsx
index 655664680..97632503c 100644
--- a/src/GZCTF/ClientApp/src/pages/[...all].tsx
+++ b/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>
diff --git a/src/GZCTF/ClientApp/src/styles/components/Placeholder.module.css b/src/GZCTF/ClientApp/src/styles/components/Placeholder.module.css
new file mode 100644
index 000000000..88e203513
--- /dev/null
+++ b/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));
+}