wip(frontend): package MDIcon

ElaBosak233 · May 30, 2024 · 71b5f9c · 71b5f9c
1 parent 4e658c0
commit 71b5f9c
Show file tree

Hide file tree

Showing 49 changed files with 510 additions and 348 deletions.
diff --git a/web/src/components/layouts/withGame.tsx b/web/src/components/layouts/withGame.tsx
@@ -48,7 +48,17 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 							<Group>
 								<Button
 									size="md"
-									leftSection={<MDIcon>flag</MDIcon>}
+									leftSection={
+										<MDIcon
+											c={
+												path === "/challenges"
+													? "white"
+													: "brand"
+											}
+										>
+											flag
+										</MDIcon>
+									}
 									variant={
 										path === "/challenges"
 											? "filled"
@@ -62,7 +72,17 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 								</Button>
 								<Button
 									size="md"
-									leftSection={<MDIcon>trending_up</MDIcon>}
+									leftSection={
+										<MDIcon
+											c={
+												path === "/scoreboard"
+													? "white"
+													: "brand"
+											}
+										>
+											trending_up
+										</MDIcon>
+									}
 									variant={
 										path === "/scoreboard"
 											? "filled"

diff --git a/web/src/components/modals/ChallengeModal.tsx b/web/src/components/modals/ChallengeModal.tsx
@@ -264,25 +264,20 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 							}}
 						>
 							<Group gap={6}>
-								<Box
-									sx={{
-										color:
-											colorScheme === "light"
-												? challenge?.category?.color ||
-													"#3F51B5"
-												: lighten(
-														challenge?.category
-															?.color ||
-															"#3F51B5",
-														0.15
-													),
-										display: "flex",
-										alignItems: "center",
-									}}
-									className="no-select"
+								<MDIcon
+									color={
+										colorScheme === "light"
+											? challenge?.category?.color ||
+												"#3F51B5"
+											: lighten(
+													challenge?.category
+														?.color || "#3F51B5",
+													0.15
+												)
+									}
 								>
-									<MDIcon>{challenge?.category?.icon}</MDIcon>
-								</Box>
+									{challenge?.category?.icon}
+								</MDIcon>
 								<Text fw={700}>{challenge?.title}</Text>
 							</Group>
 							<Box
@@ -388,17 +383,16 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 													px={10}
 													gap={10}
 												>
-													<ThemeIcon
-														variant="transparent"
+													<MDIcon
 														c={
 															colorScheme ===
 															"light"
 																? "gray.5"
 																: "gray.3"
 														}
 													>
-														<MDIcon>lan</MDIcon>
-													</ThemeIcon>
+														lan
+													</MDIcon>
 
 													<Flex
 														align={"center"}
@@ -412,19 +406,16 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 														<Text>
 															{nat.src_port}
 														</Text>
-														<ThemeIcon
-															variant="transparent"
+														<MDIcon
 															c={
 																colorScheme ===
 																"light"
 																	? "gray.5"
 																	: "gray.3"
 															}
 														>
-															<MDIcon>
-																arrow_right_alt
-															</MDIcon>
-														</ThemeIcon>
+															arrow_right_alt
+														</MDIcon>
 													</Flex>
 												</Flex>
 											}
@@ -530,7 +521,13 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 									variant="filled"
 									placeholder="Flag"
 									w={"85%"}
