aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-04 12:26:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: impl part of dark mode

Browse Source
This commit is contained in:
Steven
2023-09-12 22:35:17 +08:00
parent 908f95772d
commit 75d152922e
8 changed files with 225 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/web/src/components/Header.tsx
View File

@ -18,11 +18,11 @@ const Header: React.FC = () => {
return (
<>
<div className="w-full bg-gray-50 border-b border-b-gray-200">
<div className="w-full bg-gray-50 dark:bg-zinc-900 border-b border-b-gray-200 dark:border-b-zinc-800">
<div className="w-full max-w-6xl mx-auto px-3 md:px-12 py-5 flex flex-row justify-between items-center">
<div className="flex flex-row justify-start items-center shrink mr-2">
<Link to="/" className="text-lg cursor-pointer flex flex-row justify-start items-center">
<img src="/logo.png" className="w-8 h-auto mr-2 -mt-0.5" alt="" />
<Link to="/" className="text-lg cursor-pointer flex flex-row justify-start items-center dark:text-gray-400">
<img src="/logo.png" className="w-8 h-auto mr-2 -mt-0.5 dark:opacity-80" alt="" />
Slash
</Link>
</div>
@ -31,8 +31,8 @@ const Header: React.FC = () => {
trigger={
<button className="flex flex-row justify-end items-center cursor-pointer">
<Avatar size="sm" variant="plain" />
<span>{currentUser.nickname}</span>
<Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600" />
<span className="dark:text-gray-400">{currentUser.nickname}</span>
<Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" />
</button>
}
actionsClassName="!w-32"
@ -40,18 +40,18 @@ const Header: React.FC = () => {
<>
<Link
to="/setting"
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
>
<Icon.Settings className="w-4 h-auto mr-2" /> Setting
</Link>
<button
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => setShowAboutDialog(true)}
>
<Icon.Info className="w-4 h-auto mr-2" /> About
</button>
<button
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => handleSignOutButtonClick()}
>
<Icon.LogOut className="w-4 h-auto mr-2" /> Sign out

18
frontend/web/src/components/Navigator.tsx
View File

@ -14,8 +14,10 @@ const Navigator = () => {
<div className="w-full flex flex-row justify-start items-center mb-4 gap-1 sm:flex-wrap overflow-x-auto no-scrollbar">
<button
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
currentTab === "tab:all" ? "!bg-gray-600 text-white shadow" : ""
"flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
currentTab === "tab:all"
? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: "tab:all" })}
>
@ -24,8 +26,10 @@ const Navigator = () => {
</button>
<button
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
currentTab === "tab:mine" ? "!bg-gray-600 text-white shadow" : ""
"flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md hover:bg-gray-200",
currentTab === "tab:mine"
? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
>
@ -36,8 +40,10 @@ const Navigator = () => {
<button
key={tag}
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
currentTab === `tag:${tag}` ? "!bg-gray-600 text-white shadow" : ""
"flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md hover:bg-gray-200",
currentTab === `tag:${tag}`
? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}
>

2
frontend/web/src/components/common/Dropdown.tsx
View File

@ -52,7 +52,7 @@ const Dropdown: React.FC<Props> = (props: Props) => {
</button>
)}
<div
className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white z-1 border p-1 rounded-md shadow ${
className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white dark:bg-zinc-900 z-1 border dark:border-zinc-800 p-1 rounded-md shadow ${
actionsClassName ?? ""
} ${dropdownStatus ? "" : "!hidden"}`}
>

5
frontend/web/src/css/index.css
View File

@ -5,10 +5,7 @@
body,
html,
#root {
@apply text-base w-full h-full;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
"WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
@apply text-base w-full h-full dark:bg-zinc-800;
}
@layer utilities {

18
frontend/web/src/layouts/Root.tsx
View File

@ -1,3 +1,4 @@
import { useColorScheme } from "@mui/joy";
import { isEqual } from "lodash-es";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
@ -8,6 +9,7 @@ import useUserStore from "../stores/v1/user";
const Root: React.FC = () => {
const navigate = useNavigate();
const { i18n } = useTranslation();
const { setMode } = useColorScheme();
const userStore = useUserStore();
const currentUser = userStore.getCurrentUser();
const currentUserSetting = userStore.getCurrentUserSetting();
@ -30,17 +32,25 @@ const Root: React.FC = () => {
return;
}
if (isEqual(currentUserSetting.locale, "LOCALE_EN")) {
i18n.changeLanguage("en");
} else if (isEqual(currentUserSetting.locale, "LOCALE_ZH")) {
if (isEqual(currentUserSetting.locale, "LOCALE_ZH")) {
i18n.changeLanguage("zh");
} else {
i18n.changeLanguage("en");
}
if (isEqual(currentUserSetting.colorTheme, "COLOR_THEME_DARK")) {
setMode("dark");
document.documentElement.classList.add("dark");
} else {
setMode("light");
document.documentElement.classList.remove("dark");
}
}, [currentUserSetting]);
return (
<>
{isInitialized && (
<div className="w-full h-auto flex flex-col justify-start items-start">
<div className="w-full h-auto flex flex-col justify-start items-start dark:bg-zinc-800">
<Header />
<Outlet />
</div>