chore: tweak accent color

web/src/components/Inbox/VersionUpdateMessage.tsx

@@ -62,7 +62,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
         className={classNames(
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
-            ? "border-green-600 text-green-600 bg-blue-50 dark:bg-zinc-800"
+            ? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
             : "border-gray-400 text-gray-400 bg-gray-50 dark:bg-zinc-800"
         )}
       >

web/src/components/MemoEditor/index.tsx

@@ -406,7 +406,12 @@ const MemoEditor = (props: Props) => {
           </Select>
         </div>
         <div className="shrink-0 flex flex-row justify-end items-center">
-          <Button color="success" disabled={!allowSave} loading={state.isRequesting} onClick={handleSaveBtnClick}>
+          <Button
+            disabled={!allowSave}
+            loading={state.isRequesting}
+            endDecorator={<Icon.Send className="w-4 h-auto" />}
+            onClick={handleSaveBtnClick}
+          >
             {t("editor.save")}
           </Button>
         </div>

web/src/components/MemoView.tsx

@@ -196,7 +196,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
             <>
               <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
               <Tooltip title={"Pinned"} placement="top">
-                <Icon.Bookmark className="w-4 h-auto text-green-600" />
+                <Icon.Bookmark className="w-4 h-auto text-amber-500" />
               </Tooltip>
             </>
           )}

web/src/components/TagList.tsx

@@ -122,7 +122,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
       >
         <div
           className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-gray-600 dark:text-gray-400 ${
-            isActive && "text-green-600"
+            isActive && "!text-blue-600"
           }`}
         >
           <Icon.Hash className="w-4 h-auto shrink-0 opacity-60 mr-1" />

web/src/pages/Explore.tsx

@@ -1,5 +1,7 @@
+import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import Empty from "@/components/Empty";
+import Icon from "@/components/Icon";
 import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
@@ -70,9 +72,9 @@ const Explore = () => {
           )
         ) : (
           <div className="w-full flex flex-row justify-center items-center my-4">
-            <span className="cursor-pointer text-sm italic text-gray-500  hover:text-green-600" onClick={fetchMemos}>
+            <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
               {t("memo.fetch-more")}
-            </span>
+            </Button>
           </div>
         )}
       </div>

web/src/pages/Home.tsx

@@ -1,8 +1,10 @@
+import { Button } from "@mui/joy";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 import Empty from "@/components/Empty";
 import HomeSidebar from "@/components/HomeSidebar";
 import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
+import Icon from "@/components/Icon";
 import MemoEditor from "@/components/MemoEditor";
 import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
@@ -82,9 +84,9 @@ const Home = () => {
               )
             ) : (
               <div className="w-full flex flex-row justify-center items-center my-4">
-                <span className="cursor-pointer text-sm italic text-gray-500  hover:text-green-600" onClick={fetchMemos}>
+                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
                   {t("memo.fetch-more")}
-                </span>
+                </Button>
               </div>
             )}
           </div>

web/src/pages/UserProfile.tsx

@@ -1,7 +1,9 @@
+import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
+import Icon from "@/components/Icon";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import UserAvatar from "@/components/UserAvatar";
@@ -109,9 +111,9 @@ const UserProfile = () => {
                 )
               ) : (
                 <div className="w-full flex flex-row justify-center items-center my-4">
-                  <span className="cursor-pointer text-sm italic text-gray-500  hover:text-green-600" onClick={fetchMemos}>
+                  <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
                     {t("memo.fetch-more")}
-                  </span>
+                  </Button>
                 </div>
               )}
             </>