-									leftSection={<MDIcon>flag</MDIcon>}
+									leftSection={
+										<MDIcon
+											color={challenge?.category?.color}
+										>
+											flag
+										</MDIcon>
+									}
 									sx={{
 										input: {
 											"&:focus": {

diff --git a/web/src/components/modals/GameTeamApplyModal.tsx b/web/src/components/modals/GameTeamApplyModal.tsx
@@ -125,9 +125,7 @@ export default function GameTeamApplyModal(props: GameTeamApplyModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>people</MDIcon>
-							</ThemeIcon>
+							<MDIcon>people</MDIcon>
 							<Text fw={600}>选择团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -157,7 +155,7 @@ export default function GameTeamApplyModal(props: GameTeamApplyModalProps) {
 												createGameTeam(team);
 											}}
 										>
-											<MDIcon>check</MDIcon>
+											<MDIcon c={"white"}>check</MDIcon>
 										</ActionIcon>
 									</Flex>
 								))}

diff --git a/web/src/components/modals/TeamCreateModal.tsx b/web/src/components/modals/TeamCreateModal.tsx
@@ -98,9 +98,7 @@ export default function TeamCreateModal(props: TeamCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>group_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>group_add</MDIcon>
 							<Text fw={600}>创建团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -139,7 +137,9 @@ export default function TeamCreateModal(props: TeamCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>

diff --git a/web/src/components/modals/TeamEditModal.tsx b/web/src/components/modals/TeamEditModal.tsx
@@ -177,9 +177,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>person_remove</MDIcon>
-						</ThemeIcon>
+						<MDIcon>person_remove</MDIcon>
 						<Text fw={600}>踢出成员</Text>
 					</Flex>
 					<Divider my={10} />
@@ -205,9 +203,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent" color="orange">
-							<MDIcon>star</MDIcon>
-						</ThemeIcon>
+						<MDIcon>star</MDIcon>
 						<Text fw={600}>转让队长</Text>
 					</Flex>
 					<Divider my={10} />
@@ -232,9 +228,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent" color="red">
-							<MDIcon>swap_horiz</MDIcon>
-						</ThemeIcon>
+						<MDIcon color={"red"}>swap_horiz</MDIcon>
 						<Text fw={600}>解散团队</Text>
 					</Flex>
 					<Divider my={10} />
@@ -285,9 +279,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>group_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>group_add</MDIcon>
 							<Text fw={600}>团队详情</Text>
 						</Flex>
 						<Divider my={10} />
@@ -442,14 +434,11 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 														label="队长"
 														withArrow
 													>
-														<ThemeIcon
-															variant="transparent"
-															color="yellow"
+														<MDIcon
+															color={"yellow"}
 														>
-															<MDIcon>
-																star
-															</MDIcon>
-														</ThemeIcon>
+															star
+														</MDIcon>
 													</Tooltip>
 												)}
 												{isCaptain &&
@@ -511,7 +500,11 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 										</Button>
 										<Button
 											type="submit"
-											leftSection={<MDIcon>check</MDIcon>}
+											leftSection={
+												<MDIcon c={"white"}>
+													check
+												</MDIcon>
+											}
 										>
 											更新
 										</Button>

diff --git a/web/src/components/modals/TeamJoinModal.tsx b/web/src/components/modals/TeamJoinModal.tsx
@@ -81,9 +81,7 @@ export default function TeamJoinModal(props: TeamJoinModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>waving_hand</MDIcon>
-							</ThemeIcon>
+							<MDIcon>waving_hand</MDIcon>
 							<Text fw={600}>加入团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -103,7 +101,9 @@ export default function TeamJoinModal(props: TeamJoinModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										加入
 									</Button>

diff --git a/web/src/components/modals/admin/ChallengeCreateModal.tsx b/web/src/components/modals/admin/ChallengeCreateModal.tsx
@@ -86,9 +86,7 @@ export default function ChallengeCreateModal(props: ChallengeCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>collections_bookmark</MDIcon>
-							</ThemeIcon>
+							<MDIcon>collections_bookmark</MDIcon>
 							<Text fw={600}>创建题目</Text>
 						</Flex>
 						<Divider my={10} />
@@ -146,7 +144,9 @@ export default function ChallengeCreateModal(props: ChallengeCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>

diff --git a/web/src/components/modals/admin/ChallengeFlagCreateModal.tsx b/web/src/components/modals/admin/ChallengeFlagCreateModal.tsx
@@ -82,9 +82,7 @@ export default function ChallengeFlagCreateModal(
 					w={"40rem"}
 				>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>flag</MDIcon>
-						</ThemeIcon>
+						<MDIcon>flag</MDIcon>
 						<Text fw={600}>创建 Flag</Text>
 					</Flex>
 					<Divider my={10} />
@@ -138,7 +136,9 @@ export default function ChallengeFlagCreateModal(
 							<Flex mt={20} justify={"end"}>
 								<Button
 									type="submit"
-									leftSection={<MDIcon>check</MDIcon>}
+									leftSection={
+										<MDIcon c={"white"}>check</MDIcon>
+									}
 								>
 									创建
 								</Button>

diff --git a/web/src/components/modals/admin/ChallengeSelectModal.tsx b/web/src/components/modals/admin/ChallengeSelectModal.tsx
@@ -68,9 +68,7 @@ export default function ChallengeSelectModal(props: ChallengeSelectModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>collections_bookmark</MDIcon>
-							</ThemeIcon>
+							<MDIcon>collections_bookmark</MDIcon>
 							<Text fw={600}>选择题目</Text>
 						</Flex>
 						<Divider my={10} />
@@ -90,16 +88,13 @@ export default function ChallengeSelectModal(props: ChallengeSelectModalProps) {
 									>
 										<Group gap={15}>
 											<Badge>{challenge?.id}</Badge>
-											<ThemeIcon
-												variant="transparent"
+											<MDIcon
 												color={
 													challenge?.category?.color
 												}
 											>
-												<MDIcon>
-													{challenge?.category?.icon}
-												</MDIcon>
-											</ThemeIcon>
+												{challenge?.category?.icon}
+											</MDIcon>
 											<Text fw={700} size="1rem">
 												{challenge?.title}
 											</Text>