mirror of
https://github.com/usememos/memos.git
synced 2024-09-20 22:46:16 +08:00
feat: dark mode for main pages (#637)
* feat: update dark mode styles for auth and explore page * feat: dark mode for home page
This commit is contained in:
boojack
GitHub
parent
52038d26d2
commit
6384f5af74
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
|
|
|
|||
|
|
@ -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"}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ module.exports = {
|
|||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "2.5rem",
|
||||
"6xl": "3rem",
|
||||
},
|
||||
extend: {
|
||||
spacing: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue