style(challenge): update challenge items

GZTimeWalker · Sep 1, 2024 · c9931bb · c9931bb
1 parent 23fd9c9
commit c9931bb
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 58 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx b/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx
@@ -14,6 +14,7 @@ import {
 } from '@mantine/core'
 import { mdiFlag } from '@mdi/js'
 import { Icon } from '@mdi/react'
+import cx from 'clsx'
 import dayjs from 'dayjs'
 import { FC } from 'react'
 import { Trans } from 'react-i18next'
@@ -39,8 +40,14 @@ const ChallengeCard: FC<ChallengeCardProps> = (props: ChallengeCardProps) => {
   const theme = useMantineTheme()
 
   return (
-    <Card onClick={onClick} radius="md" shadow="sm" className={hoverClasses.root}>
-      <Stack gap="sm" pos="relative" style={{ zIndex: 99 }}>
+    <Card
+      onClick={onClick}
+      radius="md"
+      shadow="sm"
+      className={cx(hoverClasses.root, classes.root)}
+      data-solved={solved || undefined}
+    >
+      <Stack gap="xs" pos="relative" style={{ zIndex: 99 }}>
         <Group h="30px" wrap="nowrap" justify="space-between" gap={2}>
           <Text fw="bold" truncate fz="lg">
             {challenge.title}
@@ -55,7 +62,7 @@ const ChallengeCard: FC<ChallengeCardProps> = (props: ChallengeCardProps) => {
             )}
           </Center>
         </Group>
-        <Divider />
+        <Divider size="sm" color={tagData?.color} />
         <Group wrap="nowrap" justify="space-between" align="center" gap={2}>
           <Text ta="center" fw="bold" fz="lg" ff="monospace">
             {challenge.score}&nbsp;pts

diff --git a/src/GZCTF/ClientApp/src/components/ChallengeModal.tsx b/src/GZCTF/ClientApp/src/components/ChallengeModal.tsx
@@ -72,7 +72,9 @@ const ChallengeModal: FC<ChallengeModalProps> = (props) => {
     <Stack gap="xs">
       <Group wrap="nowrap" w="100%" justify="space-between" gap="sm">
         <Group wrap="nowrap" gap="sm">
-          {tagData && <Icon path={tagData.icon} size={1} color={theme.colors[tagData?.color][5]} />}
+          {tagData && (
+            <Icon path={tagData.icon} size={1.2} color={theme.colors[tagData?.color][5]} />
+          )}
           <Title w="calc(100% - 1.5rem)" order={4} lineClamp={1}>
             {challenge?.title ?? ''}
           </Title>
@@ -81,7 +83,7 @@ const ChallengeModal: FC<ChallengeModalProps> = (props) => {
           {challenge?.score ?? 0} pts
         </Text>
       </Group>
-      <Divider />
+      <Divider size="md" color={tagData?.color} />
     </Stack>
   )
 

diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -168,6 +168,13 @@ const ChallengePanel: FC = () => {
             tabLabel: {
               width: '100%',
             },
+            tab: {
+              '&:not([data-active="true"])': {
+                'span[data-position="left"]': {
+                  color: 'var(--tabs-color)',
+                },
+              },
+            },
           }}
         >
           <Tabs.List>

diff --git a/src/GZCTF/ClientApp/src/components/Empty.tsx b/src/GZCTF/ClientApp/src/components/Empty.tsx
@@ -17,7 +17,7 @@ const Empty: FC<EmptyProps> = (props) => {
   const { t } = useTranslation()
 
   return (
-    <Stack align="center" data-border={props.bordered} className={classes.box}>
+    <Stack align="center" data-border={props.bordered || undefined} className={classes.box}>
       <Icon path={props.mdiPath ?? mdiInbox} size={props.iconSize ?? 4} color="gray" />
       <Text c="dimmed" size={props.fontSize}>
         {props.description ?? t('common.content.no_data')}

diff --git a/src/GZCTF/ClientApp/src/components/admin/ChallengeCreateModal.tsx b/src/GZCTF/ClientApp/src/components/admin/ChallengeCreateModal.tsx
@@ -9,6 +9,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { showErrorNotification } from '@Utils/ApiHelper'
 import {
   ChallengeTagItem,
+  ChallengeTagList,
   ChallengeTypeItem,
   useChallengeTagLabelMap,
   useChallengeTypeLabelMap,
@@ -78,9 +79,9 @@ const ChallengeCreateModal: FC<ChallengeCreateModalProps> = (props) => {
           value={tag}
           onChange={setTag}
           renderOption={ChallengeTagItem}
-          data={Object.entries(ChallengeTag).map((tag) => {
-            const data = challengeTagLabelMap.get(tag[1])
-            return { value: tag[1], label: data?.name, ...data } as ComboboxItem
+          data={ChallengeTagList.map((tag) => {
+            const data = challengeTagLabelMap.get(tag)
+            return { value: tag, label: data?.name, ...data } as ComboboxItem
           })}
         />
         <Select

diff --git a/src/GZCTF/ClientApp/src/locales/en_US/challenge.json b/src/GZCTF/ClientApp/src/locales/en_US/challenge.json
@@ -64,7 +64,7 @@
         "no_container": "Test container is not running"
       }
     },
-    "solved": "<1>{{solved}}</1> solves",
+    "solved": "<1>{{solved}}</1> SOLVES",
     "wrong_flag_hints": [
       "Where there's a will, there's a flag.",
       "To be, or not to be, that is not the flag.",

diff --git a/src/GZCTF/ClientApp/src/locales/zh_CN/challenge.json b/src/GZCTF/ClientApp/src/locales/zh_CN/challenge.json
@@ -64,7 +64,7 @@
         "no_container": "测试容器未开启"
       }
     },
-    "solved": "<1>{{solved}}</1> 支队伍攻克",
+    "solved": "<1>{{solved}}</1> 次解出",
     "wrong_flag_hints": [
       "饮水思源，重新审题吧。",
       "诗云：路漫漫其修远兮，再接再厉吧。",

diff --git a/src/GZCTF/ClientApp/src/pages/account/Login.tsx b/src/GZCTF/ClientApp/src/pages/account/Login.tsx
@@ -130,12 +130,7 @@ const Login: FC = () => {
         onChange={(event) => setPwd(event.currentTarget.value)}
       />
       <Captcha action="login" ref={captchaRef} />
-      <Anchor
-        fz="xs"
-        style={{ alignSelf: 'end' }}
-        component={Link}
-        to="/account/recovery"
-      >
+      <Anchor fz="xs" style={{ alignSelf: 'end' }} component={Link} to="/account/recovery">
         {t('account.anchor.recovery')}
       </Anchor>
       <Grid grow w="100%">

diff --git a/src/GZCTF/ClientApp/src/pages/account/Recovery.tsx b/src/GZCTF/ClientApp/src/pages/account/Recovery.tsx
@@ -89,12 +89,7 @@ const Recovery: FC = () => {
         onChange={(event) => setEmail(event.currentTarget.value)}
       />
       <Captcha action="recovery" ref={captchaRef} />
-      <Anchor
-        fz="xs"
-        style={{ alignSelf: 'end' }}
-        component={Link}
-        to="/account/login"
-      >
+      <Anchor fz="xs" style={{ alignSelf: 'end' }} component={Link} to="/account/login">
         {t('account.anchor.login')}
       </Anchor>
       <Button disabled={disabled} fullWidth onClick={onRecovery}>

diff --git a/src/GZCTF/ClientApp/src/pages/account/Register.tsx b/src/GZCTF/ClientApp/src/pages/account/Register.tsx
@@ -160,12 +160,7 @@ const Register: FC = () => {
         error={pwd !== retypedPwd}
       />
       <Captcha action="register" ref={captchaRef} />
-      <Anchor
-        fz="xs"
-        style={{ alignSelf: 'end' }}
-        component={Link}
-        to="/account/login"
-      >
+      <Anchor fz="xs" style={{ alignSelf: 'end' }} component={Link} to="/account/login">
         {t('account.anchor.login')}
       </Anchor>
       <Button type="submit" fullWidth onClick={onRegister} disabled={disabled}>

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/Index.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/Index.tsx
@@ -22,7 +22,7 @@ import ChallengeCreateModal from '@Components/admin/ChallengeCreateModal'
 import ChallengeEditCard from '@Components/admin/ChallengeEditCard'
 import WithGameEditTab from '@Components/admin/WithGameEditTab'
 import { showErrorNotification } from '@Utils/ApiHelper'
-import { ChallengeTagItem, useChallengeTagLabelMap } from '@Utils/Shared'
+import { ChallengeTagItem, ChallengeTagList, useChallengeTagLabelMap } from '@Utils/Shared'
 import { useEditChallenges } from '@Utils/useEdit'
 import api, { ChallengeInfoModel, ChallengeTag } from '@Api'
 
@@ -128,9 +128,9 @@ const GameChallengeEdit: FC = () => {
             nothingFoundMessage={t('admin.content.nothing_found')}
             onChange={(value) => setCategory(value as ChallengeTag | null)}
             renderOption={ChallengeTagItem}
-            data={Object.entries(ChallengeTag).map((tag) => {
-              const data = challengeTagLabelMap.get(tag[1])
-              return { value: tag[1], label: data?.name, ...data } as ComboboxItem
+            data={ChallengeTagList.map((tag) => {
+              const data = challengeTagLabelMap.get(tag)
+              return { value: tag, label: data?.name, ...data } as ComboboxItem
             })}
           />
           <Group justify="right">

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx
@@ -40,6 +40,7 @@ import {
   useChallengeTagLabelMap,
   ChallengeTypeItem,
   useChallengeTypeLabelMap,
+  ChallengeTagList,
 } from '@Utils/Shared'
 import { useEditChallenge, useEditChallenges } from '@Utils/useEdit'
 import api, { ChallengeTag, ChallengeType, ChallengeUpdateModel } from '@Api'
@@ -290,9 +291,9 @@ const GameChallengeEdit: FC = () => {
                 setChallengeInfo({ ...challengeInfo, tag: e as ChallengeTag })
               }}
               renderOption={ChallengeTagItem}
-              data={Object.entries(ChallengeTag).map((tag) => {
-                const data = challengeTagLabelMap.get(tag[1])
-                return { value: tag[1], label: data?.name, ...data } as ComboboxItem
+              data={ChallengeTagList.map((tag) => {
+                const data = challengeTagLabelMap.get(tag)
+                return { value: tag, label: data?.name, ...data } as ComboboxItem
               })}
             />
           </Grid.Col>

diff --git a/src/GZCTF/ClientApp/src/styles/App.css b/src/GZCTF/ClientApp/src/styles/App.css
@@ -6,7 +6,7 @@ body {
   padding: 0;
   margin: 0;
 
-  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-gray-7));
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-7));
   color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
 
   @media print {

diff --git a/src/GZCTF/ClientApp/src/styles/components/AppFooter.module.css b/src/GZCTF/ClientApp/src/styles/components/AppFooter.module.css
@@ -16,5 +16,5 @@
     padding: var(--mantine-spacing-xl);
   }
 
-  background-color: light-dark(var(--mantine-color-light-2), var(--mantine-color-dark-7));
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
 }
diff --git a/src/GZCTF/ClientApp/src/styles/components/ChallengeCard.module.css b/src/GZCTF/ClientApp/src/styles/components/ChallengeCard.module.css
@@ -25,3 +25,7 @@
     background: linear-gradient(0deg, #fff0, var(--blood-color), #fff0);
   }
 }
+
+.root[data-solved] {
+  filter: light-dark(brightness(0.9), brightness(0.8));
+}
diff --git a/src/GZCTF/ClientApp/src/styles/shared/HoverCard.module.css b/src/GZCTF/ClientApp/src/styles/shared/HoverCard.module.css
@@ -1,14 +1,18 @@
 .root {
   cursor: pointer;
-  transition: filter 0.2s;
+  transition:
+    box-shadow 0.2s,
+    filter 0.2s;
 
   @mixin hover {
     @mixin light {
-      filter: brightness(0.97);
+      filter: brightness(1.04) !important;
+      box-shadow: 0 0 12px var(--mantine-color-gray-2);
     }
 
     @mixin dark {
-      filter: brightness(1.2);
+      filter: brightness(1.2) !important;
+      box-shadow: 0 0 12px var(--mantine-color-gray-7);
     }
   }
 }
diff --git a/src/GZCTF/ClientApp/src/utils/Shared.tsx b/src/GZCTF/ClientApp/src/utils/Shared.tsx
@@ -103,6 +103,8 @@ export const ChallengeTypeItem: SelectProps['renderOption'] = ({ option }) => {
   )
 }
 
+export const ChallengeTagList = Object.values(ChallengeTag)
+
 export const useChallengeTagLabelMap = () => {
   const { t } = useTranslation()
   const theme = useMantineTheme()
@@ -120,16 +122,6 @@ export const useChallengeTagLabelMap = () => {
         colors: theme.colors['teal'],
       },
     ],
-    [
-      ChallengeTag.Crypto,
-      {
-        desrc: t('challenge.tag.crypto'),
-        icon: mdiMatrix,
-        name: ChallengeTag.Crypto,
-        color: 'violet',
-        colors: theme.colors['violet'],
-      },
-    ],
     [
       ChallengeTag.Pwn,
       {
@@ -160,6 +152,16 @@ export const useChallengeTagLabelMap = () => {
         colors: theme.colors['yellow'],
       },
     ],
+    [
+      ChallengeTag.Crypto,
+      {
+        desrc: t('challenge.tag.crypto'),
+        icon: mdiMatrix,
+        name: ChallengeTag.Crypto,
+        color: 'violet',
+        colors: theme.colors['violet'],
+      },
+    ],
     [
       ChallengeTag.Blockchain,
       {
@@ -186,8 +188,8 @@ export const useChallengeTagLabelMap = () => {
         desrc: t('challenge.tag.hardware'),
         icon: mdiChip,
         name: ChallengeTag.Hardware,
-        color: 'grape',
-        colors: theme.colors['grape'],
+        color: revert,
+        colors: theme.colors[revert],
       },
     ],
     [
@@ -206,8 +208,8 @@ export const useChallengeTagLabelMap = () => {
         desrc: t('challenge.tag.ppc'),
         icon: mdiConsole,
         name: ChallengeTag.PPC,
-        color: revert,
-        colors: theme.colors[revert],
+        color: 'cyan',
+        colors: theme.colors['cyan'],
       },
     ],
     [
@@ -236,8 +238,8 @@ export const useChallengeTagLabelMap = () => {
         desrc: t('challenge.tag.pentest'),
         icon: mdiLanPending,
         name: ChallengeTag.Pentest,
-        color: 'cyan',
-        colors: theme.colors['cyan'],
+        color: 'grape',
+        colors: theme.colors['grape'],
       },
     ],
   ])
@@ -258,7 +260,7 @@ export const ChallengeTagItem: SelectProps['renderOption'] = ({ option }) => {
 
   return (
     <Group wrap="nowrap">
-      <Icon color={colors[4]} path={icon} size={1.2} />
+      <Icon color={colors[5]} path={icon} size={1.2} />
       <Stack gap={0}>
         <Text size="sm" fw="bold">
           {name}