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

feat: dark mode for main pages (#637)

Browse source 
* feat: update dark mode styles for auth and explore page

* feat: dark mode for home page
This commit is contained in:
boojack 2022-11-29 21:44:52 +08:00 committed by GitHub
parent 52038d26d2
commit 6384f5af74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 126 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/Memo.tsx
View file

@ -149,9 +149,7 @@ const Memo: React.FC<Props> = (props: Props) => {
const handleMemoContentDoubleClick = (e: React.MouseEvent) => { const handleMemoContentDoubleClick = (e: React.MouseEvent) => {
const targetEl = e.target as HTMLElement; const targetEl = e.target as HTMLElement;
if (targetEl.className === "memo-link-text") { if (targetEl.className === "tag-span") {
return;
} else if (targetEl.className === "tag-span") {
return; return;
} else if (targetEl.classList.contains("todo-block")) { } else if (targetEl.classList.contains("todo-block")) {
return; return;

10
web/src/components/UserBanner.tsx
View file

@ -74,20 +74,20 @@ const UserBanner = () => {
{!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null} {!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null}
</div> </div>
<Dropdown <Dropdown
trigger={<Icon.MoreHorizontal className="ml-2 w-5 h-auto cursor-pointer" />} trigger={<Icon.MoreHorizontal className="ml-2 w-5 h-auto cursor-pointer dark:text-gray-200" />}
actionsClassName="min-w-36" actionsClassName="min-w-36"
actions={ actions={
<> <>
{!userService.isVisitorMode() && ( {!userService.isVisitorMode() && (
<> <>
<button <button
className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100" className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
onClick={handleResourcesBtnClick} onClick={handleResourcesBtnClick}
> >
<span className="mr-1">🌄</span> {t("sidebar.resources")} <span className="mr-1">🌄</span> {t("sidebar.resources")}
</button> </button>
<button <button
className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100" className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
onClick={handleArchivedBtnClick} onClick={handleArchivedBtnClick}
> >
<span className="mr-1">🗂</span> {t("sidebar.archived")} <span className="mr-1">🗂</span> {t("sidebar.archived")}
@ -95,14 +95,14 @@ const UserBanner = () => {
</> </>
)} )}
<button <button
className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100" className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
onClick={handleAboutBtnClick} onClick={handleAboutBtnClick}
> >
<span className="mr-1">🤠</span> {t("common.about")} <span className="mr-1">🤠</span> {t("common.about")}
</button> </button>
{!userService.isVisitorMode() && ( {!userService.isVisitorMode() && (
<button <button
className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100" className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
onClick={handleSignOutBtnClick} onClick={handleSignOutBtnClick}
> >
<span className="mr-1">👋</span> {t("common.sign-out")} <span className="mr-1">👋</span> {t("common.sign-out")}

4
web/src/components/common/Dropdown.tsx
View file

@ -37,12 +37,12 @@ const Dropdown: React.FC<Props> = (props: Props) => {
{trigger ? ( {trigger ? (
trigger trigger
) : ( ) : (
<button className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 cursor-pointer hover:opacity-80"> <button className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 dark:text-gray-200 cursor-pointer hover:opacity-80">
<Icon.MoreHorizontal className="w-4 h-auto" /> <Icon.MoreHorizontal className="w-4 h-auto" />
</button> </button>
)} )}
<div <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-700 z-1 p-1 rounded-md shadow ${
actionsClassName ?? "" actionsClassName ?? ""
} ${dropdownStatus ? "" : "!hidden"}`} } ${dropdownStatus ? "" : "!hidden"}`}
> >

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

@ -20,7 +20,7 @@
} }
.btn-primary { .btn-primary {
@apply btn-normal border-transparent bg-green-600 text-white; @apply btn-normal border-transparent bg-green-600 text-white dark:text-gray-200;
} }
.btn-danger { .btn-danger {
@ -28,7 +28,7 @@
} }
.btn-text { .btn-text {
@apply btn-normal text-gray-600 border-none hover:shadow-none; @apply btn-normal text-gray-600 border-none dark:text-gray-200 hover:shadow-none;
} }
.input-text { .input-text {

42
web/src/less/auth.less
View file

@ -1,5 +1,5 @@
.page-wrapper.auth { .page-wrapper.auth {
@apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-900; @apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-800;
> .page-container { > .page-container {
@apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center; @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;
@ -18,12 +18,12 @@
} }
> .logo-text { > .logo-text {
@apply text-4xl tracking-wide text-black dark:text-white; @apply text-6xl tracking-wide text-black dark:text-gray-200;
} }
} }
> .slogan-text { > .slogan-text {
@apply text-sm text-gray-700 dark:text-gray-200; @apply text-sm text-gray-700 dark:text-gray-300;
} }
} }
@ -45,7 +45,7 @@
@apply py-2; @apply py-2;
> input { > input {
@apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80 dark:bg-zinc-800 dark:text-white; @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80 dark:bg-zinc-800 dark:text-gray-200 dark:border-gray-600;
} }
} }
} }
@ -58,22 +58,10 @@
> .action-btns-container { > .action-btns-container {
@apply flex flex-row justify-end items-center w-full mt-2; @apply flex flex-row justify-end items-center w-full mt-2;
> .btn { > .requesting {
@apply flex flex-row justify-center items-center px-1 py-2 text-sm rounded hover:opacity-80;
&.signup-btn {
@apply px-3 dark:text-white dark:opacity-70;
}
&.signin-btn {
@apply bg-green-600 text-white px-3 shadow;
}
&.requesting {
@apply cursor-wait opacity-80; @apply cursor-wait opacity-80;
} }
} }
}
> .tip-text { > .tip-text {
@apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap; @apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;
@ -83,25 +71,5 @@
} }
} }
} }
> .footer-container {
@apply w-full flex flex-col justify-start items-center;
> .language-container {
@apply mt-2 w-full flex flex-row justify-center items-center text-sm text-gray-400;
> .locale-item {
@apply px-2 cursor-pointer;
&.active {
@apply text-blue-600 font-bold;
}
}
> .split-line {
@apply font-mono text-gray-400;
}
}
}
} }
} }

