chore: tweak dark mode styles

boojack · boojack · commit 96140f387514 · 2024-01-03T23:12:50.000+08:00
diff --git a/web/src/components/CreateMemoRelationDialog.tsx b/web/src/components/CreateMemoRelationDialog.tsx
@@ -96,7 +96,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
             <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
               {memoList.map((memo) => (
                 <div
-                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
+                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 dark:border-zinc-700 hover:opacity-60 hover:line-through"
                   key={memo.id}
                   onClick={() => handleDeleteMemoRelation(memo)}
                 >
diff --git a/web/src/components/MemoContent/Code.tsx b/web/src/components/MemoContent/Code.tsx
@@ -3,7 +3,7 @@ interface Props {
 }
 
 const Code: React.FC<Props> = ({ content }: Props) => {
-  return <code>{content}</code>;
+  return <code className="text-sm">`{content}`</code>;
 };
 
 export default Code;
diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
@@ -29,7 +29,7 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   };
 
   return (
-    <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative">
+    <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-700 whitespace-pre-wrap relative">
       <IconButton
         size="sm"
         className="!absolute top-0.5 right-0.5 opacity-50"
diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -24,14 +24,17 @@ const TagSelector = (props: Props) => {
   }, []);
 
   return (
-    <IconButton className="relative group 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">
+    <IconButton
+      className="relative group 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 hover:shadow"
+      size="sm"
+    >
       <Icon.Hash className="w-5 h-5 mx-auto" />
-      <div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
+      <div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-100 dark:bg-zinc-700 group-hover:flex">
         {tags.length > 0 ? (
           tags.map((tag) => {
             return (
               <div
-                className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
+                className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-200 dark:hover:bg-zinc-800 shrink-0"
                 onClick={() => onTagSelectorClick(tag)}
                 key={tag}
               >
diff --git a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
@@ -114,15 +114,15 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
   if (!isVisibleRef.current || !position) return null;
   return (
     <div
-      className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-200 dark:bg-zinc-600"
+      className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-100 dark:bg-zinc-700"
       style={{ left: position.left, top: position.top + position.height }}
     >
       {suggestionsRef.current.map((tag, i) => (
         <div
           key={tag}
           onMouseDown={() => autocomplete(tag)}
           className={classNames(
-            "rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-700",
+            "rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800",
             i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
           )}
         >
diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
@@ -145,7 +145,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
   }, []);
 
   return (
-    <div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200", className)}>
+    <div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-300", className)}>
       <textarea
         className="w-full h-full max-h-[300px] my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
         rows={1}
diff --git a/web/src/components/MemoEditor/MemoEditorDialog.tsx b/web/src/components/MemoEditor/MemoEditorDialog.tsx
@@ -52,7 +52,7 @@ export default function showMemoEditorDialog(props: Pick<Props, "memoId" | "rela
     {
       className: "memo-editor-dialog",
       dialogName: "memo-editor-dialog",
-      containerClassName: "dark:!bg-zinc-700",
+      containerClassName: "dark:!bg-zinc-800",
     },
     MemoEditorDialog,
     props
diff --git a/web/src/components/MemoEditor/RelationListView.tsx b/web/src/components/MemoEditor/RelationListView.tsx
@@ -38,13 +38,13 @@ const RelationListView = (props: Props) => {
             return (
               <div
                 key={memo.id}
-                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
+                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-zinc-100 dark:bg-zinc-900 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 dark:text-gray-400 cursor-pointer hover:line-through"
                 onClick={() => handleDeleteRelation(memo)}
               >
                 <Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
                 <span className="px-1 shrink-0 opacity-80">#{memo.id}</span>
                 <span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
-                <Icon.X className="w-4 h-auto hover:opacity-80 shrink-0 ml-1" />
+                <Icon.X className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" />
               </div>
             );
           })}
diff --git a/web/src/components/MemoEditor/ResourceListView.tsx b/web/src/components/MemoEditor/ResourceListView.tsx
@@ -22,7 +22,7 @@ const ResourceListView = (props: Props) => {
             return (
               <div
                 key={resource.id}
-                className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-gray-500"
+                className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded text-gray-500 dark:text-gray-400"
               >
                 <ResourceIcon resource={resource} className="!w-4 !h-4 !opacity-100" />
                 <span className="text-sm max-w-[8rem] truncate">{resource.filename}</span>
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
@@ -357,7 +357,7 @@ const MemoEditor = (props: Props) => {
     <div
       className={`${
         className ?? ""
-      } relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 pt-4 rounded-lg border border-gray-200 dark:border-zinc-600`}
+      } relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-800 px-4 pt-4 rounded-lg border border-gray-200 dark:border-zinc-700`}
       tabIndex={0}
       onKeyDown={handleKeyDown}
       onDrop={handleDropEvent}
@@ -368,13 +368,15 @@ const MemoEditor = (props: Props) => {
         <div className="flex flex-row justify-start items-center">
           <TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
           <IconButton
-            className="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"
+            className="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"
+            size="sm"
             onClick={handleUploadFileBtnClick}
           >
             <Icon.Image className="w-5 h-5 mx-auto" />
           </IconButton>
           <IconButton
-            className="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"
+            className="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"
+            size="sm"
             onClick={handleAddMemoRelationBtnClick}
           >
             <Icon.Link className="w-5 h-5 mx-auto" />
diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx
@@ -18,14 +18,14 @@ const MemoFilter = () => {
 
   return (
     <div
-      className={`flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-300 ${
+      className={`flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-400 ${
         showFilter ? "" : "!hidden"
       }`}
     >
       <span className="mx-2 text-gray-400">{t("common.filter")}:</span>
       <div
         className={
-          "max-w-xs 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-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
           (tagQuery ? "" : "!hidden")
         }
         onClick={() => {
@@ -37,7 +37,7 @@ const MemoFilter = () => {
       </div>
       <div
         className={
-          "max-w-xs 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-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
           (visibility ? "" : "!hidden")
         }
         onClick={() => {
@@ -49,7 +49,7 @@ const MemoFilter = () => {
       </div>
       <div
         className={
-          "max-w-xs 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-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
           (textQuery ? "" : "!hidden")
         }
         onClick={() => {
diff --git a/web/src/components/MemoRelationListView.tsx b/web/src/components/MemoRelationListView.tsx
@@ -42,7 +42,7 @@ const MemoRelationListView = (props: Props) => {
             return (
               <div key={memo.id} className="block w-auto max-w-[50%]">
                 <Link
-                  className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
+                  className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
                   to={`/m/${memo.id}`}
                   unstable_viewTransition
                 >
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
@@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
   return (
     <div
       className={classNames(
-        "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-800 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
+        "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
         offsetTop > 0 && "shadow-md"
       )}
     >
diff --git a/web/src/components/PersonalStatistics.tsx b/web/src/components/PersonalStatistics.tsx
@@ -35,32 +35,28 @@ const PersonalStatistics = (props: Props) => {
   }, [memos.length, user.name]);
 
   return (
-    <div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
-      <p className="text-sm font-medium text-gray-500">Statistics</p>
+    <div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
+      <p className="text-sm font-medium">Statistics</p>
       <div className="w-full flex justify-between items-center">
-        <div className="w-full flex justify-start items-center text-gray-500">
+        <div className="w-full flex justify-start items-center">
           <Icon.CalendarDays className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">Days</span>
         </div>
-        <span className="text-gray-500 font-mono">{days}</span>
+        <span className="font-mono">{days}</span>
       </div>
       <div className="w-full flex justify-between items-center">
-        <div className="w-full flex justify-start items-center text-gray-500">
+        <div className="w-full flex justify-start items-center">
           <Icon.PencilLine className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">Memos</span>
         </div>
-        {isRequesting ? (
-          <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" />
-        ) : (
-          <span className="text-gray-500 font-mono">{memoAmount}</span>
-        )}
+        {isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
       </div>
       <div className="w-full flex justify-between items-center">
-        <div className="w-full flex justify-start items-center text-gray-500">
+        <div className="w-full flex justify-start items-center">
           <Icon.Hash className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">Tags</span>
         </div>
-        <span className="text-gray-500 font-mono">{tags}</span>
+        <span className="font-mono">{tags}</span>
       </div>
     </div>
   );
diff --git a/web/src/components/ResourceIcon.tsx b/web/src/components/ResourceIcon.tsx
@@ -27,7 +27,7 @@ const ResourceIcon = (props: Props) => {
     return (
       <SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
         <img
-          className="min-w-full min-h-full object-cover shadow"
+          className="min-w-full min-h-full object-cover border rounded dark:border-none"
           src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
           onClick={() => showPreviewImageDialog(resourceUrl)}
         />
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
@@ -30,7 +30,7 @@ const SearchBar = () => {
   return (
     <div className="w-full h-9 flex flex-row justify-start items-center">
       <Input
-        className="w-full !shadow-none !border-gray-200 dark:!border-zinc-800"
+        className="w-full !text-sm !shadow-none !border-gray-200 dark:!border-zinc-800"
         size="md"
         startDecorator={<Icon.Search className="w-4 h-auto opacity-30" />}
         placeholder={t("memo.search-placeholder")}
diff --git a/web/src/components/ShareMemoDialog.tsx b/web/src/components/ShareMemoDialog.tsx
@@ -103,7 +103,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
               <MemoContent nodes={memo.nodes} />
               <MemoResourceListView resourceList={memo.resources} />
             </div>
-            <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
+            <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">
               <div className="flex flex-row justify-start items-center">
                 <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
                 <div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
diff --git a/web/src/components/TagList.tsx b/web/src/components/TagList.tsx
@@ -75,7 +75,7 @@ const TagList = () => {
         <span className="text-sm leading-6 font-mono text-gray-400">{t("common.tags")}</span>
         <button
           onClick={() => showCreateTagDialog()}
-          className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow"
+          className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-800 rounded ml-2 hover:shadow"
         >
           <Icon.Plus className="w-4 h-4 text-gray-400" />
         </button>
@@ -141,7 +141,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
       </div>
       {hasSubTags ? (
         <div
-          className={`w-[calc(100%-0.5rem)] flex flex-col justify-start items-start h-auto ml-2 pl-2 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
+          className={`w-[calc(100%-0.5rem)] flex flex-col justify-start items-start h-auto ml-2 pl-2 border-l-2 border-l-gray-200 dark:border-l-zinc-800 ${
             !showSubTags && "!hidden"
           }`}
         >
diff --git a/web/src/css/global.css b/web/src/css/global.css
@@ -1,5 +1,5 @@
 body {
-  @apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
+  @apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-900;
 }
 
 #root {
diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
@@ -11,7 +11,7 @@ function Root() {
     <div className="w-full min-h-full">
       <div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
         {sm && (
-          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
+          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-60 transition-all hover:shadow-xl z-2">
             <Navigation />
           </div>
         )}
diff --git a/web/src/less/base-dialog.less b/web/src/less/base-dialog.less
@@ -10,14 +10,14 @@
   }
 
   > .dialog-container {
-    @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
+    @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg;
 
     > .dialog-header-container {
       @apply flex flex-row justify-between items-center w-full mb-4;
 
       > .title-text {
         > .icon-text {
-          @apply mr-2 text-base;
+          @apply mr-2 text-base dark:text-gray-300;
         }
       }
 
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
@@ -1,8 +1,8 @@
 .memo-wrapper {
-  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-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;
+  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-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;
 
   &.pinned {
-    @apply border-gray-200 border dark:border-zinc-600;
+    @apply border-gray-200 border dark:border-zinc-700;
   }
 
   > .memo-top-wrapper {
@@ -15,7 +15,7 @@
         @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-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-800;
+          @apply w-auto 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%);
 
           > .btn {
diff --git a/web/src/less/setting.less b/web/src/less/setting.less
@@ -1,5 +1,5 @@
 .setting-page-wrapper {
-  @apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
+  @apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-800 dark:text-gray-300 sm:gap-x-4;
 
   > .section-selector-container {
     @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
diff --git a/web/src/pages/Inboxes.tsx b/web/src/pages/Inboxes.tsx
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {`
`96`	`96`	`<div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">`
`97`	`97`	`{memoList.map((memo) => (`
`98`	`98`	`<div`
`99`		`- className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"`
	`99`	`+ className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 dark:border-zinc-700 hover:opacity-60 hover:line-through"`
`100`	`100`	`key={memo.id}`
`101`	`101`	`onClick={() => handleDeleteMemoRelation(memo)}`
`102`	`102`	`>`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ interface Props {`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`const Code: React.FC<Props> = ({ content }: Props) => {`
`6`		`- return <code>{content}</code>;`
	`6`	+ return <code className="text-sm">`{content}`</code>;
`7`	`7`	`};`
`8`	`8`
`9`	`9`	`export default Code;`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ export default function showMemoEditorDialog(props: Pick<Props, "memoId" \| "rela`
`52`	`52`	`{`
`53`	`53`	`className: "memo-editor-dialog",`
`54`	`54`	`dialogName: "memo-editor-dialog",`
`55`		`- containerClassName: "dark:!bg-zinc-700",`
	`55`	`+ containerClassName: "dark:!bg-zinc-800",`
`56`	`56`	`},`
`57`	`57`	`MemoEditorDialog,`
`58`	`58`	`props`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const ResourceListView = (props: Props) => {`
`22`	`22`	`return (`
`23`	`23`	`<div`
`24`	`24`	`key={resource.id}`
`25`		`- className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-gray-500"`
	`25`	`+ className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded text-gray-500 dark:text-gray-400"`
`26`	`26`	`>`
`27`	`27`	`<ResourceIcon resource={resource} className="!w-4 !h-4 !opacity-100" />`
`28`	`28`	`<span className="text-sm max-w-[8rem] truncate">{resource.filename}</span>`