frontend: update styles

GZTimeWalker · May 6, 2023 · 8e8f348 · 8e8f348
1 parent 8dea6bb
commit 8e8f348
Show file tree

Hide file tree

Showing 33 changed files with 73 additions and 136 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx b/src/GZCTF/ClientApp/src/components/ChallengeCard.tsx
@@ -71,7 +71,7 @@ const ChallengeCard: FC<ChallengeCardProps> = (props: ChallengeCardProps) => {
         }),
       })}
     >
-      <Stack spacing="sm" style={{ position: 'relative', zIndex: 99 }}>
+      <Stack spacing="sm" pos="relative" style={{ zIndex: 99 }}>
         <Group noWrap position="apart" spacing="xs">
           <Text lineClamp={1} weight={700} size={theme.fontSizes.lg}>
             {challenge.title}
@@ -81,17 +81,12 @@ const ChallengeCard: FC<ChallengeCardProps> = (props: ChallengeCardProps) => {
         <Divider />
         <Group noWrap position="apart" align="start">
           <Group noWrap position="center">
-            <Text
-              align="center"
-              weight={700}
-              size={18}
-              sx={(theme) => ({ fontFamily: theme.fontFamilyMonospace })}
-            >
+            <Text align="center" weight={700} size={18} ff={theme.fontFamilyMonospace}>
               {challenge.score} pts
             </Text>
           </Group>
           <Stack spacing="xs">
-            <Title order={6} align="center" style={{ marginTop: `calc(${theme.spacing.xs} / 2)` }}>
+            <Title order={6} align="center" mt={`calc(${theme.spacing.xs} / 2)`}>
               {`${challenge.solved} `}
               <Text color="dimmed" size="xs" inherit span>
                 支队伍攻克

diff --git a/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx b/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx
@@ -54,8 +54,8 @@ export const Countdown: FC<{ time: string }> = ({ time }) => {
   }, [])
 
   return (
-    <Card w="5rem" p="0px 4px" style={{ textAlign: 'center' }}>
-      <Text size="sm" style={{ fontWeight: 700 }}>
+    <Card w="5rem" p="0px 4px" ta="center">
+      <Text size="sm" weight={700}>
         {countdown.asSeconds() > 0 ? countdown.format('HH:mm:ss') : '00:00:00'}
       </Text>
     </Card>
@@ -300,11 +300,7 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
     >
       <Stack spacing="sm">
         <Divider />
-        <Stack
-          spacing="sm"
-          justify="space-between"
-          style={{ position: 'relative', minHeight: '20vh' }}
-        >
+        <Stack spacing="sm" justify="space-between" pos="relative" mih="20vh">
           <LoadingOverlay visible={!challenge} />
           <Group grow noWrap position="right" align="flex-start" spacing={2}>
             <Box className={classes.root} mih="4rem">
@@ -359,7 +355,7 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
               {challenge.hints.map((hint) => (
                 <Group spacing="xs" align="flex-start" noWrap>
                   <Icon path={mdiLightbulbOnOutline} size={0.8} color={theme.colors.yellow[5]} />
-                  <Text key={hint} size="sm" style={{ maxWidth: 'calc(100% - 2rem)' }}>
+                  <Text key={hint} size="sm" maw="calc(100% - 2rem)">
                     {hint}
                   </Text>
                 </Group>

diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -69,14 +69,8 @@ const ChallengePanel: FC = () => {
   // skeleton for loading
   if (!challenges) {
     return (
-      <Group
-        spacing="sm"
-        noWrap
-        position="apart"
-        align="flex-start"
-        style={{ maxWidth: 'calc(100% - 20rem)' }}
-      >
-        <Stack sx={{ minWidth: '10rem' }} spacing={6}>
+      <Group spacing="sm" noWrap position="apart" align="flex-start" maw="calc(100% - 20rem)">
+        <Stack miw="10rem" spacing={6}>
           {Array(8)
             .fill(null)
             .map((_v, i) => (
@@ -101,7 +95,7 @@ const ChallengePanel: FC = () => {
             .fill(null)
             .map((_v, i) => (
               <Card key={i} radius="md" shadow="sm">
-                <Stack spacing="sm" style={{ position: 'relative', zIndex: 99 }}>
+                <Stack spacing="sm" pos="relative" style={{ zIndex: 99 }}>
                   <Skeleton height="1.5rem" width="70%" mt={4} />
                   <Divider />
                   <Group noWrap position="apart" align="start">
@@ -127,7 +121,7 @@ const ChallengePanel: FC = () => {
 
   if (allChallenges.length === 0) {
     return (
-      <Center sx={{ width: 'calc(100% - 20rem)', height: 'calc(100vh - 100px)' }}>
+      <Center w="calc(100% - 20rem)" h="calc(100vh - 100px)">
         <Empty
           bordered
           description="Ouch! 这个比赛还没有可用题目呢……"
@@ -209,13 +203,7 @@ const ChallengePanel: FC = () => {
         scrollbarSize={4}
       >
         {currentChallenges && currentChallenges.length ? (
-          <SimpleGrid
-            cols={DEFAULT_COLS}
-            spacing="sm"
-            p="xs"
-            style={{ paddingTop: 0 }}
-            breakpoints={GRID_BREAKPOINTS}
-          >
+          <SimpleGrid cols={DEFAULT_COLS} spacing="sm" p="xs" pt={0} breakpoints={GRID_BREAKPOINTS}>
             {currentChallenges?.map((chal) => (
               <ChallengeCard
                 key={chal.id}

diff --git a/src/GZCTF/ClientApp/src/components/HintList.tsx b/src/GZCTF/ClientApp/src/components/HintList.tsx
@@ -41,11 +41,11 @@ export const HintList: FC<HintListProps> = (props) => {
 
   return (
     <Input.Wrapper {...rest}>
-      <ScrollArea offsetScrollbars scrollbarSize={4} style={{ height }}>
+      <ScrollArea offsetScrollbars scrollbarSize={4} h={height}>
         <Stack spacing="xs">
           {hintdict.map((kv) => (
             <TextInput
-              style={{ marginRight: 4 }}
+              mr={4}
               value={kv.hint}
               disabled={disabled}
               key={kv.key}
@@ -57,11 +57,7 @@ export const HintList: FC<HintListProps> = (props) => {
               }
             />
           ))}
-          <Button
-            style={{ marginRight: 4 }}
-            leftIcon={<Icon path={mdiPlus} size={1} />}
-            onClick={handleAdd}
-          >
+          <Button mr={4} leftIcon={<Icon path={mdiPlus} size={1} />} onClick={handleAdd}>
             添加提示
           </Button>
         </Stack>

diff --git a/src/GZCTF/ClientApp/src/components/MobileScoreboardItemModal.tsx b/src/GZCTF/ClientApp/src/components/MobileScoreboardItemModal.tsx
@@ -96,12 +96,7 @@ const MobileScoreboardItemModal: FC<MobileScoreboardItemModalProps> = (props) =>
               <TeamRadarMap indicator={indicator} value={values} name={item?.name ?? ''} />
             )}
           </Center>
-          <Group
-            grow
-            style={{
-              textAlign: 'center',
-            }}
-          >
+          <Group grow ta="center">
             <Stack spacing={1}>
               <Text weight={700} size="sm" className={classes.mono}>
                 {item?.rank}

diff --git a/src/GZCTF/ClientApp/src/components/MobileScoreboardTable.tsx b/src/GZCTF/ClientApp/src/components/MobileScoreboardTable.tsx
@@ -112,7 +112,7 @@ const MobileScoreboardTable: FC<ScoreboardProps> = ({ organization, setOrganizat
             }}
           />
         )}
-        <Box style={{ position: 'relative' }}>
+        <Box pos="relative">
           <Box
             sx={{
               maxWidth: '100%',

diff --git a/src/GZCTF/ClientApp/src/components/PostCard.tsx b/src/GZCTF/ClientApp/src/components/PostCard.tsx
@@ -36,7 +36,7 @@ const PostCard: FC<PostCardProps> = ({ post, onTogglePinned }) => {
       <Blockquote
         color={theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7]}
         cite={
-          <Group position="apart" style={{ margin: 'auto', fontStyle: 'normal' }}>
+          <Group position="apart" m="auto" fs="normal">
             <Group spacing={5} position="right">
               <Avatar src={post.authorAvatar} size="sm">
                 {post.authorName?.slice(0, 1) ?? 'A'}

diff --git a/src/GZCTF/ClientApp/src/components/ScoreboardItemModal.tsx b/src/GZCTF/ClientApp/src/components/ScoreboardItemModal.tsx
@@ -95,12 +95,7 @@ const ScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
               <TeamRadarMap indicator={indicator} value={values} name={item?.name ?? ''} />
             )}
           </Center>
-          <Group
-            grow
-            style={{
-              textAlign: 'center',
-            }}
-          >
+          <Group grow ta="center">
             <Stack spacing={2}>
               <Text weight={700} size="sm" className={classes.mono}>
                 {item?.rank}

diff --git a/src/GZCTF/ClientApp/src/components/ScoreboardTable.tsx b/src/GZCTF/ClientApp/src/components/ScoreboardTable.tsx
@@ -228,7 +228,7 @@ const TableRow: FC<{
                   classNames={tooltipClasses}
                   transitionProps={{ transition: 'pop' }}
                   label={
-                    <Stack align="flex-start" spacing={0} style={{ maxWidth: '20rem' }}>
+                    <Stack align="flex-start" spacing={0} maw="20rem">
                       <Text lineClamp={3}>{item.title}</Text>
                       <Text color={tag.color} style={textStyle}>
                         + {chal?.score} pts
@@ -316,7 +316,7 @@ const ScoreboardTable: FC<ScoreboardProps> = ({ organization, setOrganization })
             />
           </Group>
         )}
-        <Box style={{ position: 'relative' }}>
+        <Box pos="relative">
           <Box
             sx={{
               maxWidth: '100%',
@@ -386,7 +386,7 @@ const ScoreboardTable: FC<ScoreboardProps> = ({ organization, setOrganization })
         bloodBonusMap={BloodData}
         opened={itemDetailOpened}
         withCloseButton={false}
-        size="40rem"
+        size="45rem"
         onClose={() => setItemDetailOpened(false)}
         item={currentItem}
       />

diff --git a/src/GZCTF/ClientApp/src/components/StrengthPasswordInput.tsx b/src/GZCTF/ClientApp/src/components/StrengthPasswordInput.tsx
@@ -89,7 +89,7 @@ const StrengthPasswordInput: FC<StrengthPasswordInputProps> = (props) => {
         />
       </Popover.Target>
       <Popover.Dropdown>
-        <Progress color={color} value={strength} size={5} style={{ marginBottom: 10 }} />
+        <Progress color={color} value={strength} size={5} mb={10} />
         {checks}
       </Popover.Dropdown>
     </Popover>

diff --git a/src/GZCTF/ClientApp/src/components/TeamCreateModal.tsx b/src/GZCTF/ClientApp/src/components/TeamCreateModal.tsx
@@ -48,7 +48,7 @@ const TeamCreateModal: FC<TeamEditModalProps> = (props) => {
   return (
     <Modal {...modalProps}>
       {isOwnTeam ? (
-        <Stack spacing="lg" p={40} style={{ textAlign: 'center' }}>
+        <Stack spacing="lg" p={40} ta="center">
           <Center>
             <Icon color={theme.colors.red[7]} path={mdiCloseCircle} size={4} />
           </Center>

diff --git a/src/GZCTF/ClientApp/src/components/TeamEditModal.tsx b/src/GZCTF/ClientApp/src/components/TeamEditModal.tsx
@@ -374,7 +374,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
           </Stack>
         </ScrollArea>
 
-        <Group grow style={{ margin: 'auto', width: '100%' }}>
+        <Group grow m="auto" w="100%">
           <Button
             fullWidth
             color="red"
@@ -421,15 +421,13 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
               withCloseButton: false,
             })
           }}
-          style={{
-            margin: '0 auto 20px auto',
-            minWidth: '220px',
-            minHeight: '220px',
-          }}
+          m="0 auto 20px auto"
+          miw={220}
+          mih={220}
           maxSize={3 * 1024 * 1024}
           accept={ACCEPT_IMAGE_MIME_TYPE}
         >
-          <Group position="center" spacing="xl" style={{ minHeight: 240, pointerEvents: 'none' }}>
+          <Group position="center" spacing="xl" mih={240} style={{ pointerEvents: 'none' }}>
             {avatarFile ? (
               <Image fit="contain" src={URL.createObjectURL(avatarFile)} alt="avatar" />
             ) : (

diff --git a/src/GZCTF/ClientApp/src/components/TeamRank.tsx b/src/GZCTF/ClientApp/src/components/TeamRank.tsx
@@ -73,12 +73,7 @@ const TeamRank: FC<PaperProps> = (props) => {
             </Stack>
           </Skeleton>
         </Group>
-        <Group
-          grow
-          style={{
-            textAlign: 'center',
-          }}
-        >
+        <Group grow ta="center">
           <Stack spacing={2}>
             <Skeleton visible={!data}>
               <Text className={classes.number}>{data?.rank?.rank ?? '0'}</Text>

diff --git a/src/GZCTF/ClientApp/src/components/WithGameTab.tsx b/src/GZCTF/ClientApp/src/components/WithGameTab.tsx
@@ -64,21 +64,21 @@ const GameCountdown: FC<{ game?: DetailedGameInfoModel }> = ({ game }) => {
 
   return (
     <Card
+      w="9rem"
+      ta="center"
+      pt={4}
       style={{
-        width: '9rem',
-        textAlign: 'center',
-        paddingTop: '4px',
         overflow: 'visible',
       }}
     >
-      <Text style={{ fontWeight: 700 }} lineClamp={1}>
+      <Text weight={700} lineClamp={1}>
         {countdown.asHours() > 999
           ? '比赛还会很久'
           : countdown.asSeconds() > 0
           ? `${Math.floor(countdown.asHours())} : ${countdown.format('mm : ss')}`
           : '比赛已结束'}
       </Text>
-      <Card.Section style={{ marginTop: 4 }}>
+      <Card.Section mt={4}>
         <CustomProgress percentage={progress} py={0} />
       </Card.Section>
     </Card>
@@ -156,7 +156,7 @@ const WithGameTab: FC<React.PropsWithChildren> = ({ children }) => {
   }, [game, role, location])
 
   return (
-    <Stack style={{ position: 'relative' }}>
+    <Stack pos="relative">
       <LoadingOverlay
         visible={!game}
         overlayOpacity={1}

diff --git a/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx b/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx
@@ -15,10 +15,10 @@ const WithWiderScreen: FC<WithWiderScreenProps> = ({ children, minWidth = 1080 }
   return tooSmall ? (
     <Stack spacing={0} align="center" justify="center" h="calc(100vh - 32px)">
       <IconWiderScreenRequired />
-      <Title order={1} color="#00bfa5" style={{ fontWeight: 'lighter' }}>
+      <Title order={1} color="#00bfa5" weight="lighter">
         页面宽度不足
       </Title>
-      <Text style={{ fontWeight: 'bold' }}>请使用更宽的设备浏览本页面</Text>
+      <Text weight="bold">请使用更宽的设备浏览本页面</Text>
     </Stack>
   ) : (
     <>{children}</>

diff --git a/src/GZCTF/ClientApp/src/components/WriteupSubmitModal.tsx b/src/GZCTF/ClientApp/src/components/WriteupSubmitModal.tsx
@@ -147,7 +147,7 @@ export const WriteupSubmitModal: FC<WriteupSubmitModalProps> = ({ gameId, wpddl,
                 一份标准 PDF 文档
               </Text>
               ，除题解外还需附有每道题目获得
-              <Text mx={5} span style={{ fontFamily: theme.fontFamilyMonospace }}>
+              <Text mx={5} span ff={theme.fontFamilyMonospace}>
                 flag
               </Text>
               字符串时的相关截图。
@@ -178,12 +178,7 @@ export const WriteupSubmitModal: FC<WriteupSubmitModalProps> = ({ gameId, wpddl,
                 <Text weight={600} size="md">
                   {data?.name ?? 'Writeup-1-2-2022-10-11T12:00:00.pdf'}
                 </Text>
-                <Text
-                  weight={600}
-                  size="sm"
-                  color="dimmed"
-                  style={{ fontFamily: theme.fontFamilyMonospace }}
-                >
+                <Text weight={600} size="sm" color="dimmed" ff={theme.fontFamilyMonospace}>
                   {data?.fileSize ? hunamize(data.fileSize) : '456.64 KB'}
                 </Text>
               </Stack>

diff --git a/src/GZCTF/ClientApp/src/components/admin/BloodBonusModel.tsx b/src/GZCTF/ClientApp/src/components/admin/BloodBonusModel.tsx
@@ -84,7 +84,7 @@ const BloodBonusModel: FC<ModalProps> = (props) => {
           value={thirdBloodBonus / 10}
           onChange={(value) => value && setThirdBloodBonus(Math.floor(value * 10))}
         />
-        <Group grow style={{ margin: 'auto', width: '100%' }}>
+        <Group grow m="auto" w="100%">
           <Button fullWidth disabled={disabled} onClick={onUpdate}>
             保存更改
           </Button>

diff --git a/src/GZCTF/ClientApp/src/components/admin/ChallengePreviewModal.tsx b/src/GZCTF/ClientApp/src/components/admin/ChallengePreviewModal.tsx
@@ -100,14 +100,10 @@ const ChallengePreviewModal: FC<ChallengePreviewModalProps> = (props) => {
     >
       <Stack spacing="sm">
         <Divider />
-        <Stack
-          spacing="sm"
-          justify="space-between"
-          style={{ position: 'relative', minHeight: '20vh' }}
-        >
+        <Stack spacing="sm" justify="space-between" pos="relative" mih="20vh">
           <LoadingOverlay visible={!challenge} />
           <Group grow noWrap position="right" align="flex-start" spacing={2}>
-            <Box className={classes.root} style={{ minHeight: '4rem' }}>
+            <Box className={classes.root} mih="4rem">
               {attachmentType !== FileType.None && (
                 <Popover
                   opened={downloadOpened}
@@ -166,7 +162,7 @@ const ChallengePreviewModal: FC<ChallengePreviewModalProps> = (props) => {
               {challenge.hints.map((hint) => (
                 <Group spacing="xs" align="flex-start" noWrap>
                   <Icon path={mdiLightbulbOnOutline} size={0.8} color={theme.colors.yellow[5]} />
-                  <Text key={hint} size="sm" style={{ maxWidth: 'calc(100% - 2rem)' }}>
+                  <Text key={hint} size="sm" maw="calc(100% - 2rem)">
                     {hint}
                   </Text>
                 </Group>

diff --git a/src/GZCTF/ClientApp/src/components/admin/FlagCreateModal.tsx b/src/GZCTF/ClientApp/src/components/admin/FlagCreateModal.tsx
@@ -80,7 +80,7 @@ const FlagCreateModal: FC<ModalProps> = (props) => {
             },
           })}
         />
-        <Group grow style={{ margin: 'auto', width: '100%' }}>
+        <Group grow m="auto" w="100%">
           <Button fullWidth disabled={disabled} onClick={onCreate}>
             创建 flag
           </Button>

diff --git a/src/GZCTF/ClientApp/src/components/admin/FlagEditPanel.tsx b/src/GZCTF/ClientApp/src/components/admin/FlagEditPanel.tsx
@@ -56,7 +56,7 @@ const FlagCard: FC<FlagCardProps> = ({ flag, onDelete, unifiedAttachment }) => {
               },
             }}
           />
-          <Text color="dimmed" size="sm" style={{ fontFamily: theme.fontFamilyMonospace }}>
+          <Text color="dimmed" size="sm" ff={theme.fontFamilyMonospace}>
             {attachment?.type} {shortURL}
           </Text>
         </Stack>
-Original file line number
+Diff line change
@@ Expand Up @@
                 }}
               />
             )}
-            <Box style={{ position: 'relative' }}>
+            <Box pos="relative">
               <Box
                 sx={{
                   maxWidth: '100%',
@@ Expand Down @@