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

chore: update dark mode style (#1864)

Browse Source
This commit is contained in:
boojack
2023-06-30 08:40:13 +08:00
committed by GitHub
parent 6b3748e2a3
commit 847b4605f4
10 changed files with 75 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Header.tsx
View File

@@ -134,7 +134,7 @@ const Header = () => {
</NavLink> </NavLink>
<div className="pr-3 pl-1 w-full"> <div className="pr-3 pl-1 w-full">
<button <button
className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 text-white dark:opacity-80 hover:shadow hover:opacity-90" className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 text-white hover:shadow hover:opacity-80"
onClick={() => showMemoEditorDialog()} onClick={() => showMemoEditorDialog()}
> >
<Icon.Edit3 className="w-4 h-auto mr-1" /> <Icon.Edit3 className="w-4 h-auto mr-1" />

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

@@ -1,3 +1,4 @@
import { Table } from "@mui/joy";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -146,58 +147,64 @@ const PreferencesSection = () => {
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<div className="title-text">{t("setting.member-list")}</div> <div className="title-text">{t("setting.member-list")}</div>
</div> </div>
<div className="member-container field-container"> <Table>
<span className="field-text">ID</span> <thead>
<span className="field-text username-field">{t("common.username")}</span> <tr>
<span></span> <th>ID</th>
</div> <th>{t("common.username")}</th>
{userList.map((user) => ( <th></th>
<div key={user.id} className={`member-container ${user.rowStatus === "ARCHIVED" ? "archived" : ""}`}> </tr>
<span className="field-text id-text">{user.id}</span> </thead>
<span className="field-text username-text">{user.username}</span> <tbody>
<div className="buttons-container"> {userList.map((user) => (
{currentUser?.id === user.id ? ( <tr key={user.id}>
<span className="tip-text">{t("common.yourself")}</span> <td className="field-text id-text">{user.id}</td>
) : ( <td className="field-text username-text">{user.username}</td>
<Dropdown <td className="flex flex-row justify-end items-center">
actions={ {currentUser?.id === user.id ? (
<> <span className="tip-text">{t("common.yourself")}</span>
<button ) : (
className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600" <Dropdown
onClick={() => handleChangePasswordClick(user)} actions={
>
{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 dark:hover:bg-zinc-600"
onClick={() => handleArchiveUserClick(user)}
>
{t("common.archive")}
</button>
) : (
<> <>
<button <button
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" className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleRestoreUserClick(user)} onClick={() => handleChangePasswordClick(user)}
> >
{t("common.restore")} {t("setting.account-section.change-password")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleDeleteUserClick(user)}
>
{t("common.delete")}
</button> </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 dark:hover:bg-zinc-600"
onClick={() => handleArchiveUserClick(user)}
>
{t("common.archive")}
</button>
) : (
<>
<button
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")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleDeleteUserClick(user)}
>
{t("common.delete")}
</button>
</>
)}
</> </>
)} }
</> />
} )}
/> </td>
)} </tr>
</div> ))}
</div> </tbody>
))} </Table>
</div> </div>
); );
}; };

10
web/src/components/Settings/MyAccountSection.tsx
View File

@@ -35,16 +35,16 @@ const MyAccountSection = () => {
<div className="flex flex-row justify-start items-center"> <div className="flex flex-row justify-start items-center">
<UserAvatar className="mr-2" avatarUrl={user.avatarUrl} /> <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
<span className="text-2xl leading-10 font-medium">{user.nickname}</span> <span className="text-2xl leading-10 font-medium">{user.nickname}</span>
<span className="text-base ml-1 text-gray-500 leading-10">({user.username})</span> <span className="text-base ml-1 text-gray-500 leading-10 dark:text-gray-400">({user.username})</span>
</div> </div>
<div className="flex flex-row justify-start items-center text-base text-gray-600">{user.email}</div> <div className="flex flex-row justify-start items-center text-base text-gray-600">{user.email}</div>
<div className="w-full flex flex-row justify-start items-center mt-2 space-x-2"> <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
<button className="btn-normal" onClick={showUpdateAccountDialog}> <Button variant="outlined" onClick={showUpdateAccountDialog}>
{t("common.edit")} {t("common.edit")}
</button> </Button>
<button className="btn-normal" onClick={showChangePasswordDialog}> <Button variant="outlined" onClick={showChangePasswordDialog}>
{t("setting.account-section.change-password")} {t("setting.account-section.change-password")}
</button> </Button>
</div> </div>
</div> </div>
<div className="section-container openapi-section-container mt-6"> <div className="section-container openapi-section-container mt-6">

13
web/src/components/kit/DatePicker.tsx
View File

@@ -1,3 +1,4 @@
import { Badge, Button } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { DAILY_TIMESTAMP } from "@/helpers/consts"; import { DAILY_TIMESTAMP } from "@/helpers/consts";
@@ -73,15 +74,15 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
return ( return (
<div className={`date-picker-wrapper ${className}`}> <div className={`date-picker-wrapper ${className}`}>
<div className="date-picker-header"> <div className="date-picker-header">
<span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}> <Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-1)}>
<Icon.ChevronLeft className="icon-img" /> <Icon.ChevronLeft className="icon-img" />
</span> </Button>
<span className="normal-text"> <span className="normal-text">
{firstDate.getFullYear()}/{firstDate.getMonth() + 1} {firstDate.getFullYear()}/{firstDate.getMonth() + 1}
</span> </span>
<span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}> <Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(1)}>
<Icon.ChevronRight className="icon-img" /> <Icon.ChevronRight className="icon-img" />
</span> </Button>
</div> </div>
<div className="date-picker-day-container"> <div className="date-picker-day-container">
<div className="date-picker-day-header"> <div className="date-picker-day-header">
@@ -105,10 +106,10 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
return ( return (
<span <span
key={d.datestamp} key={d.datestamp}
className={`day-item ${countByDate.has(d.datestamp) && "font-bold"} ${d.datestamp === datestamp ? "current" : ""}`} className={`day-item relative ${d.datestamp === datestamp ? "current" : ""}`}
onClick={() => handleDateItemClick(d.datestamp)} onClick={() => handleDateItemClick(d.datestamp)}
> >
{d.date} {countByDate.has(d.datestamp) ? <Badge size="sm">{d.date}</Badge> : d.date}
</span> </span>
); );
} }

