YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-16 03:12:13 +01: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 targetEl = e.target as HTMLElement;
if (targetEl.className === "memo-link-text") {
return;
} else if (targetEl.className === "tag-span") {
if (targetEl.className === "tag-span") {
return;
} else if (targetEl.classList.contains("todo-block")) {
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}
</div>
<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"
actions={
<>
{!userService.isVisitorMode() && (
<>
<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}
>
<span className="mr-1">🌄</span> {t("sidebar.resources")}
</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}
>
<span className="mr-1">🗂</span> {t("sidebar.archived")}
@ -95,14 +95,14 @@ const UserBanner = () => {
</>
)}
<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}
>
<span className="mr-1">🤠</span> {t("common.about")}
</button>
{!userService.isVisitorMode() && (
<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}
>
<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
) : (
<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" />
</button>
)}
<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 ?? ""
} ${dropdownStatus ? "" : "!hidden"}`}
>

12
web/src/css/tailwind.css
View File

@ -18,19 +18,19 @@
.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;
@apply btn-normal border-transparent bg-green-600 text-white dark:text-gray-200;
}
.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;
@apply btn-normal text-gray-600 border-none dark:text-gray-200 hover:shadow-none;
}
.input-text {
@apply w-full px-3 py-2 leading-6 text-sm border rounded;
}

44
web/src/less/auth.less
View File

@ -1,5 +1,5 @@
.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 {
@apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;
@ -18,12 +18,12 @@
}
> .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 {
@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;
> 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,20 +58,8 @@
> .action-btns-container {
@apply flex flex-row justify-end items-center w-full mt-2;
> .btn {
@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;
}
> .requesting {
@apply cursor-wait opacity-80;
}
}
@ -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;
> .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,
&.active {
@apply bg-gray-100;
@apply bg-gray-100 dark:bg-zinc-700;
}
> .value-text {
@apply text-sm mr-0 truncate;
@apply text-sm mr-0 truncate dark:text-gray-300;
width: calc(100% - 20px);
}
@ -18,19 +18,19 @@
@apply flex flex-row justify-center items-center w-4 shrink-0;
> .icon-img {
@apply w-4 h-auto opacity-40;
@apply w-4 h-auto opacity-40 dark:text-gray-300;
}
}
}
> .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);
max-height: 256px;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .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 {
@apply text-green-600;

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

@ -1,5 +1,5 @@
.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;
> .page-container {
@ -16,17 +16,13 @@
}
> .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 {
> .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;
> .icon {
@apply text-lg;
}
> .link-btn {
@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;
}
}
}
@ -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;
> .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 {
@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;
}
}
> .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 {
@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;
> .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;
> .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;
}
@ -25,7 +25,7 @@
@apply fixed bottom-12 left-1/2 -translate-x-1/2;
> .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 {
@apply text-lg mr-1;

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

@ -1,5 +1,5 @@
.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 {
@apply w-full break-words text-base leading-7;
@ -14,15 +14,12 @@
}
.tag-span {
@apply inline-block w-auto font-mono text-blue-600 cursor-pointer;
}
.memo-link-text {
@apply inline-block text-blue-600 cursor-pointer font-bold border-none no-underline hover:opacity-80;
@apply inline-block w-auto font-mono text-blue-600 dark:text-blue-400 cursor-pointer;
}
.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 {
@apply underline decoration-1;
}
@ -55,7 +52,7 @@
}
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 {
@apply block;
@ -63,7 +60,7 @@
}
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 {
@ -79,11 +76,11 @@
}
blockquote {
@apply border-l-4 pl-2 text-gray-400;
@apply border-l-4 pl-2 text-gray-400 dark:text-gray-300;
}
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;
> .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 {
@apply mt-2;

4
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 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;
> .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 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;
> .title-container {

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

@ -1,12 +1,12 @@
.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 {
@apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
background-color: #f6f5f4;
> .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 {
@apply flex-grow w-full !h-full max-h-full;
@ -33,7 +33,7 @@
}
> .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 {
@ -43,7 +43,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 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 {
@apply relative;
@ -67,8 +67,8 @@
}
}
&.resource-btn{
@apply relative ;
&.resource-btn {
@apply relative;
&:hover {
> .resource-action-list {
@ -76,18 +76,16 @@
}
}
>.resource-action-list{
> .resource-action-list {
@apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-36 max-h-52 overflow-auto font-mono bg-zinc-100;
>.resource-action-item{
> .resource-action-item {
@apply w-full flex text-black cursor-pointer rounded text-sm leading-6 px-2 truncate hover:bg-zinc-300 shrink-0;
>.icon-img{
> .icon-img {
@apply w-4 mr-2;
}
}
}
}
@ -131,7 +129,7 @@
}
> .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 {
@apply h-8;

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

@ -1,16 +1,16 @@
.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 {
@apply mr-2;
}
> .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;
> .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 {
@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 {
@apply border-gray-200;
}
&.pinned {
@apply border-gray-200 border-2;
@apply border-gray-200 border-2 dark:border-zinc-600;
}
> .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;
> .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%);
> .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 {
@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 {
@apply block;
@ -78,7 +78,7 @@
}
> .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 {
@apply text-orange-600;
@ -88,13 +88,13 @@
}
.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 {
@apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
> .icon-img {
@apply w-4 h-auto;
@apply w-4 h-auto dark:text-gray-300;
}
&: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;
> .icon-img {
@apply w-5 h-auto;
@apply w-5 h-auto dark:text-gray-200;
}
}
> .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 {
@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 {
@apply w-4 h-auto opacity-30;
@apply w-4 h-auto opacity-30 dark:text-gray-200;
}
> .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;
> .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%);
> .title-text {
@apply text-gray-600 text-xs;
@apply text-gray-600 dark:text-gray-400 text-xs;
}
> .types-container {
@apply flex flex-row justify-start items-start w-full text-xs mt-2;
> .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 {
@ -45,10 +45,10 @@
@apply flex flex-row justify-start items-center leading-6;
.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 {
@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 {
@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 {
@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;
> .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 {
> .btns-container {
@ -36,7 +36,7 @@
}
> .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 {
@apply block w-4 shrink-0;
@ -54,7 +54,7 @@
@apply flex flex-row justify-center items-center;
&.toggle-btn {
@apply text-gray-600;
@apply text-gray-600 dark:text-gray-400;
> .icon-img {
@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;
> .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%);
> .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 {
@apply text-orange-600;

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

@ -1,5 +1,5 @@
.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 {
@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;
> .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 {
@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;
.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);
min-width: 80px;
@ -19,7 +19,7 @@
}
.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 {
> .tag-text-container {
@ -28,7 +28,7 @@
}
> .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);
> .icon-text {
@ -47,7 +47,7 @@
@apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;
> .icon-img {
@apply w-5 h-5 opacity-80;
@apply w-5 h-5 opacity-80 dark:text-gray-400;
}
&.shown {
@ -58,7 +58,7 @@
}
> .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-container {
@apply block rounded-sm bg-gray-200;
@apply block rounded-sm bg-gray-200 dark:bg-zinc-700;
width: 14px;
height: 14px;
&.stat-day-l1-bg {
@apply bg-green-400;
@apply bg-green-400 dark:bg-green-500;
}
&.stat-day-l2-bg {
@apply bg-green-500;
@apply bg-green-500 dark:bg-green-600;
}
&.stat-day-l3-bg {
@apply bg-green-600;
@apply bg-green-600 dark:bg-green-700;
}
&.stat-day-l4-bg {
@apply bg-green-700;
@apply bg-green-700 dark:bg-green-800;
}
&.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;
> .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 {
@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;
> .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 {

36
web/src/pages/Auth.tsx
View File

@ -136,11 +136,11 @@ const Auth = () => {
<div className="action-btns-container">
{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 && (
<>
<button
className={`btn signup-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
className={`btn-text ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
onClick={() => handleSignUpBtnsClick("USER")}
>
{t("common.sign-up")}
@ -148,14 +148,14 @@ const Auth = () => {
<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")}
</button>
</>
) : (
<>
<button
className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
onClick={() => handleSignUpBtnsClick("HOST")}
>
{t("auth.signup-as-host")}
@ -165,21 +165,19 @@ const Auth = () => {
</div>
{!systemStatus?.host && <p className="tip-text">{t("auth.host-tip")}</p>}
</div>
<div className="footer-container">
<div className="w-full flex flex-row justify-center items-center gap-2">
<Select
className="!min-w-[9rem] w-auto whitespace-nowrap"
startDecorator={<Icon.Globe className="w-4 h-auto" />}
value={i18n.language}
onChange={(_, value) => handleLocaleItemClick(value as Locale)}
>
<Option value="en">English</Option>
<Option value="zh">中文</Option>
<Option value="vi">Tiếng Việt</Option>
<Option value="fr">French</Option>
</Select>
<ApperanceSelect />
</div>
<div className="w-full flex flex-row justify-center items-center gap-2">
<Select
className="!min-w-[9rem] w-auto whitespace-nowrap"
startDecorator={<Icon.Globe className="w-4 h-auto" />}
value={i18n.language}
onChange={(_, value) => handleLocaleItemClick(value as Locale)}
>
<Option value="en">English</Option>
<Option value="zh">中文</Option>
<Option value="vi">Tiếng Việt</Option>
<Option value="fr">French</Option>
</Select>
<ApperanceSelect />
</div>
</div>
</div>

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

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

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

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

2
web/tailwind.config.js
View File

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