Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): fix some dark mode ui bugs #919

Merged
merged 1 commit into from
Mar 17, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 1 addition & 10 deletions web/src/components/DependenceList/index.module.scss
Original file line number Diff line number Diff line change
@@ -13,14 +13,5 @@
span {
vertical-align: middle;
}

&:hover,
&.active {
background-color: var(--chakra-colors-primary-100);
}

&.active {
background-color: var(--chakra-colors-primary-300);
}
}
}
}
9 changes: 8 additions & 1 deletion web/src/components/DependenceList/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import { useColorMode } from "@chakra-ui/react";
import clsx from "clsx";

import styles from "./index.module.scss";
@@ -20,11 +21,17 @@ function Item(props: {
onClick: () => void;
}) {
const { children, isActive, onClick, className, style } = props;
const { colorMode } = useColorMode();
const darkMode = colorMode === "dark";

return (
<li
style={style || {}}
className={clsx(className, {
[styles.active]: isActive,
"bg-primary-100": !darkMode && isActive,
"hover:bg-primary-100": !darkMode,
"hover:bg-lafDark-100": darkMode,
"bg-lafDark-100": darkMode && isActive,
})}
onClick={onClick}
>
14 changes: 14 additions & 0 deletions web/src/components/Editor/FunctionEditor.tsx
Original file line number Diff line number Diff line change
@@ -55,8 +55,22 @@ monaco?.editor.defineTheme("lafEditorThemeDark", {
},
],
colors: {
// https://github.com/microsoft/monaco-editor/discussions/3838
"editor.foreground": "#ffffff",
"editor.background": "#202631",
"editorIndentGuide.activeBackground": "#fff",
"editorIndentGuide.background": "#eee",
"editor.selectionBackground": "#101621",
"menu.selectionBackground": "#101621",
"dropdown.background": "#1a202c",
"dropdown.foreground": "#f0f0f0",
"dropdown.border": "#fff",
"quickInputList.focusBackground": "#1a202c",
"editorWidget.background": "#1a202c",
"editorWidget.foreground": "#f0f0f0",
"editorWidget.border": "#1a202c",
"input.background": "#1a202c",
"list.hoverBackground": "#2a303c",
},
});

Original file line number Diff line number Diff line change
@@ -291,7 +291,6 @@ const AddDependenceModal = () => {
/>
<Input
rounded={"full"}
bg={"gray.100"}
onChange={(e: any) => {
search(e.target.value);
}}
2 changes: 1 addition & 1 deletion web/src/pages/app/setting/AppInfoList/index.tsx
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ const AppEnvList = () => {
<div className="flex h-[50px] flex-none justify-between">
<HStack spacing={2}>
<Box
className={clsx("text-xl text-grayModern-900 font-medium", {
className={clsx("text-xl font-medium", {
"text-grayModern-100": darkMode,
})}
>
22 changes: 20 additions & 2 deletions web/src/pages/app/setting/UserInfo/AuthDetail/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { useForm } from "react-hook-form";
import { MdKeyboardArrowLeft } from "react-icons/md";
import { Button, FormControl, FormErrorMessage, FormLabel, Input, VStack } from "@chakra-ui/react";
import {
Button,
FormControl,
FormErrorMessage,
FormLabel,
Input,
useColorMode,
VStack,
} from "@chakra-ui/react";
import clsx from "clsx";
import { t } from "i18next";

export default function AuthDetail(props: { onBack: () => void }) {
@@ -17,6 +26,9 @@ export default function AuthDetail(props: { onBack: () => void }) {
formState: { errors },
} = useForm<FormData>();

const { colorMode } = useColorMode();
const darkMode = colorMode === "dark";

const onSubmit = async (data: any) => {};
return (
<>
@@ -33,7 +45,13 @@ export default function AuthDetail(props: { onBack: () => void }) {
</span>
</p>
<div className="flex-grow w-full flex flex-col justify-around">
<p className="text-grayModern-900 text-xl text-center mb-6">{t("SettingPanel.Auth")}</p>
<p
className={clsx("text-xl text-center mb-6", {
"text-grayModern-900": !darkMode,
})}
>
{t("SettingPanel.Auth")}
</p>
<VStack spacing={6} align="flex-start" className="w-[48%] mx-auto">
<FormControl isRequired isInvalid={!!errors?.tel} className="relative">
<div className="flex relative">
11 changes: 9 additions & 2 deletions web/src/pages/app/setting/UserInfo/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState } from "react";
import { Avatar, Box, HStack } from "@chakra-ui/react";
import { Avatar, Box, HStack, useColorMode } from "@chakra-ui/react";
import clsx from "clsx";
import { t } from "i18next";

import { formatDate } from "@/utils/format";
@@ -11,6 +12,8 @@ export default function UserInfo() {
const [showAuth, setShowAuth] = useState(false);

const { userInfo } = useGlobalStore((state) => state);
const { colorMode } = useColorMode();
const darkMode = colorMode === "dark";

return (
<div className="h-full flex flex-col items-center justify-center">
@@ -31,7 +34,11 @@ export default function UserInfo() {
color="white"
boxShadow="base"
/>
<p className="text-center text-3xl font-medium text-grayModern-900 mb-2">
<p
className={clsx("text-center text-3xl font-medium mb-2", {
"text-grayModern-900": !darkMode,
})}
>
{userInfo?.username}
</p>
{/* <span className="inline-block px-2 h-[24px] rounded-full border border-grayModern-400 text-grayModern-400 pt-[1px]">