From fbe7b604ef0aae2cb4f9bf5a468e88aa28223be3 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Mon, 28 Nov 2022 19:40:08 +0800
Subject: [PATCH] feat: dark mode support for memo detail (#604)

* feat: dark mode support for memo detail

* chore: update

* chore: update

* chore: update
---
 web/src/css/tailwind.css      | 38 ++++++++++++++++++-----------------
 web/src/less/memo-detail.less | 14 ++++++++-----
 web/src/pages/MemoDetail.tsx  |  6 +++++-
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/web/src/css/tailwind.css b/web/src/css/tailwind.css
index 9bf98bb2..dc382878 100644
--- a/web/src/css/tailwind.css
+++ b/web/src/css/tailwind.css
@@ -14,22 +14,24 @@
   }
 }
 
-.btn-normal {
-  @apply select-none inline-flex border cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
-}
-
-.btn-primary {
-  @apply btn-normal border-transparent bg-green-600 text-white;
-}
-
-.btn-danger {
-  @apply btn-normal border-red-600 bg-red-50 text-red-600;
-}
-
-.btn-text {
-  @apply btn-normal text-gray-600 border-none hover:shadow-none;
-}
-
-.input-text {
-  @apply w-full px-3 py-2 leading-6 text-sm border rounded;
+@layer components {
+  .btn-normal {
+    @apply select-none inline-flex border cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
+  }
+  
+  .btn-primary {
+    @apply btn-normal border-transparent bg-green-600 text-white;
+  }
+  
+  .btn-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;
+  }
+  
+  .input-text {
+    @apply w-full px-3 py-2 leading-6 text-sm border rounded;
+  }
 }
diff --git a/web/src/less/memo-detail.less b/web/src/less/memo-detail.less
index e0ca83a6..e6f478fe 100644
--- a/web/src/less/memo-detail.less
+++ b/web/src/less/memo-detail.less
@@ -1,12 +1,12 @@
 .page-wrapper.memo-detail {
-  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
+  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-900;
   background-color: #f6f5f4;
 
   > .page-container {
     @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
 
     > .page-header {
-      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2;
+      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 dark:bg-zinc-900;
       background-color: #f6f5f4;
 
       > .title-container {
@@ -16,6 +16,10 @@
           @apply h-12 sm:h-14 w-auto mr-1;
         }
 
+        > .logo-text {
+          @apply text-4xl tracking-wide text-black dark:text-white;
+        }
+
         > .title-text {
           @apply text-xl sm:text-3xl font-mono text-gray-700;
         }
@@ -23,7 +27,7 @@
 
       > .action-button-container {
         > .btn {
-          @apply block text-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;
+          @apply block text-gray-600 dark:text-gray-300 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;
 
           > .icon {
             @apply text-lg;
@@ -36,7 +40,7 @@
       @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4;
 
       > .memo-container {
-        @apply flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
+        @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;
 
         > .memo-header {
           @apply mb-2 w-full flex flex-row justify-between items-center;
@@ -51,7 +55,7 @@
         }
 
         > .memo-content {
-          @apply cursor-default;
+          @apply cursor-default dark:text-zinc-50;
 
           > * {
             @apply cursor-default;
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index ae8535b0..8f40bb04 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -7,6 +7,7 @@ import { memoService } from "../services";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
+import useApperance from "../hooks/useApperance";
 import Icon from "../components/Icon";
 import toastHelper from "../components/Toast";
 import Dropdown from "../components/common/Dropdown";
@@ -19,6 +20,8 @@ interface State {
 }
 
 const MemoDetail = () => {
+  useApperance();
+
   const { t, i18n } = useTranslation();
   const params = useParams();
   const user = useAppSelector((state) => state.user.user);
@@ -58,7 +61,8 @@ const MemoDetail = () => {
       <div className="page-container">
         <div className="page-header">
           <div className="title-container">
-            <img className="logo-img" src="/logo-full.webp" alt="" />
+            <img className="logo-img" src="/logo.webp" alt="" />
+            <p className="logo-text">memos</p>
           </div>
           <div className="action-button-container">
             {!loadingState.isLoading && (