fix(style): LoadingOverlay with wrong props

GZTimeWalker · May 14, 2024 · 8ce7881 · 8ce7881
1 parent 8f3d593
commit 8ce7881
Show file tree

Hide file tree

Showing 19 changed files with 56 additions and 48 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx b/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx
@@ -20,6 +20,7 @@ import { Trans } from 'react-i18next'
 import { BloodsTypes, useChallengeTagLabelMap } from '@Utils/Shared'
 import { ChallengeInfo, SubmissionType } from '@Api'
 import classes from '@Styles/ChallengeCard.module.css'
+import hoverClasses from '@Styles/HoverCard.module.css'
 import tooltipClasses from '@Styles/Tooltip.module.css'
 
 interface ChallengeCardProps {
@@ -38,7 +39,7 @@ const ChallengeCard: FC<ChallengeCardProps> = (props: ChallengeCardProps) => {
   const theme = useMantineTheme()
 
   return (
-    <Card onClick={onClick} radius="md" shadow="sm" className={classes.card}>
+    <Card onClick={onClick} radius="md" shadow="sm" className={hoverClasses.root}>
       <Stack gap="sm" pos="relative" style={{ zIndex: 99 }}>
         <Group h="30px" wrap="nowrap" justify="space-between" gap={2}>
           <Text fw="bold" truncate fz="lg">

diff --git a/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx b/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx
@@ -180,6 +180,7 @@ const GameNoticePanel: FC = () => {
       <Stack gap="xs">
         <SegmentedControl
           value={filter}
+          color={theme.primaryColor}
           styles={{
             root: {
               background: 'transparent',

diff --git a/src/GZCTF/ClientApp/src/components/WithGameMonitor.tsx b/src/GZCTF/ClientApp/src/components/WithGameMonitor.tsx
@@ -112,8 +112,10 @@ const WithGameMonitor: FC<WithGameMonitorProps> = ({ children, isLoading }) => {
             <Stack w="calc(100% - 10rem)" pos="relative">
               <LoadingOverlay
                 visible={isLoading ?? false}
-                opacity={1}
-                c={colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2]}
+                overlayProps={{
+                  backgroundOpacity: 1,
+                  color: colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2],
+                }}
               />
               {children}
             </Stack>

diff --git a/src/GZCTF/ClientApp/src/components/WithGameTab.tsx b/src/GZCTF/ClientApp/src/components/WithGameTab.tsx
@@ -181,8 +181,10 @@ const WithGameTab: FC<React.PropsWithChildren> = ({ children }) => {
     <Stack pos="relative" mt="md">
       <LoadingOverlay
         visible={!game}
-        opacity={1}
-        c={colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2]}
+        overlayProps={{
+          backgroundOpacity: 1,
+          color: colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2],
+        }}
       />
       <IconTabs
         active={activeTab}

diff --git a/src/GZCTF/ClientApp/src/components/WithNavbar.tsx b/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
@@ -91,8 +91,10 @@ const WithNavBar: FC<WithNavBarProps> = ({
             >
               <LoadingOverlay
                 visible={isLoading ?? false}
-                opacity={1}
-                c={colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2]}
+                overlayProps={{
+                  backgroundOpacity: 1,
+                  color: colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2],
+                }}
               />
               {withHeader && <IconHeader px={isMobile ? '2%' : '10%'} sticky={stickyHeader} />}
               <Box

diff --git a/src/GZCTF/ClientApp/src/components/admin/WithAdminTab.tsx b/src/GZCTF/ClientApp/src/components/admin/WithAdminTab.tsx
@@ -86,12 +86,14 @@ const WithAdminTab: FC<AdminTabProps> = ({ head, headProps, isLoading, children
           {head}
         </Group>
       )}
+      {children}
       <LoadingOverlay
         visible={isLoading ?? false}
-        opacity={1}
-        c={colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2]}
+        overlayProps={{
+          backgroundOpacity: 1,
+          color: colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2],
+        }}
       />
-      {children}
     </Stack>
   )
 }

diff --git a/src/GZCTF/ClientApp/src/components/admin/WithGameEditTab.tsx b/src/GZCTF/ClientApp/src/components/admin/WithGameEditTab.tsx
@@ -114,8 +114,10 @@ const WithGameEditTab: FC<GameEditTabProps> = ({
         <Stack w="calc(100% - 10rem)" pos="relative">
           <LoadingOverlay
             visible={isLoading ?? false}
-            opacity={1}
-            c={colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2]}
+            overlayProps={{
+              backgroundOpacity: 1,
+              color: colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.light[2],
+            }}
           />
 
           {children}

diff --git a/src/GZCTF/ClientApp/src/locales/en_US/game.json b/src/GZCTF/ClientApp/src/locales/en_US/game.json
@@ -148,8 +148,8 @@
   },
   "notice": {
     "blood": "Congratulations to {{team}} for the {{blood}} on {{chal}}.",
-    "new_challenge": "New challenge [{{title}}] has been released",
-    "new_hint": "New hints to [{{title}}]"
+    "new_challenge": "New challenge [{{title}}] has been released.",
+    "new_hint": "Hints for [{{title}}] has been updated."
   },
   "notification": {
     "connected": {

diff --git a/src/GZCTF/ClientApp/src/locales/ja_JP/admin.json b/src/GZCTF/ClientApp/src/locales/ja_JP/admin.json
@@ -249,15 +249,15 @@
     "settings": {
       "account": {
         "allow_register": {
-          "description": "アカウントの新規登録を許可します",
+          "description": "アカウントの新規登録を許可します。",
           "label": "アカウント新規登録を許可"
         },
         "auto_active": {
-          "description": "アカウント新規登録後自動的にアクティブにします",
+          "description": "アカウント新規登録後自動的にアクティブにします。",
           "label": "新規登録後に自動で有効化する"
         },
         "email_confirmation_required": {
-          "description": "アカウント新規登録するときメールの認証を要求します",
+          "description": "アカウント新規登録するときメールの認証を要求します。",
           "label": "メール認証を要求"
         },
         "email_domain_list": {
@@ -266,25 +266,25 @@
         },
         "title": "アカウントポリシー",
         "use_captcha": {
-          "description": "ログイン、新規登録、パスワードの再設定時にキャプチャ検証を行います",
+          "description": "ログイン、新規登録、パスワードの再設定時にキャプチャ検証を行います。",
           "label": "キャプチャ認証を使用"
         }
       },
       "container": {
         "auto_destroy": {
-          "description": "ユーザーインスタンスが上限を超える場合は古いインスタンスを自動的に破棄する",
+          "description": "ユーザーインスタンスが上限を超える場合は古いインスタンスを自動的に破棄する。",
           "label": "古いインスタンスの自動破棄"
         },
         "default_lifetime": {
-          "description": "コンテナの既定の有効期限",
+          "description": "コンテナの既定の有効期限。",
           "label": "既定の有効期限（分）"
         },
         "extension_duration": {
-          "description": "コンテナが毎回延長される期間",
+          "description": "コンテナが毎回延長される期間。",
           "label": "延長される期間（分）"
         },
         "renewal_window": {
-          "description": "コンテナの有効期限が切れるまでの延長が許可される期間",
+          "description": "コンテナの有効期限が切れるまでの延長が許可される期間。",
           "label": "許可される期間（分）"
         },
         "title": "コンテナーポリシー"
@@ -299,7 +299,7 @@
           "label": "カラーパレット"
         },
         "description": {
-          "description": "検索エンジンとクローラーに提供されるプラットフォームの説明",
+          "description": "検索エンジンとクローラーに提供されるプラットフォームの説明。",
           "label": "プラットフォーム説明"
         },
         "footer": {
@@ -311,7 +311,7 @@
           "label": "プラットフォームアイコン"
         },
         "name": {
-          "description": "「::CTF」はプラットフォーム名に付かされて表示されます",
+          "description": "「::CTF」はプラットフォーム名に付かされて表示されます。",
           "label": "プラットフォーム名"
         },
         "slogan": {

diff --git a/src/GZCTF/ClientApp/src/pages/admin/Logs.tsx b/src/GZCTF/ClientApp/src/pages/admin/Logs.tsx
@@ -44,7 +44,7 @@ const Logs: FC = () => {
 
   const { t } = useTranslation()
   const viewport = useRef<HTMLDivElement>(null)
-  const { classes: inputClasses } = useDisplayInputStyles({ fw: 500, ff: 'monospace', lh: '1rem' })
+  const { classes: inputClasses } = useDisplayInputStyles({ fw: 500, ff: 'monospace' })
 
   useEffect(() => {
     viewport.current?.scrollTo({ top: 0, behavior: 'smooth' })

diff --git a/src/GZCTF/ClientApp/src/pages/admin/Teams.tsx b/src/GZCTF/ClientApp/src/pages/admin/Teams.tsx
@@ -162,7 +162,7 @@ const Teams: FC = () => {
       head={
         <>
           <TextInput
-            w="30%"
+            w="36%"
             leftSection={<Icon path={mdiMagnify} size={1} />}
             placeholder={t('admin.placeholder.teams.search')}
             value={hint}

diff --git a/src/GZCTF/ClientApp/src/pages/admin/Users.tsx b/src/GZCTF/ClientApp/src/pages/admin/Users.tsx
@@ -202,7 +202,7 @@ const Users: FC = () => {
       head={
         <>
           <TextInput
-            w="30%"
+            w="36%"
             leftSection={<Icon path={mdiMagnify} size={1} />}
             placeholder={t('admin.placeholder.users.search')}
             value={hint}

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/CheatInfo.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/CheatInfo.tsx
@@ -305,8 +305,7 @@ interface CheatInfoTableViewProps {
 }
 
 const CheatInfoTableView: FC<CheatInfoTableViewProps> = (props) => {
-  const { classes: inputClasses, cx } = useDisplayInputStyles({ ff: 'monospace' })
-
+  const { classes: inputClasses } = useDisplayInputStyles({ ff: 'monospace' })
   const { t } = useTranslation()
 
   const rows = props.cheatInfo
@@ -343,8 +342,7 @@ const CheatInfoTableView: FC<CheatInfoTableViewProps> = (props) => {
         <Table.Td>{item.submission?.challenge ?? 'Challenge'}</Table.Td>
         <Table.Td
           style={{
-            width: '36vw',
-            maxWidth: '100%',
+            width: '24vw',
             padding: 0,
           }}
         >
@@ -377,7 +375,7 @@ const CheatInfoTableView: FC<CheatInfoTableViewProps> = (props) => {
                 {t('game.label.cheat_info.submit_user')}
               </Table.Th>
               <Table.Th style={{ minWidth: '3rem' }}>{t('common.label.challenge')}</Table.Th>
-              <Table.Th className={cx(classes.mono)}>{t('common.label.flag')}</Table.Th>
+              <Table.Th className={classes.mono}>{t('common.label.flag')}</Table.Th>
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>{rows}</Table.Tbody>
@@ -433,7 +431,7 @@ const CheatInfo: FC = () => {
   }
 
   return (
-    <WithGameMonitorTab>
+    <WithGameMonitorTab isLoading={!cheatInfo}>
       <Group justify="space-between" w="100%">
         <Switch
           label={SwitchLabel(

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Events.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Events.tsx
@@ -209,7 +209,7 @@ const Events: FC = () => {
   )
 
   return (
-    <WithGameMonitorTab>
+    <WithGameMonitorTab isLoading={!events}>
       <Group justify="space-between" w="100%">
         <Switch
           label={SwitchLabel(

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Submissions.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Submissions.tsx
@@ -220,7 +220,7 @@ const Submissions: FC = () => {
     )
 
   return (
-    <WithGameMonitorTab>
+    <WithGameMonitorTab isLoading={!submissions}>
       <Group justify="space-between" w="100%">
         <SegmentedControl
           color={theme.primaryColor}

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Traffic.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/monitor/Traffic.tsx
@@ -142,7 +142,7 @@ const Traffic: FC = () => {
   teamTraffic?.sort((a, b) => (a.teamId ?? 0) - (b.teamId ?? 0))
 
   return (
-    <WithGameMonitorTab>
+    <WithGameMonitorTab isLoading={!challengeTraffic}>
       {!challengeTraffic || challengeTraffic?.length === 0 ? (
         <Center h="calc(100vh - 140px)">
           <Stack gap={0}>

diff --git a/src/GZCTF/ClientApp/src/styles/components/ChallengeCard.module.css b/src/GZCTF/ClientApp/src/styles/components/ChallengeCard.module.css
@@ -25,12 +25,3 @@
     background: linear-gradient(0deg, #fff0, var(--blood-color), #fff0);
   }
 }
-
-.card {
-  transition: filter 0.1s;
-
-  &:hover {
-    cursor: pointer;
-    filter: light-dark(brightness(1.2), brightness(0.97));
-  }
-}
diff --git a/src/GZCTF/ClientApp/src/styles/components/IconTabs.module.css b/src/GZCTF/ClientApp/src/styles/components/IconTabs.module.css
@@ -26,7 +26,7 @@
   }
 
   &:not(:disabled):hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    background-color: light-dark(var(--mantine-color-light-4), var(--mantine-color-dark-6));
   }
 
   &[data-active] {
@@ -35,6 +35,13 @@
       alpha(var(--mantine-color-dark-7), 0.5)
     );
     color: var(--tab-active-color, var(--mantine-primary-color-6));
+
+    &:hover {
+      background-color: light-dark(
+        var(--mantine-color-white),
+        alpha(var(--mantine-color-dark-7), 0.5)
+      );
+    }
   }
 }
 
@@ -76,7 +83,7 @@
 
 .panes {
   display: flex;
-  gap: 5pt;
+  gap: var(--mantine-spacing-xs);
   justify-content: right;
   flex-wrap: nowrap;
 

diff --git a/src/GZCTF/ClientApp/src/utils/ThemeOverride.ts b/src/GZCTF/ClientApp/src/utils/ThemeOverride.ts
@@ -146,7 +146,7 @@ const CustomTheme: MantineThemeOverride = {
     Tabs: Tabs.extend({
       styles: {
         tab: {
-          padding: '0.5rem',
+          padding: 'var(--mantine-spacing-xs)',
           fontWeight: 500,
         },
       },