YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode for dialogs (#643)

Browse Source
This commit is contained in:
boojack
2022-11-30 20:34:16 +08:00
committed by GitHub
parent 1078132b12
commit c5200ca31b
39 changed files with 184 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/Settings/MemberSection.tsx
View File

@ -4,7 +4,6 @@ import { userService } from "../../services";
import { useAppSelector } from "../../store";
import * as api from "../../helpers/api";
import toastHelper from "../Toast";
import Icon from "../Icon";
import Dropdown from "../common/Dropdown";
import { showCommonDialog } from "../Dialog/CommonDialog";
import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
@ -24,13 +23,8 @@ const PreferencesSection = () => {
createUserPassword: "",
repeatUserPassword: "",
});
const [userNameQueryText, setUserNameQueryText] = useState("");
const [userList, setUserList] = useState<User[]>([]);
const showUserList = userList.filter((user: User) => {
return user.username.toLowerCase().includes(userNameQueryText.toLowerCase());
});
useEffect(() => {
fetchUserList();
}, []);
@ -90,11 +84,6 @@ const PreferencesSection = () => {
});
};
const handleUserNameQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
const text = event.currentTarget.value;
setUserNameQueryText(text);
};
const handleChangePasswordClick = (user: User) => {
showChangeMemberPasswordDialog(user);
};
@ -158,32 +147,20 @@ const PreferencesSection = () => {
/>
</div>
<div className="btns-container">
<button onClick={handleCreateUserBtnClick}>{t("common.create")}</button>
<button className="btn-normal" onClick={handleCreateUserBtnClick}>
{t("common.create")}
</button>
</div>
</div>
<div className="section-header-container">
<div className="w-full flex flex-row justify-between items-center">
<div className="title-text">{t("setting.member-list")}</div>
<div className="search-bar">
<div className="search-bar-container">
<div className="search-bar-inputer">
<Icon.Search className="icon-img" />
<input
className="text-input"
type="text"
placeholder={t("common.username")}
value={userNameQueryText}
onChange={handleUserNameQueryInput}
/>
</div>
</div>
</div>
</div>
<div className="member-container field-container">
<span className="field-text">ID</span>
<span className="field-text username-field">{t("common.username")}</span>
<span></span>
</div>
{showUserList.map((user) => (
{userList.map((user) => (
<div key={user.id} className={`member-container ${user.rowStatus === "ARCHIVED" ? "archived" : ""}`}>
<span className="field-text id-text">{user.id}</span>
<span className="field-text username-text">{user.username}</span>
@ -197,14 +174,14 @@ const PreferencesSection = () => {
actions={
<>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleChangePasswordClick(user)}
>
{t("setting.account-section.change-password")}
</button>
{user.rowStatus === "NORMAL" ? (
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleArchiveUserClick(user)}
>
{t("common.archive")}
@ -212,7 +189,7 @@ const PreferencesSection = () => {
) : (
<>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleRestoreUserClick(user)}
>
{t("common.restore")}