12
web/src/less/common/selector.less
View file

@ -2,15 +2,15 @@
@apply flex flex-col justify-start items-start relative h-8; @apply flex flex-col justify-start items-start relative h-8;
> .current-value-container { > .current-value-container {
@apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none; @apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white dark:bg-zinc-700 dark:border-zinc-600 border cursor-pointer select-none;
&:hover, &:hover,
&.active { &.active {
@apply bg-gray-100; @apply bg-gray-100 dark:bg-zinc-700;
} }
> .value-text { > .value-text {
@apply text-sm mr-0 truncate; @apply text-sm mr-0 truncate dark:text-gray-300;
width: calc(100% - 20px); width: calc(100% - 20px);
} }
@ -18,19 +18,19 @@
@apply flex flex-row justify-center items-center w-4 shrink-0; @apply flex flex-row justify-center items-center w-4 shrink-0;
> .icon-img { > .icon-img {
@apply w-4 h-auto opacity-40; @apply w-4 h-auto opacity-40 dark:text-gray-300;
} }
} }
} }
> .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 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-700 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%);
> .item-container { > .item-container {
@apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100; @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-600;
&.selected { &.selected {
@apply text-green-600; @apply text-green-600;

22
web/src/less/explore.less
View file

@ -1,5 +1,5 @@
.page-wrapper.explore { .page-wrapper.explore {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-900; @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800;
background-color: #f6f5f4; background-color: #f6f5f4;
> .page-container { > .page-container {
@ -16,17 +16,13 @@
} }
> .title-text { > .title-text {
@apply text-xl sm:text-3xl font-mono text-gray-700 dark:text-gray-300; @apply text-xl sm:text-4xl font-mono text-gray-700 dark:text-gray-200;
} }
} }
> .action-button-container { > .action-button-container {
> .btn { > .link-btn {
@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; @apply block text-gray-600 dark:text-gray-200 dark:border-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80;
> .icon {
@apply text-lg;
}
} }
} }
} }
@ -35,7 +31,7 @@
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
> .memo-container { > .memo-container {
@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; @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-600;
> .memo-header { > .memo-header {
@apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400; @apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400;
@ -44,14 +40,6 @@
@apply ml-2 hover:text-green-600 hover:underline; @apply ml-2 hover:text-green-600 hover:underline;
} }
} }
> .memo-content {
@apply cursor-default dark:text-zinc-50;
> * {
@apply cursor-default;
}
}
} }
} }
} }

