Skip to content

C
canifa_note
Unverified Commit 847b4605 authored by boojack's avatar boojack Committed by GitHub
Browse files
Options

chore: update dark mode style (#1864)

parent 6b3748e2
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 101 deletions
web/src/components/Header.tsx
View file @ 847b4605
......@@ -134,7 +134,7 @@ const Header = () => {
</NavLink>
<div className="pr-3 pl-1 w-full">
<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()}
>
<Icon.Edit3 className="w-4 h-auto mr-1" />
......
web/src/components/Settings/MemberSection.tsx
View file @ 847b4605
import { Table } from "@mui/joy";
import React, { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
......@@ -146,58 +147,64 @@ const PreferencesSection = () => {
<div className="w-full flex flex-row justify-between items-center">
<div className="title-text">{t("setting.member-list")}</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>
{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>
<div className="buttons-container">
{currentUser?.id === user.id ? (
<span className="tip-text">{t("common.yourself")}</span>
) : (
<Dropdown
actions={
<>
<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"
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 dark:hover:bg-zinc-600"
onClick={() => handleArchiveUserClick(user)}
>
{t("common.archive")}
</button>
) : (
<Table>
<thead>
<tr>
<th>ID</th>
<th>{t("common.username")}</th>
<th></th>
</tr>
</thead>
<tbody>
{userList.map((user) => (
<tr key={user.id}>
<td className="field-text id-text">{user.id}</td>
<td className="field-text username-text">{user.username}</td>
<td className="flex flex-row justify-end items-center">
{currentUser?.id === user.id ? (
<span className="tip-text">{t("common.yourself")}</span>
) : (
<Dropdown
actions={
<>
<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)}
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={() => handleChangePasswordClick(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")}
{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
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>
</>
)}
</>
)}
</>
}
/>
)}
</div>
</div>
))}
}
/>
)}
</td>
</tr>
))}
</tbody>
</Table>
</div>
);
};
......
web/src/components/Settings/MyAccountSection.tsx
View file @ 847b4605
......@@ -35,16 +35,16 @@ const MyAccountSection = () => {
<div className="flex flex-row justify-start items-center">
<UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
<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 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">
<button className="btn-normal" onClick={showUpdateAccountDialog}>
<Button variant="outlined" onClick={showUpdateAccountDialog}>
{t("common.edit")}
</button>
<button className="btn-normal" onClick={showChangePasswordDialog}>
</Button>
<Button variant="outlined" onClick={showChangePasswordDialog}>
{t("setting.account-section.change-password")}
</button>
</Button>
</div>
</div>
<div className="section-container openapi-section-container mt-6">
......
web/src/components/kit/DatePicker.tsx
View file @ 847b4605
import { Badge, Button } from "@mui/joy";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { DAILY_TIMESTAMP } from "@/helpers/consts";
......@@ -73,15 +74,15 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
return (
<div className={`date-picker-wrapper ${className}`}>
<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" />
</span>
</Button>
<span className="normal-text">
{firstDate.getFullYear()}/{firstDate.getMonth() + 1}
</span>
<span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
<Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(1)}>
<Icon.ChevronRight className="icon-img" />
</span>
</Button>
</div>
<div className="date-picker-day-container">
<div className="date-picker-day-header">
......@@ -105,10 +106,10 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
return (
<span
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)}
>
{d.date}
{countByDate.has(d.datestamp) ? <Badge size="sm">{d.date}</Badge> : d.date}
</span>
);
}
......
web/src/components/kit/Dropdown.tsx
View file @ 847b4605
......@@ -43,7 +43,7 @@ const Dropdown: React.FC<Props> = (props: Props) => {
</button>
)}
<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"
} ${actionsClassName ?? ""} ${positionClassName ?? "top-full right-0 mt-1"}`}
>
......
web/src/less/common/selector.less
View file @ 847b4605
......@@ -28,7 +28,7 @@
}
> .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);
max-height: 256px;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
......
web/src/less/memo-editor.less
View file @ 847b4605
......@@ -33,7 +33,7 @@
@apply flex flex-row justify-start items-center;
> .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 {
@apply w-5 h-5 mx-auto flex flex-row justify-center items-center;
......
web/src/less/setting.less
View file @ 847b4605
......@@ -12,10 +12,10 @@
@apply w-full h-auto flex flex-row sm:flex-col justify-start items-start;
> .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 {
@apply font-bold hover:opacity-100;
@apply font-bold dark:text-gray-300 hover:opacity-100;
}
> .icon-text {
......@@ -32,7 +32,7 @@
@apply flex flex-col justify-start items-start w-full;
.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 {
......
web/src/less/settings/member-section.less
View file @ 847b4605
......@@ -6,7 +6,7 @@
@apply w-full mb-3 flex flex-row justify-start items-center;
> .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 {
......@@ -18,38 +18,4 @@
@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;
}
}
}
}
web/src/pages/DailyReview.tsx
View file @ 847b4605
......@@ -117,7 +117,7 @@ const DailyReview = () => {
</button>
</div>
<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"
}`}
datestamp={currentDateStamp}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment