Skip to content

Commit 5a2d17e

Browse files
newfish-cmyknewfish-cmyk
authored
fix(web): fix function template darkmode & fix function list spacing (#1369)
1 parent dc5d0a4 commit 5a2d17e

File tree

7 files changed

+47
-23
lines changed

7 files changed

+47
-23
lines changed

‎web/src/components/SectionList/index.module.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
li {
66
cursor: pointer;
77
display: flex;
8-
height: 42px;
8+
height: 24px;
99
align-items: center;
1010
justify-content: space-between;
1111
padding: 0px 12px;
@@ -26,7 +26,7 @@
2626

2727
&:hover,
2828
&.active {
29-
background-color: rgba(0, 179, 176, 0.10);
29+
background-color: #00B3B01A;
3030
color: var(--chakra-colors-primary-600);
3131

3232
svg {

‎web/src/layouts/Template.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ export default function TemplateLayout() {
2828
<Header width="max-w-screen-xl" />
2929
</div>
3030
<div className="overflow-auto">
31-
<div className="fixed bottom-0 left-0 right-0 top-0 -z-40 bg-white"></div>
31+
<div
32+
className={clsx("fixed bottom-0 left-0 right-0 top-0 -z-40", !darkMode && "bg-white")}
33+
></div>
3234

3335
<div className="flex justify-center">
3436
<div className="w-full max-w-screen-xl">

‎web/src/pages/app/setting/UserInfo/Mods/PhoneEditor.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
Input,
1010
InputGroup,
1111
InputRightElement,
12+
useColorMode,
1213
VStack,
1314
} from "@chakra-ui/react";
1415

@@ -31,6 +32,8 @@ export default function PhoneEditor(props: { handleBack: any }) {
3132
const [oldPhone, setOldPhone] = useState("");
3233
const [newPhone, setNewPhone] = useState("");
3334
const bindPhone = useBindPhoneMutation();
35+
const { colorMode } = useColorMode();
36+
const darkMode = colorMode === "dark";
3437

3538
const { showSuccess, updateUserInfo } = useGlobalStore();
3639

@@ -76,7 +79,7 @@ export default function PhoneEditor(props: { handleBack: any }) {
7679
<Input
7780
{...register("oldPhoneNumber", { required: true })}
7881
width={64}
79-
bg={"#F8FAFB"}
82+
bg={!darkMode ? "#F8FAFB" : "none"}
8083
border={"1px"}
8184
borderColor={"#D5D6E1"}
8285
onChange={(e) => {
@@ -93,7 +96,7 @@ export default function PhoneEditor(props: { handleBack: any }) {
9396
<Input
9497
{...register("oldSmsCode", { required: true })}
9598
width={64}
96-
bg={"#F8FAFB"}
99+
bg={!darkMode ? "#F8FAFB" : "none"}
97100
border={"1px"}
98101
borderColor={"#D5D6E1"}
99102
/>
@@ -104,7 +107,7 @@ export default function PhoneEditor(props: { handleBack: any }) {
104107
<Input
105108
{...register("newPhoneNumber", { required: true })}
106109
width={64}
107-
bg={"#F8FAFB"}
110+
bg={!darkMode ? "#F8FAFB" : "none"}
108111
border={"1px"}
109112
borderColor={"#D5D6E1"}
110113
onChange={(e) => {
@@ -121,7 +124,7 @@ export default function PhoneEditor(props: { handleBack: any }) {
121124
<Input
122125
{...register("newSmsCode", { required: true })}
123126
width={64}
124-
bg={"#F8FAFB"}
127+
bg={!darkMode ? "#F8FAFB" : "none"}
125128
border={"1px"}
126129
borderColor={"#D5D6E1"}
127130
/>

‎web/src/pages/app/setting/UserInfo/Mods/UsernameEditor.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useForm } from "react-hook-form";
22
import { useTranslation } from "react-i18next";
33
import { ChevronLeftIcon } from "@chakra-ui/icons";
4-
import { Box, Button, FormControl, Input, VStack } from "@chakra-ui/react";
4+
import { Box, Button, FormControl, Input, useColorMode, VStack } from "@chakra-ui/react";
55

66
import { useBindUsernameMutation } from "../service";
77

@@ -12,6 +12,8 @@ export default function UsernameEditor(props: { handleBack: any }) {
1212
const { t } = useTranslation();
1313
const bindUsername = useBindUsernameMutation();
1414
const { userInfo, updateUserInfo, showSuccess } = useGlobalStore((state) => state);
15+
const { colorMode } = useColorMode();
16+
const darkMode = colorMode === "dark";
1517

1618
const {
1719
register,
@@ -47,7 +49,7 @@ export default function UsernameEditor(props: { handleBack: any }) {
4749
})}
4850
defaultValue={userInfo?.username}
4951
width={64}
50-
bg={"#F8FAFB"}
52+
bg={!darkMode ? "#F8FAFB" : "none"}
5153
border={"1px"}
5254
borderColor={"#D5D6E1"}
5355
/>

‎web/src/pages/app/setting/UserInfo/index.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useRef, useState } from "react";
22
import { ChevronRightIcon, EditIcon } from "@chakra-ui/icons";
3-
import { Avatar, Box, Divider } from "@chakra-ui/react";
3+
import { Avatar, Box, Divider, useColorMode } from "@chakra-ui/react";
4+
import clsx from "clsx";
45
import { t } from "i18next";
56

67
import { hidePhoneNumber } from "@/utils/format";
@@ -22,6 +23,8 @@ export default function UserInfo() {
2223
const { userInfo } = useGlobalStore((state) => state);
2324

2425
const fileInputRef = useRef<HTMLInputElement>(null);
26+
const { colorMode } = useColorMode();
27+
const darkMode = colorMode === "dark";
2528

2629
const handleClick = () => {
2730
if (fileInputRef.current) {
@@ -46,7 +49,7 @@ export default function UserInfo() {
4649
};
4750

4851
return (
49-
<Box className="flex justify-center pb-4 text-lg">
52+
<Box className={clsx("flex justify-center pb-4 text-lg", showItem === "" && "pt-12")}>
5053
{showItem === "" && (
5154
<>
5255
<Box className="flex flex-col pr-10">
@@ -75,11 +78,13 @@ export default function UserInfo() {
7578
</span>
7679
</div>
7780
</Box>
78-
<Box className="w-[270px]">
81+
<Box className="w-[270px] pt-1">
7982
<div className="flex flex-col pb-4">
80-
<span className="pb-3 text-xl text-grayModern-900">{t("SettingPanel.UserName")}</span>
83+
<span className={clsx("pb-3 text-xl", !darkMode && "text-grayModern-900")}>
84+
{t("SettingPanel.UserName")}
85+
</span>
8186
<span className="flex justify-between text-base">
82-
<span className="text-grayModern-700">{userInfo?.username}</span>
87+
<span className={!darkMode ? "text-grayModern-700" : ""}>{userInfo?.username}</span>
8388
<span
8489
className="flex cursor-pointer items-center text-[#0884DD]"
8590
onClick={() => {
@@ -91,9 +96,11 @@ export default function UserInfo() {
9196
</span>
9297
</div>
9398
<div className="flex flex-col pb-4">
94-
<span className="pb-3 text-xl text-grayModern-900">{t("SettingPanel.PassWord")}</span>
99+
<span className={clsx("pb-3 text-xl", !darkMode && "text-grayModern-900")}>
100+
{t("SettingPanel.PassWord")}
101+
</span>
95102
<span className="flex justify-between text-base">
96-
<span className="text-grayModern-700">******</span>
103+
<span className={!darkMode ? "text-grayModern-700" : ""}>∗∗∗∗∗∗</span>
97104
<span
98105
className="flex cursor-pointer items-center text-[#0884DD]"
99106
onClick={() => {
@@ -106,9 +113,11 @@ export default function UserInfo() {
106113
</div>
107114
<Divider className="text-grayModern-200" />
108115
<div className="mt-4 flex flex-col pb-4">
109-
<span className="pb-3 text-xl text-grayModern-900">{t("SettingPanel.Tel")}</span>
116+
<span className={clsx("pb-3 text-xl", !darkMode && "text-grayModern-900")}>
117+
{t("SettingPanel.Tel")}
118+
</span>
110119
<span className="flex justify-between text-base">
111-
<span className="text-grayModern-700">
120+
<span className={!darkMode ? "text-grayModern-700" : ""}>
112121
{userInfo?.phone ? hidePhoneNumber(userInfo.phone) : t("NoInfo")}
113122
</span>
114123
<span

‎web/src/pages/app/setting/index.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import {
77
ModalCloseButton,
88
ModalContent,
99
ModalOverlay,
10+
useColorMode,
1011
useColorModeValue,
1112
useDisclosure,
1213
} from "@chakra-ui/react";
14+
import clsx from "clsx";
1315
import { t } from "i18next";
1416

1517
import SectionList from "@/components/SectionList";
@@ -42,6 +44,7 @@ const SettingModal = (props: {
4244
const [item, setItem] = useState<TTabItem>(tabMatch[currentIndex]);
4345
const { setCurrentApp } = useGlobalStore((state) => state);
4446
const borderColor = useColorModeValue("lafWhite.600", "lafDark.600");
47+
const darkMode = useColorMode().colorMode === "dark";
4548
return (
4649
<>
4750
{React.cloneElement(children, {
@@ -55,19 +58,24 @@ const SettingModal = (props: {
5558

5659
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
5760
<ModalOverlay />
58-
<ModalContent maxW={"80%"} width={"auto"} minW={960} height={481}>
59-
<ModalBody py={2} flex="none" height={"full"} className="relative">
61+
<ModalContent maxW={"80%"} width={"auto"} minW={960}>
62+
<ModalBody py={2} flex="none" minH={481} className="relative">
6063
<ModalCloseButton />
6164
<Box className="flex h-full" borderColor={borderColor}>
62-
<SectionList className="absolute bottom-0 left-0 top-0 min-w-[268px] rounded-l-lg bg-[#E4E9EE]">
65+
<SectionList
66+
className={clsx(
67+
"absolute bottom-0 left-0 top-0 min-w-[268px] rounded-l-lg",
68+
!darkMode && "border border-r-[#E4E9EE] bg-[#F4F6F8]",
69+
)}
70+
>
6371
<span className="relative left-6 top-5 text-2xl font-semibold">
6472
{headerTitle || t("SettingPanel.Setting")}
6573
</span>
6674
<div className="relative left-6 top-6">
6775
{tabMatch.map((tab) => {
6876
return (
6977
<SectionList.Item
70-
className="mt-2 w-[220px] rounded-md"
78+
className="mt-2 !h-[42px] w-[220px] rounded-md"
7179
isActive={item?.key === tab.key}
7280
key={tab.key}
7381
onClick={() => {

‎web/src/pages/auth/reset-password/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default function ResetPassword(props: { isModal?: boolean; handleBack?: a
8383
!isModal
8484
? "absolute left-1/2 top-1/2 w-[560px] -translate-y-1/2 rounded-[10px] p-[65px]"
8585
: "pt-10",
86-
{ "bg-white": !darkMode, "bg-lafDark-100": darkMode },
86+
{ "bg-white": !darkMode, "bg-lafDark-100": darkMode && !isModal },
8787
)}
8888
>
8989
{!isModal ? (

0 commit comments

Comments
 (0)