usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-21 14:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode support for memo detail (#604)

Browse source 
* feat: dark mode support for memo detail

* chore: update

* chore: update

* chore: update
This commit is contained in:
Stephen Zhou 2022-11-28 19:40:08 +08:00 committed by GitHub
parent 0402cb7b27
commit fbe7b604ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/src/css/tailwind.css
View file

@ -14,22 +14,24 @@
}
}
.btn-normal {
@apply select-none inline-flex border cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
}
@layer components {
.btn-normal {
@apply select-none inline-flex border cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
}
.btn-primary {
@apply btn-normal border-transparent bg-green-600 text-white;
}
.btn-primary {
@apply btn-normal border-transparent bg-green-600 text-white;
}
.btn-danger {
@apply btn-normal border-red-600 bg-red-50 text-red-600;
}
.btn-danger {
@apply btn-normal border-red-600 bg-red-50 text-red-600;
}
.btn-text {
@apply btn-normal text-gray-600 border-none hover:shadow-none;
}
.btn-text {
@apply btn-normal text-gray-600 border-none hover:shadow-none;
}
.input-text {
@apply w-full px-3 py-2 leading-6 text-sm border rounded;
.input-text {
@apply w-full px-3 py-2 leading-6 text-sm border rounded;
}
}

14
web/src/less/memo-detail.less
View file

@ -1,12 +1,12 @@
.page-wrapper.memo-detail {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-900;
background-color: #f6f5f4;
> .page-container {
@apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
> .page-header {
@apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2;
@apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 dark:bg-zinc-900;
background-color: #f6f5f4;
> .title-container {
@ -16,6 +16,10 @@
@apply h-12 sm:h-14 w-auto mr-1;
}
> .logo-text {
@apply text-4xl tracking-wide text-black dark:text-white;
}
> .title-text {
@apply text-xl sm:text-3xl font-mono text-gray-700;
}
@ -23,7 +27,7 @@
> .action-button-container {
> .btn {
@apply block text-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;
@apply block text-gray-600 dark:text-gray-300 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;
> .icon {
@apply text-lg;
@ -36,7 +40,7 @@
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4;
> .memo-container {
@apply flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
@apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;
> .memo-header {
@apply mb-2 w-full flex flex-row justify-between items-center;
@ -51,7 +55,7 @@
}
> .memo-content {
@apply cursor-default;
@apply cursor-default dark:text-zinc-50;
> * {
@apply cursor-default;

6
web/src/pages/MemoDetail.tsx
View file

@ -7,6 +7,7 @@ import { memoService } from "../services";
import { UNKNOWN_ID } from "../helpers/consts";
import { useAppSelector } from "../store";
import useLoading from "../hooks/useLoading";
import useApperance from "../hooks/useApperance";
import Icon from "../components/Icon";
import toastHelper from "../components/Toast";
import Dropdown from "../components/common/Dropdown";
@ -19,6 +20,8 @@ interface State {
}
const MemoDetail = () => {
useApperance();
const { t, i18n } = useTranslation();
const params = useParams();
const user = useAppSelector((state) => state.user.user);
@ -58,7 +61,8 @@ const MemoDetail = () => {
<div className="page-container">
<div className="page-header">
<div className="title-container">
<img className="logo-img" src="/logo-full.webp" alt="" />
<img className="logo-img" src="/logo.webp" alt="" />
<p className="logo-text">memos</p>
</div>
<div className="action-button-container">
{!loadingState.isLoading && (