chore: update dark mode style (#1864)

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" />

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,16 +147,20 @@ 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>
+      <Table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>{t("common.username")}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
           {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">
+            <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>
                 ) : (
@@ -195,9 +200,11 @@ const PreferencesSection = () => {
                     }
                   />
                 )}
-          </div>
-        </div>
+              </td>
+            </tr>
           ))}
+        </tbody>
+      </Table>
     </div>
   );
 };

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">

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>
             );
           }

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"}`}
       >

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%);

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;

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 {

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;
-      }
-    }
-  }
 }

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}