6
web/src/less/home.less
View file

@ -1,5 +1,5 @@
.page-wrapper.home { .page-wrapper.home {
@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-800;
background-color: #f6f5f4; background-color: #f6f5f4;
> .banner-wrapper { > .banner-wrapper {
@ -17,7 +17,7 @@
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
> .memos-editor-wrapper { > .memos-editor-wrapper {
@apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10; @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10 dark:bg-zinc-800;
background-color: #f6f5f4; background-color: #f6f5f4;
} }
@ -25,7 +25,7 @@
@apply fixed bottom-12 left-1/2 -translate-x-1/2; @apply fixed bottom-12 left-1/2 -translate-x-1/2;
> .btn { > .btn {
@apply bg-blue-600 text-white px-4 py-2 rounded-3xl shadow-2xl hover:opacity-80; @apply bg-blue-600 dark:bg-blue-800 text-white dark:text-gray-200 px-4 py-2 rounded-3xl shadow-2xl hover:opacity-80;
> .icon { > .icon {
@apply text-lg mr-1; @apply text-lg mr-1;

21
web/src/less/memo-content.less
View file

@ -1,5 +1,5 @@
.memo-content-wrapper { .memo-content-wrapper {
@apply w-full flex flex-col justify-start items-start; @apply w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-200;
> .memo-content-text { > .memo-content-text {
@apply w-full break-words text-base leading-7; @apply w-full break-words text-base leading-7;
@ -14,15 +14,12 @@
} }
.tag-span { .tag-span {
@apply inline-block w-auto font-mono text-blue-600 cursor-pointer; @apply inline-block w-auto font-mono text-blue-600 dark:text-blue-400 cursor-pointer;
}
.memo-link-text {
@apply inline-block text-blue-600 cursor-pointer font-bold border-none no-underline hover:opacity-80;
} }
.link { .link {
@apply text-blue-600 cursor-pointer underline break-all hover:opacity-80 decoration-1; @apply text-blue-600 dark:text-blue-400 cursor-pointer underline break-all hover:opacity-80 decoration-1;
code { code {
@apply underline decoration-1; @apply underline decoration-1;
} }
@ -55,7 +52,7 @@
} }
pre { pre {
@apply w-full my-1 p-3 rounded bg-gray-100 whitespace-pre-wrap; @apply w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap;
code { code {
@apply block; @apply block;
@ -63,7 +60,7 @@
} }
code { code {
@apply bg-gray-100 px-1 rounded text-sm font-mono leading-6 inline-block; @apply bg-gray-100 dark:bg-zinc-600 px-1 rounded text-sm font-mono leading-6 inline-block;
} }
table { table {
@ -79,11 +76,11 @@
} }
blockquote { blockquote {
@apply border-l-4 pl-2 text-gray-400; @apply border-l-4 pl-2 text-gray-400 dark:text-gray-300;
} }
hr { hr {
@apply my-1; @apply my-1 dark:border-zinc-600;
} }
} }
@ -91,7 +88,7 @@
@apply w-full relative flex flex-row justify-start items-center; @apply w-full relative flex flex-row justify-start items-center;
> .btn { > .btn {
@apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 border-gray-200 opacity-80 shadow hover:opacity-60 cursor-pointer; @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 dark:bg-zinc-600 border-gray-200 dark:border-zinc-600 opacity-80 shadow hover:opacity-60 cursor-pointer;
&.expand-btn { &.expand-btn {
@apply mt-2; @apply mt-2;

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

@ -1,12 +1,12 @@
.page-wrapper.memo-detail { .page-wrapper.memo-detail {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-900; @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800;
background-color: #f6f5f4; background-color: #f6f5f4;
> .page-container { > .page-container {
@apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
> .page-header { > .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 dark:bg-zinc-900; @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-800;
background-color: #f6f5f4; background-color: #f6f5f4;
> .title-container { > .title-container {

12
web/src/less/memo-editor.less
View file

@ -1,12 +1,12 @@
.memo-editor-container { .memo-editor-container {
@apply transition-all relative w-full flex flex-col justify-start items-start bg-white px-4 rounded-lg border-2 border-gray-200; @apply transition-all relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;
&.fullscreen { &.fullscreen {
@apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8; @apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
background-color: #f6f5f4; background-color: #f6f5f4;
> .memo-editor { > .memo-editor {
@apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white; @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white dark:bg-zinc-700;
> .common-editor-inputer { > .common-editor-inputer {
@apply flex-grow w-full !h-full max-h-full; @apply flex-grow w-full !h-full max-h-full;
@ -33,7 +33,7 @@
} }
> .memo-editor { > .memo-editor {
@apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-white; @apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200;
} }
> .common-tools-wrapper { > .common-tools-wrapper {
@ -43,7 +43,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 opacity-60 hover:opacity-90 hover:bg-gray-300 hover:shadow; @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer dark:text-gray-200 opacity-60 hover:opacity-90 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;
&.tag-action { &.tag-action {
@apply relative; @apply relative;
@ -85,9 +85,7 @@
> .icon-img { > .icon-img {
@apply w-4 mr-2; @apply w-4 mr-2;
} }
} }
} }
} }
@ -131,7 +129,7 @@
} }
> .editor-footer-container { > .editor-footer-container {
@apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 py-3 mt-2; @apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 dark:border-t-zinc-500 py-3 mt-2;
> .visibility-selector { > .visibility-selector {
@apply h-8; @apply h-8;

6
web/src/less/memo-filter.less
View file

@ -1,16 +1,16 @@
.filter-query-container { .filter-query-container {
@apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7; @apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7 dark:text-gray-300;
> .tip-text { > .tip-text {
@apply mr-2; @apply mr-2;
} }
> .filter-item-container { > .filter-item-container {
@apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer bg-gray-200 rounded whitespace-nowrap truncate hover:line-through; @apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through;
max-width: 256px; max-width: 256px;
> .icon-text { > .icon-text {
@apply w-4 h-auto mr-1 text-gray-500; @apply w-4 h-auto mr-1 text-gray-500 dark:text-gray-400;
} }
} }
} }

16
web/src/less/memo.less
View file

@ -1,12 +1,12 @@
.memo-wrapper { .memo-wrapper {
@apply relative 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 relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-600 hover:border-gray-200 dark:hover:border-zinc-600;
&.archived-memo { &.archived-memo {
@apply border-gray-200; @apply border-gray-200;
} }
&.pinned { &.pinned {
@apply border-gray-200 border-2; @apply border-gray-200 border-2 dark:border-zinc-600;
} }
> .corner-container { > .corner-container {
@ -54,14 +54,14 @@
@apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3; @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
> .more-action-btns-container { > .more-action-btns-container {
@apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white; @apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .btns-container { > .btns-container {
@apply w-full flex flex-row justify-around items-center border-b border-gray-100 p-1 mb-1; @apply w-full flex flex-row justify-around items-center border-b border-gray-100 dark:border-zinc-600 p-1 mb-1;
> .btn { > .btn {
@apply relative w-6 h-6 p-1 text-gray-600 cursor-pointer select-none; @apply relative w-6 h-6 p-1 text-gray-600 dark:text-gray-300 cursor-pointer select-none;
&:hover > .tip-text { &:hover > .tip-text {
@apply block; @apply block;
@ -78,7 +78,7 @@
} }
> .btn { > .btn {
@apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer; @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer dark:text-gray-300;
&.archive-btn { &.archive-btn {
@apply text-orange-600; @apply text-orange-600;
@ -88,13 +88,13 @@
} }
.btn { .btn {
@apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200; @apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200 dark:hover:bg-zinc-600;
&.more-action-btn { &.more-action-btn {
@apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent; @apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
> .icon-img { > .icon-img {
@apply w-4 h-auto; @apply w-4 h-auto dark:text-gray-300;
} }
&:hover { &:hover {

4
web/src/less/memos-header.less
View file

@ -9,12 +9,12 @@
@apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent; @apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent;
> .icon-img { > .icon-img {
@apply w-5 h-auto; @apply w-5 h-auto dark:text-gray-200;
} }
} }
> .title-text { > .title-text {
@apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700; @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200;
} }
} }

16
web/src/less/search-bar.less
View file

@ -9,14 +9,14 @@
} }
> .search-bar-inputer { > .search-bar-inputer {
@apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200; @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200 dark:bg-zinc-700;
> .icon-img { > .icon-img {
@apply w-4 h-auto opacity-30; @apply w-4 h-auto opacity-30 dark:text-gray-200;
} }
> .text-input { > .text-input {
@apply flex ml-2 w-24 grow text-sm outline-none bg-transparent; @apply flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200;
} }
} }
@ -24,18 +24,18 @@
@apply hidden absolute top-9 -right-2 p-2 w-80 z-10; @apply hidden absolute top-9 -right-2 p-2 w-80 z-10;
> .quickly-action-container { > .quickly-action-container {
@apply flex flex-col justify-start items-start w-full bg-white px-4 py-3 rounded-lg; @apply flex flex-col justify-start items-start w-full bg-white dark:bg-zinc-700 px-4 py-3 rounded-lg;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .title-text { > .title-text {
@apply text-gray-600 text-xs; @apply text-gray-600 dark:text-gray-400 text-xs;
} }
> .types-container { > .types-container {
@apply flex flex-row justify-start items-start w-full text-xs mt-2; @apply flex flex-row justify-start items-start w-full text-xs mt-2;
> .section-text { > .section-text {
@apply text-gray-600 mr-1 shrink-0 leading-6; @apply text-gray-600 dark:text-gray-400 mr-1 shrink-0 leading-6;
} }
> .values-container { > .values-container {
@ -45,10 +45,10 @@
@apply flex flex-row justify-start items-center leading-6; @apply flex flex-row justify-start items-center leading-6;
.type-item { .type-item {
@apply cursor-pointer px-1 rounded hover:bg-gray-100; @apply cursor-pointer px-1 rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-600;
&.selected { &.selected {
@apply bg-green-600 text-white; @apply !bg-green-600 text-white;
} }
} }

14
web/src/less/shortcut-list.less
View file

@ -9,10 +9,10 @@
} }
> .btn { > .btn {
@apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 hover:shadow; @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow;
> .icon-img { > .icon-img {
@apply w-4 h-4 text-gray-500; @apply w-4 h-4 text-gray-400;
} }
} }
} }
@ -21,7 +21,7 @@
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2; @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
> .shortcut-container { > .shortcut-container {
@apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white; @apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700;
&:hover { &:hover {
> .btns-container { > .btns-container {
@ -36,7 +36,7 @@
} }
> .shortcut-text-container { > .shortcut-text-container {
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black; @apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200;
> .icon-text { > .icon-text {
@apply block w-4 shrink-0; @apply block w-4 shrink-0;
@ -54,7 +54,7 @@
@apply flex flex-row justify-center items-center; @apply flex flex-row justify-center items-center;
&.toggle-btn { &.toggle-btn {
@apply text-gray-600; @apply text-gray-600 dark:text-gray-400;
> .icon-img { > .icon-img {
@apply w-4 h-auto; @apply w-4 h-auto;
@ -72,11 +72,11 @@
@apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1; @apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1;
> .action-btns-container { > .action-btns-container {
@apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white; @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .btn { > .btn {
@apply w-full text-sm leading-6 py-1 px-3 rounded text-left hover:bg-gray-100; @apply w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800;
&.delete-btn { &.delete-btn {
@apply text-orange-600; @apply text-orange-600;

4
web/src/less/siderbar.less
View file

@ -1,5 +1,5 @@
.sidebar-wrapper { .sidebar-wrapper {
@apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar; @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
&.show { &.show {
@apply translate-x-0 shadow-2xl sm:shadow-none; @apply translate-x-0 shadow-2xl sm:shadow-none;
@ -9,7 +9,7 @@
@apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0; @apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0;
> .action-btn { > .action-btn {
@apply leading-10 px-4 rounded-lg text-base hover:bg-white; @apply leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white dark:hover:bg-zinc-700;
> .icon { > .icon {
@apply mr-1; @apply mr-1;

10
web/src/less/tag-list.less
View file

@ -9,7 +9,7 @@
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1; @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;
.subtags-container { .subtags-container {
@apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200; @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400;
width: calc(100% - 18px); width: calc(100% - 18px);
min-width: 80px; min-width: 80px;
@ -19,7 +19,7 @@
} }
.tag-item-container { .tag-item-container {
@apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white; @apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white dark:hover:bg-zinc-700;
&.active { &.active {
> .tag-text-container { > .tag-text-container {
@ -28,7 +28,7 @@
} }
> .tag-text-container { > .tag-text-container {
@apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black; @apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black dark:text-gray-200;
max-width: calc(100% - 24px); max-width: calc(100% - 24px);
> .icon-text { > .icon-text {
@ -47,7 +47,7 @@
@apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0; @apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;
> .icon-img { > .icon-img {
@apply w-5 h-5 opacity-80; @apply w-5 h-5 opacity-80 dark:text-gray-400;
} }
&.shown { &.shown {
@ -58,7 +58,7 @@
} }
> .tip-text { > .tip-text {
@apply w-full bg-gray-50 mt-2 pl-4 leading-8 rounded text-sm text-gray-400 font-mono; @apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 pl-4 leading-8 rounded text-sm text-gray-400 font-mono;
} }
} }
} }

12
web/src/less/usage-heat-map.less
View file

@ -18,28 +18,28 @@
> .stat-wrapper { > .stat-wrapper {
> .stat-container { > .stat-container {
@apply block rounded-sm bg-gray-200; @apply block rounded-sm bg-gray-200 dark:bg-zinc-700;
width: 14px; width: 14px;
height: 14px; height: 14px;
&.stat-day-l1-bg { &.stat-day-l1-bg {
@apply bg-green-400; @apply bg-green-400 dark:bg-green-500;
} }
&.stat-day-l2-bg { &.stat-day-l2-bg {
@apply bg-green-500; @apply bg-green-500 dark:bg-green-600;
} }
&.stat-day-l3-bg { &.stat-day-l3-bg {
@apply bg-green-600; @apply bg-green-600 dark:bg-green-700;
} }
&.stat-day-l4-bg { &.stat-day-l4-bg {
@apply bg-green-700; @apply bg-green-700 dark:bg-green-800;
} }
&.today { &.today {
@apply border border-black; @apply border border-black dark:border-gray-400;
} }
} }
} }

6
web/src/less/user-banner.less
View file

@ -5,11 +5,11 @@
@apply shrink flex flex-row justify-start items-center flex-nowrap truncate; @apply shrink flex flex-row justify-start items-center flex-nowrap truncate;
> .username-text { > .username-text {
@apply font-bold text-lg pr-1 text-slate-800 cursor-pointer shrink truncate; @apply font-bold text-lg pr-1 text-slate-800 dark:text-gray-200 cursor-pointer shrink truncate;
} }
> .tag { > .tag {
@apply text-xs px-1 bg-blue-600 rounded text-white shadow; @apply text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow;
} }
} }
@ -33,7 +33,7 @@
@apply flex flex-col justify-start items-start; @apply flex flex-col justify-start items-start;
> .amount-text { > .amount-text {
@apply font-bold text-2xl opacity-80 leading-10 text-slate-600; @apply font-bold text-2xl opacity-80 leading-10 text-slate-600 dark:text-gray-300;
} }
> .type-text { > .type-text {

10
web/src/pages/Auth.tsx
View file

@ -136,11 +136,11 @@ const Auth = () => {
<div className="action-btns-container"> <div className="action-btns-container">
{systemStatus?.host ? ( {systemStatus?.host ? (
<> <>
{actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto animate-spin" />} {actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin" />}
{systemStatus?.allowSignUp && ( {systemStatus?.allowSignUp && (
<> <>
<button <button
className={`btn signup-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} className={`btn-text ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
onClick={() => handleSignUpBtnsClick("USER")} onClick={() => handleSignUpBtnsClick("USER")}
> >
{t("common.sign-up")} {t("common.sign-up")}
@ -148,14 +148,14 @@ const Auth = () => {
<span className="mr-2 font-mono text-gray-200">/</span> <span className="mr-2 font-mono text-gray-200">/</span>
</> </>
)} )}
<button className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSigninBtnsClick}> <button className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSigninBtnsClick}>
{t("common.sign-in")} {t("common.sign-in")}
</button> </button>
</> </>
) : ( ) : (
<> <>
<button <button
className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
onClick={() => handleSignUpBtnsClick("HOST")} onClick={() => handleSignUpBtnsClick("HOST")}
> >
{t("auth.signup-as-host")} {t("auth.signup-as-host")}
@ -165,7 +165,6 @@ const Auth = () => {
</div> </div>
{!systemStatus?.host && <p className="tip-text">{t("auth.host-tip")}</p>} {!systemStatus?.host && <p className="tip-text">{t("auth.host-tip")}</p>}
</div> </div>
<div className="footer-container">
<div className="w-full flex flex-row justify-center items-center gap-2"> <div className="w-full flex flex-row justify-center items-center gap-2">
<Select <Select
className="!min-w-[9rem] w-auto whitespace-nowrap" className="!min-w-[9rem] w-auto whitespace-nowrap"
@ -182,7 +181,6 @@ const Auth = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };

10
web/src/pages/Explore.tsx
View file

@ -63,16 +63,16 @@ const Explore = () => {
<div className="page-header"> <div className="page-header">
<div className="title-container"> <div className="title-container">
<img className="logo-img" src="/logo.webp" alt="" /> <img className="logo-img" src="/logo.webp" alt="" />
<span className="title-text">Explore</span> <span className="title-text">memos</span>
</div> </div>
<div className="action-button-container"> <div className="action-button-container">
{!loadingState.isLoading && user ? ( {!loadingState.isLoading && user ? (
<Link to="/" className="btn"> <Link to="/" className="link-btn btn-normal">
<span className="icon">🏠</span> {t("common.back-to-home")} <span>🏠</span> {t("common.back-to-home")}
</Link> </Link>
) : ( ) : (
<Link to="/auth" className="btn"> <Link to="/auth" className="link-btn btn-normal">
<span className="icon">👉</span> {t("common.sign-in")} <span>👉</span> {t("common.sign-in")}
</Link> </Link>
)} )}
</div> </div>

3
web/src/pages/Home.tsx
View file

@ -11,8 +11,11 @@ import MemoFilter from "../components/MemoFilter";
import MemoList from "../components/MemoList"; import MemoList from "../components/MemoList";
import UpdateVersionBanner from "../components/UpdateVersionBanner"; import UpdateVersionBanner from "../components/UpdateVersionBanner";
import "../less/home.less"; import "../less/home.less";
import useApperance from "../hooks/useApperance";
function Home() { function Home() {
useApperance();
const { t } = useTranslation(); const { t } = useTranslation();
const location = useLocation(); const location = useLocation();
const user = useAppSelector((state) => state.user.user); const user = useAppSelector((state) => state.user.user);

2
web/tailwind.config.js
View file

@ -13,6 +13,8 @@ module.exports = {
"2xl": "1.5rem", "2xl": "1.5rem",
"3xl": "1.875rem", "3xl": "1.875rem",
"4xl": "2.25rem", "4xl": "2.25rem",
"5xl": "2.5rem",
"6xl": "3rem",
}, },
extend: { extend: {
spacing: { spacing: {