2
web/src/components/kit/Dropdown.tsx
View File

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

2
web/src/less/common/selector.less
View File

@@ -28,7 +28,7 @@
} }
> .items-wrapper { > .items-wrapper {
@apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white dark:bg-zinc-700 dark:border-zinc-600 rounded-md overflow-y-auto z-1 hide-scrollbar; @apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white dark:bg-zinc-800 dark:border-zinc-600 rounded-md overflow-y-auto z-1 hide-scrollbar;
min-width: calc(100% + 16px); min-width: calc(100% + 16px);
max-height: 256px; max-height: 256px;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);

2
web/src/less/memo-editor.less
View File

@@ -33,7 +33,7 @@
@apply flex flex-row justify-start items-center; @apply flex flex-row justify-start items-center;
> .action-btn { > .action-btn {
@apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow; @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;
> .icon-img { > .icon-img {
@apply w-5 h-5 mx-auto flex flex-row justify-center items-center; @apply w-5 h-5 mx-auto flex flex-row justify-center items-center;

6
web/src/less/setting.less
View File

@@ -12,10 +12,10 @@
@apply w-full h-auto flex flex-row sm:flex-col justify-start items-start; @apply w-full h-auto flex flex-row sm:flex-col justify-start items-start;
> .section-item { > .section-item {
@apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 dark:text-gray-300 cursor-pointer hover:opacity-80; @apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 dark:text-gray-400 cursor-pointer hover:opacity-80;
&.selected { &.selected {
@apply font-bold hover:opacity-100; @apply font-bold dark:text-gray-300 hover:opacity-100;
} }
> .icon-text { > .icon-text {
@@ -32,7 +32,7 @@
@apply flex flex-col justify-start items-start w-full; @apply flex flex-col justify-start items-start w-full;
.title-text { .title-text {
@apply text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500; @apply text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500 dark:text-gray-400;
} }
> .form-label { > .form-label {

36
web/src/less/settings/member-section.less
View File

@@ -6,7 +6,7 @@
@apply w-full mb-3 flex flex-row justify-start items-center; @apply w-full mb-3 flex flex-row justify-start items-center;
> .field-text { > .field-text {
@apply text-sm text-gray-600 w-20 text-right pr-2; @apply text-sm text-gray-600 dark:text-gray-400 w-20 text-right pr-2;
} }
> input { > input {
@@ -18,38 +18,4 @@
@apply w-full mb-6 pl-20 flex flex-row justify-start items-center; @apply w-full mb-6 pl-20 flex flex-row justify-start items-center;
} }
} }
> .field-container {
> .field-text {
@apply text-gray-400 text-sm;
&.username-field {
@apply col-span-2 w-full;
}
}
}
> .member-container {
@apply w-full grid grid-cols-4 border-b dark:border-b-zinc-700 py-2;
> .field-text {
@apply text-base pl-2 mr-4 w-16 truncate;
&.id-text {
@apply font-mono text-gray-400;
}
&.username-text {
@apply w-auto col-span-2;
}
}
> .buttons-container {
@apply col-span-1 flex flex-row justify-end items-center;
> .tip-text {
@apply text-gray-400;
}
}
}
} }

2
web/src/pages/DailyReview.tsx
View File

@@ -117,7 +117,7 @@ const DailyReview = () => {
</button> </button>
</div> </div>
<DatePicker <DatePicker
className={`absolute top-8 mt-2 z-20 mx-auto border bg-white dark:border-zinc-800 rounded-lg mb-6 ${ className={`absolute top-8 mt-2 z-20 mx-auto border bg-white dark:bg-zinc-800 dark:border-zinc-800 rounded-lg mb-6 ${
showDatePicker ? "" : "!hidden" showDatePicker ? "" : "!hidden"
}`} }`}
datestamp={currentDateStamp} datestamp={currentDateStamp}