From 847b4605f40c77aa241223f08c5a9c89c16811be Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Fri, 30 Jun 2023 08:40:13 +0800
Subject: [PATCH] chore: update dark mode style (#1864)

---
 web/src/components/Header.tsx                 |   2 +-
 web/src/components/Settings/MemberSection.tsx | 101 ++++++++++--------
 .../components/Settings/MyAccountSection.tsx  |  10 +-
 web/src/components/kit/DatePicker.tsx         |  13 +--
 web/src/components/kit/Dropdown.tsx           |   2 +-
 web/src/less/common/selector.less             |   2 +-
 web/src/less/memo-editor.less                 |   2 +-
 web/src/less/setting.less                     |   6 +-
 web/src/less/settings/member-section.less     |  36 +------
 web/src/pages/DailyReview.tsx                 |   2 +-
 10 files changed, 75 insertions(+), 101 deletions(-)

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 325f01aa..576cca89 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -134,7 +134,7 @@ const Header = () => {
               </NavLink>
               <div className="pr-3 pl-1 w-full">
                 <button
-                  className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 text-white dark:opacity-80 hover:shadow hover:opacity-90"
+                  className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 text-white hover:shadow hover:opacity-80"
                   onClick={() => showMemoEditorDialog()}
                 >
                   <Icon.Edit3 className="w-4 h-auto mr-1" />
diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index d5866b1c..84e9a44a 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@@ -1,3 +1,4 @@
+import { Table } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -146,58 +147,64 @@ const PreferencesSection = () => {
       <div className="w-full flex flex-row justify-between items-center">
         <div className="title-text">{t("setting.member-list")}</div>
       </div>
-      <div className="member-container field-container">
-        <span className="field-text">ID</span>
-        <span className="field-text username-field">{t("common.username")}</span>
-        <span></span>
-      </div>
-      {userList.map((user) => (
-        <div key={user.id} className={`member-container ${user.rowStatus === "ARCHIVED" ? "archived" : ""}`}>
-          <span className="field-text id-text">{user.id}</span>
-          <span className="field-text username-text">{user.username}</span>
-          <div className="buttons-container">
-            {currentUser?.id === user.id ? (
-              <span className="tip-text">{t("common.yourself")}</span>
-            ) : (
-              <Dropdown
-                actions={
-                  <>
-                    <button
-                      className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                      onClick={() => handleChangePasswordClick(user)}
-                    >
-                      {t("setting.account-section.change-password")}
-                    </button>
-                    {user.rowStatus === "NORMAL" ? (
-                      <button
-                        className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                        onClick={() => handleArchiveUserClick(user)}
-                      >
-                        {t("common.archive")}
-                      </button>
-                    ) : (
+      <Table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>{t("common.username")}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {userList.map((user) => (
+            <tr key={user.id}>
+              <td className="field-text id-text">{user.id}</td>
+              <td className="field-text username-text">{user.username}</td>
+              <td className="flex flex-row justify-end items-center">
+                {currentUser?.id === user.id ? (
+                  <span className="tip-text">{t("common.yourself")}</span>
+                ) : (
+                  <Dropdown
+                    actions={
                       <>
                         <button
-                          className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                          onClick={() => handleRestoreUserClick(user)}
+                          className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                          onClick={() => handleChangePasswordClick(user)}
                         >
-                          {t("common.restore")}
-                        </button>
-                        <button
-                          className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
-                          onClick={() => handleDeleteUserClick(user)}
-                        >
-                          {t("common.delete")}
+                          {t("setting.account-section.change-password")}
                         </button>
+                        {user.rowStatus === "NORMAL" ? (
+                          <button
+                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                            onClick={() => handleArchiveUserClick(user)}
+                          >
+                            {t("common.archive")}
+                          </button>
+                        ) : (
+                          <>
+                            <button
+                              className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                              onClick={() => handleRestoreUserClick(user)}
+                            >
+                              {t("common.restore")}
+                            </button>
+                            <button
+                              className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
+                              onClick={() => handleDeleteUserClick(user)}
+                            >
+                              {t("common.delete")}
+                            </button>
+                          </>
+                        )}
                       </>
-                    )}
-                  </>
-                }
-              />
-            )}
-          </div>
-        </div>
-      ))}
+                    }
+                  />
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
     </div>
   );
 };
diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx
index 368ad156..352612cb 100644
--- a/web/src/components/Settings/MyAccountSection.tsx
+++ b/web/src/components/Settings/MyAccountSection.tsx
@@ -35,16 +35,16 @@ const MyAccountSection = () => {
         <div className="flex flex-row justify-start items-center">
           <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
           <span className="text-2xl leading-10 font-medium">{user.nickname}</span>
-          <span className="text-base ml-1 text-gray-500 leading-10">({user.username})</span>
+          <span className="text-base ml-1 text-gray-500 leading-10 dark:text-gray-400">({user.username})</span>
         </div>
         <div className="flex flex-row justify-start items-center text-base text-gray-600">{user.email}</div>
         <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
-          <button className="btn-normal" onClick={showUpdateAccountDialog}>
+          <Button variant="outlined" onClick={showUpdateAccountDialog}>
             {t("common.edit")}
-          </button>
-          <button className="btn-normal" onClick={showChangePasswordDialog}>
+          </Button>
+          <Button variant="outlined" onClick={showChangePasswordDialog}>
             {t("setting.account-section.change-password")}
-          </button>
+          </Button>
         </div>
       </div>
       <div className="section-container openapi-section-container mt-6">
diff --git a/web/src/components/kit/DatePicker.tsx b/web/src/components/kit/DatePicker.tsx
index 2eb7786f..1cf7c200 100644
--- a/web/src/components/kit/DatePicker.tsx
+++ b/web/src/components/kit/DatePicker.tsx
@@ -1,3 +1,4 @@
+import { Badge, Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
@@ -73,15 +74,15 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   return (
     <div className={`date-picker-wrapper ${className}`}>
       <div className="date-picker-header">
-        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}>
+        <Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-1)}>
           <Icon.ChevronLeft className="icon-img" />
-        </span>
+        </Button>
         <span className="normal-text">
           {firstDate.getFullYear()}/{firstDate.getMonth() + 1}
         </span>
-        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
+        <Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(1)}>
           <Icon.ChevronRight className="icon-img" />
-        </span>
+        </Button>
       </div>
       <div className="date-picker-day-container">
         <div className="date-picker-day-header">
@@ -105,10 +106,10 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
             return (
               <span
                 key={d.datestamp}
-                className={`day-item ${countByDate.has(d.datestamp) && "font-bold"} ${d.datestamp === datestamp ? "current" : ""}`}
+                className={`day-item relative ${d.datestamp === datestamp ? "current" : ""}`}
                 onClick={() => handleDateItemClick(d.datestamp)}
               >
-                {d.date}
+                {countByDate.has(d.datestamp) ? <Badge size="sm">{d.date}</Badge> : d.date}
               </span>
             );
           }
diff --git a/web/src/components/kit/Dropdown.tsx b/web/src/components/kit/Dropdown.tsx
index bc100358..f21c6e19 100644
--- a/web/src/components/kit/Dropdown.tsx
+++ b/web/src/components/kit/Dropdown.tsx
@@ -43,7 +43,7 @@ const Dropdown: React.FC<Props> = (props: Props) => {
         </button>
       )}
       <div
-        className={`w-auto absolute flex flex-col justify-start items-start bg-white dark:bg-zinc-700 z-10 p-1 rounded-md shadow ${
+        className={`w-auto absolute flex flex-col justify-start items-start bg-white dark:bg-zinc-800 z-10 p-1 rounded-md shadow ${
           dropdownStatus ? "" : "!hidden"
         } ${actionsClassName ?? ""} ${positionClassName ?? "top-full right-0 mt-1"}`}
       >
diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less
index 0e72106e..fbd018ba 100644
--- a/web/src/less/common/selector.less
+++ b/web/src/less/common/selector.less
@@ -28,7 +28,7 @@
   }
 
   > .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 dark:bg-zinc-700 dark:border-zinc-600 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-800 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%);
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 596d5bbe..95fc9945 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -33,7 +33,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 text-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;
+        @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;
 
         > .icon-img {
           @apply w-5 h-5 mx-auto flex flex-row justify-center items-center;
diff --git a/web/src/less/setting.less b/web/src/less/setting.less
index c48b2cc0..e8f116b1 100644
--- a/web/src/less/setting.less
+++ b/web/src/less/setting.less
@@ -12,10 +12,10 @@
       @apply w-full h-auto flex flex-row sm:flex-col justify-start items-start;
 
       > .section-item {
-        @apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 dark:text-gray-300 cursor-pointer hover:opacity-80;
+        @apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 dark:text-gray-400 cursor-pointer hover:opacity-80;
 
         &.selected {
-          @apply font-bold hover:opacity-100;
+          @apply font-bold dark:text-gray-300 hover:opacity-100;
         }
 
         > .icon-text {
@@ -32,7 +32,7 @@
       @apply flex flex-col justify-start items-start w-full;
 
       .title-text {
-        @apply text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500;
+        @apply text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500 dark:text-gray-400;
       }
 
       > .form-label {
diff --git a/web/src/less/settings/member-section.less b/web/src/less/settings/member-section.less
index 9328a482..d667516e 100644
--- a/web/src/less/settings/member-section.less
+++ b/web/src/less/settings/member-section.less
@@ -6,7 +6,7 @@
       @apply w-full mb-3 flex flex-row justify-start items-center;
 
       > .field-text {
-        @apply text-sm text-gray-600 w-20 text-right pr-2;
+        @apply text-sm text-gray-600 dark:text-gray-400 w-20 text-right pr-2;
       }
 
       > input {
@@ -18,38 +18,4 @@
       @apply w-full mb-6 pl-20 flex flex-row justify-start items-center;
     }
   }
-
-  > .field-container {
-    > .field-text {
-      @apply text-gray-400 text-sm;
-
-      &.username-field {
-        @apply col-span-2 w-full;
-      }
-    }
-  }
-
-  > .member-container {
-    @apply w-full grid grid-cols-4 border-b dark:border-b-zinc-700 py-2;
-
-    > .field-text {
-      @apply text-base pl-2 mr-4 w-16 truncate;
-
-      &.id-text {
-        @apply font-mono text-gray-400;
-      }
-
-      &.username-text {
-        @apply w-auto col-span-2;
-      }
-    }
-
-    > .buttons-container {
-      @apply col-span-1 flex flex-row justify-end items-center;
-
-      > .tip-text {
-        @apply text-gray-400;
-      }
-    }
-  }
 }
diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx
index d9a43d06..158c2f6f 100644
--- a/web/src/pages/DailyReview.tsx
+++ b/web/src/pages/DailyReview.tsx
@@ -117,7 +117,7 @@ const DailyReview = () => {
             </button>
           </div>
           <DatePicker
-            className={`absolute top-8 mt-2 z-20 mx-auto border bg-white dark:border-zinc-800 rounded-lg mb-6 ${
+            className={`absolute top-8 mt-2 z-20 mx-auto border bg-white dark:bg-zinc-800 dark:border-zinc-800 rounded-lg mb-6 ${
               showDatePicker ? "" : "!hidden"
             }`}
             datestamp={currentDateStamp}