chore: tweak embedded memo styles

usememos · Apr 2, 2024 · bedf3b3 · bedf3b3
1 parent 09ffa7b
commit bedf3b3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
@@ -53,10 +53,10 @@ const EmbeddedMemo = ({ resourceId, params: paramsStr }: Props) => {
   }
 
   return (
-    <div className="relative flex flex-col justify-start items-start w-full p-4 pt-3 !my-2 bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 hover:shadow">
+    <div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 hover:shadow">
       <div className="w-full mb-1 flex flex-row justify-between items-center">
         <div className="text-sm leading-6 text-gray-400 select-none">
-          <relative-time datetime={memo.displayTime?.toISOString()} tense="past"></relative-time>
+          <relative-time datetime={memo.displayTime?.toISOString()} format="datetime" tense="past"></relative-time>
         </div>
         <Link className="hover:opacity-80" to={`/m/${memo.uid}`} unstable_viewTransition>
           <Icon.ArrowUpRight className="w-5 h-auto opacity-80 text-gray-400" />

diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx
@@ -1,9 +1,10 @@
-import { Button } from "@mui/joy";
+import { Button, Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
 import { memoServiceClient } from "@/grpcweb";
 import { downloadFileFromUrl } from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useTranslate } from "@/utils/i18n";
 import showChangePasswordDialog from "../ChangePasswordDialog";
+import Icon from "../Icon";
 import showUpdateAccountDialog from "../UpdateAccountDialog";
 import UserAvatar from "../UserAvatar";
 import AccessTokenSection from "./AccessTokenSection";
@@ -33,15 +34,27 @@ const MyAccountSection = () => {
         </div>
       </div>
       <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
-        <Button variant="outlined" onClick={showUpdateAccountDialog}>
+        <Button variant="outlined" color="neutral" size="sm" onClick={showUpdateAccountDialog}>
+          <Icon.PenLine className="w-4 h-4 mx-auto mr-1" />
           {t("common.edit")}
         </Button>
-        <Button variant="outlined" onClick={showChangePasswordDialog}>
-          {t("setting.account-section.change-password")}
-        </Button>
-        <Button variant="outlined" onClick={() => downloadExportedMemos(user)}>
-          {t("setting.account-section.export-memos")}
-        </Button>
+        <Dropdown>
+          <MenuButton slots={{ root: "div" }}>
+            <Button variant="outlined" color="neutral" size="sm">
+              <Icon.MoreVertical className="w-4 h-4 mx-auto" />
+            </Button>
+          </MenuButton>
+          <Menu className="text-sm" size="sm" placement="bottom">
+            <MenuItem onClick={showChangePasswordDialog}>
+              <Icon.ArchiveRestore className="w-4 h-auto" />
+              {t("setting.account-section.change-password")}
+            </MenuItem>
+            <MenuItem onClick={() => downloadExportedMemos(user)}>
+              <Icon.Trash className="w-4 h-auto" />
+              {t("setting.account-section.export-memos")}
+            </MenuItem>
+          </Menu>
+        </Dropdown>
       </div>
 
       <AccessTokenSection />