chore: unify form styles

web/package.json

@@ -16,7 +16,7 @@
     "@matejmazur/react-katex": "^3.1.3",
     "@mui/joy": "5.0.0-beta.51",
     "@radix-ui/react-popover": "^1.1.6",
-    "@usememos/mui": "0.1.0-20250513152542",
+    "@usememos/mui": "0.1.0-20250515140125",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.13",

web/pnpm-lock.yaml

@@ -36,8 +36,8 @@ importers:
         specifier: ^1.1.6
         version: 1.1.6(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@usememos/mui':
-        specifier: 0.1.0-20250513152542
-        version: 0.1.0-20250513152542(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 0.1.0-20250515140125
+        version: 0.1.0-20250515140125(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1821,11 +1821,11 @@ packages:
     resolution: {integrity: sha512-hbn8SZ8w4u2pRwgQ1GlUrPKE+t2XvcCW5tTRF7j6SMYIuYG37XuzIW44JCZPa36evi0Oy2SnM664BlIaAuQcvg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@usememos/mui@0.1.0-20250513152542':
-    resolution: {integrity: sha512-v8yGnYIj6RQ47qiILYKIhCLaWNWzcI7e5dqsOEp2crHinvRcNw/fN27ewvmw87ArnymK7Ox6FsQ83987biXoIQ==}
+  '@usememos/mui@0.1.0-20250515140125':
+    resolution: {integrity: sha512-GY74G3lCIIeQhGOJkPV3ittQzHVIKpf6VxTfNjnw/IKVMLiqB8OjkjpTRg8MrEyW5h5lxTgS52rUN6zkHT+LTA==}
     peerDependencies:
-      react: '>=17.0.0'
-      react-dom: '>=17.0.0'
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
 
   '@vitejs/plugin-legacy@6.1.1':
     resolution: {integrity: sha512-BvusL+mYZ0q5qS5Rq3D70QxZBmhyiHRaXLtYJHH5AEsAmdSqJR4xe5KwMi1H3w8/9lVJwhkLYqFQ9vmWYWy6kA==}
@@ -5817,7 +5817,7 @@ snapshots:
       '@typescript-eslint/types': 8.28.0
       eslint-visitor-keys: 4.2.0
 
-  '@usememos/mui@0.1.0-20250513152542(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@usememos/mui@0.1.0-20250515140125(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)

web/src/components/ChangeMemberPasswordDialog.tsx

@@ -69,7 +69,7 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
         <p>
           {t("setting.account-section.change-password")} ({user.nickname})
         </p>
-        <Button size="sm" variant="plain" onClick={handleCloseBtnClick}>
+        <Button variant="plain" onClick={handleCloseBtnClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>

web/src/components/CreateAccessTokenDialog.tsx

@@ -87,7 +87,7 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
     <div className="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">
       <div className="flex flex-row justify-between items-center w-full mb-4 gap-2">
         <p>{t("setting.access-token-section.create-dialog.create-access-token")}</p>
-        <Button size="sm" variant="plain" onClick={() => destroy()}>
+        <Button variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>

web/src/components/CreateIdentityProviderDialog.tsx

@@ -245,7 +245,7 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
     <div className="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">
       <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p>{t(isCreating ? "setting.sso-section.create-sso" : "setting.sso-section.update-sso")}</p>
-        <Button size="sm" variant="plain" onClick={handleCloseBtnClick}>
+        <Button variant="plain" onClick={handleCloseBtnClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>

web/src/components/CreateShortcutDialog.tsx

-import { Input, Textarea } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Input, Textarea, Button } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -65,7 +64,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     <div className="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">
       <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{`${isCreating ? t("common.create") : t("common.edit")} ${t("common.shortcuts")}`}</p>
-        <Button size="sm" variant="plain" onClick={() => destroy()}>
+        <Button variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
@@ -75,10 +74,8 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           <Input className="w-full" type="text" placeholder="" value={shortcut.title} onChange={onShortcutTitleChange} />
           <span className="text-sm whitespace-nowrap mt-3 mb-1">{t("common.filter")}</span>
           <Textarea
-            className="w-full"
-            minRows={3}
-            maxRows={5}
-            size="sm"
+            rows={3}
+            fullWidth
             placeholder={t("common.shortcut-filter")}
             value={shortcut.filter}
             onChange={onShortcutFilterChange}

web/src/components/CreateUserDialog.tsx

@@ -66,7 +66,7 @@ const CreateUserDialog: React.FC<Props> = (props: Props) => {
     <div className="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">
       <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{`${isCreating ? t("common.create") : t("common.edit")} ${t("common.user")}`}</p>
-        <Button size="sm" variant="plain" onClick={() => destroy()}>
+        <Button variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>

web/src/components/CreateWebhookDialog.tsx

@@ -98,7 +98,7 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
         <p className="title-text">
           {isCreating ? t("setting.webhook-section.create-dialog.create-webhook") : t("setting.webhook-section.create-dialog.edit-webhook")}
         </p>
-        <Button size="sm" variant="plain" onClick={() => destroy()}>
+        <Button variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>

web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx

@@ -129,8 +129,8 @@ const AddMemoRelationPopover = (props: Props) => {
 
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <PopoverTrigger className="w-9 relative">
-        <Button className="flex items-center justify-center" size="sm" variant="plain" asChild>
+      <PopoverTrigger className="relative">
+        <Button className="flex items-center justify-center p-0" variant="plain" asChild>
           <LinkIcon className="w-5 h-5 mx-auto p-0" />
         </Button>
       </PopoverTrigger>
@@ -174,7 +174,7 @@ const AddMemoRelationPopover = (props: Props) => {
           />
           <div className="mt-2 w-full flex flex-row justify-end items-center gap-2">
             <Checkbox size="sm" label={"Embed"} checked={embedded} onChange={(e) => setEmbedded(e.target.checked)} />
-            <Button size="sm" color="primary" onClick={addMemoRelations} disabled={selectedMemos.length === 0}>
+            <Button color="primary" onClick={addMemoRelations} disabled={selectedMemos.length === 0}>
               {t("common.add")}
             </Button>
           </div>

web/src/components/MemoEditor/ActionButton/LocationSelector.tsx

@@ -94,7 +94,7 @@ const LocationSelector = (props: Props) => {
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger asChild>
-        <Button className="flex items-center justify-center" size="sm" variant="plain">
+        <Button className="flex items-center justify-center p-0" size="sm" variant="plain">
           <MapPinIcon className="w-5 h-5 mx-auto shrink-0" />
           {props.location && (
             <>

web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx

@@ -63,8 +63,8 @@ const MarkdownMenu = (props: Props) => {
   return (
     <Dropdown>
       <MenuButton slots={{ root: "div" }}>
-        <Button size="sm" variant="plain">
-          <SquareSlashIcon className="w-5 h-5 mx-auto" />
+        <Button variant="plain" className="p-0">
+          <SquareSlashIcon className="w-5 h-5" />
         </Button>
       </MenuButton>
       <Menu className="text-sm" size="sm" placement="bottom-start">

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

@@ -43,8 +43,8 @@ const TagSelector = observer((props: Props) => {
   return (
     <Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
       <MenuButton slots={{ root: "div" }}>
-        <Button size="sm" variant="plain">
-          <HashIcon className="w-5 h-5 mx-auto" />
+        <Button variant="plain" className="p-0">
+          <HashIcon className="w-5 h-5" />
         </Button>
       </MenuButton>
       <Menu className="relative" component="div" size="sm" placement="bottom-start">

web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx

@@ -72,8 +72,8 @@ const UploadResourceButton = (props: Props) => {
   const isUploading = state.uploadingFlag || props.isUploadingResource;
 
   return (
-    <Button className="relative" size="sm" variant="plain" disabled={isUploading}>
-      {isUploading ? <LoaderIcon className="w-5 h-5 mx-auto animate-spin" /> : <PaperclipIcon className="w-5 h-5 mx-auto" />}
+    <Button className="relative p-0" variant="plain" disabled={isUploading}>
+      {isUploading ? <LoaderIcon className="w-5 h-5 animate-spin" /> : <PaperclipIcon className="w-5 h-5" />}
       <input
         className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
         ref={fileInputRef}

web/src/components/MemoEditor/index.tsx

@@ -502,7 +502,7 @@ const MemoEditor = observer((props: Props) => {
         <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
         <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
         <div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}>
-          <div className="flex flex-row justify-start items-center opacity-80 dark:opacity-60 -space-x-1">
+          <div className="flex flex-row justify-start items-center opacity-80 dark:opacity-60 space-x-2">
             <TagSelector editorRef={editorRef} />
             <MarkdownMenu editorRef={editorRef} />
             <UploadResourceButton isUploadingResource={state.isUploadingResource} />

web/src/components/RenameTagDialog.tsx

@@ -50,7 +50,7 @@ const RenameTagDialog: React.FC<Props> = (props: Props) => {
     <div className="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">
       <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{t("tag.rename-tag")}</p>
-        <Button size="sm" variant="plain" onClick={() => destroy()}>
+        <Button variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>

web/src/components/Settings/AccessTokenSection.tsx

@@ -99,7 +99,7 @@ const AccessTokenSection = () => {
                     <tr key={userAccessToken.accessToken}>
                       <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400 flex flex-row justify-start items-center gap-x-1">
                         <span className="font-mono">{getFormatedAccessToken(userAccessToken.accessToken)}</span>
-                        <Button variant="plain" size="sm" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
+                        <Button variant="plain" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
                           <ClipboardIcon className="w-4 h-auto text-gray-400" />
                         </Button>
                       </td>
@@ -115,7 +115,6 @@ const AccessTokenSection = () => {
                       <td className="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm">
                         <Button
                           variant="plain"
-                          size="sm"
                           onClick={() => {
                             handleDeleteAccessToken(userAccessToken.accessToken);
                           }}

web/src/components/Settings/MemoRelatedSettings.tsx

@@ -144,9 +144,8 @@ const MemoRelatedSettings = () => {
             );
           })}
           <Input
-            className="w-32 !rounded-full !pl-3"
+            className="w-32 !rounded-full !pl-1"
             placeholder={t("common.input")}
-            size="sm"
             value={editingReaction}
             onChange={(event) => setEditingReaction(event.target.value.trim())}
             endDecorator={
@@ -185,9 +184,8 @@ const MemoRelatedSettings = () => {
             );
           })}
           <Input
-            className="w-32 !rounded-full !pl-3"
+            className="w-32 !rounded-full !pl-1"
             placeholder={t("common.input")}
-            size="sm"
             value={editingNsfwTag}
             onChange={(event) => setEditingNsfwTag(event.target.value.trim())}
             endDecorator={

web/src/components/Settings/MyAccountSection.tsx

@@ -26,13 +26,13 @@ const MyAccountSection = () => {
         </div>
       </div>
       <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
-        <Button variant="outlined" size="sm" onClick={showUpdateAccountDialog}>
+        <Button variant="outlined" onClick={showUpdateAccountDialog}>
           <PenLineIcon className="w-4 h-4 mx-auto mr-1" />
           {t("common.edit")}
         </Button>
         <Dropdown>
           <MenuButton slots={{ root: "div" }}>
-            <Button variant="outlined" size="sm">
+            <Button variant="outlined">
               <MoreVerticalIcon className="w-4 h-4 mx-auto" />
             </Button>
           </MenuButton>

web/src/components/Settings/WebhookSection.tsx

@@ -85,7 +85,6 @@ const WebhookSection = () => {
                     <td className="relative whitespace-nowrap px-3 py-2 text-right text-sm">
                       <Button
                         variant="plain"
-                        size="sm"
                         onClick={() => {
                           handleDeleteWebhook(webhook);
                         }}

web/src/components/Settings/WorkspaceSection.tsx

-import { Select, Textarea, Option, Divider, Switch } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Select, Option, Divider, Switch } from "@mui/joy";
+import { Button, Textarea } from "@usememos/mui";
 import { isEqual } from "lodash-es";
 import { ExternalLinkIcon } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -80,13 +80,9 @@ const WorkspaceSection = () => {
         <span>{t("setting.system-section.additional-style")}</span>
       </div>
       <Textarea
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        minRows={2}
-        maxRows={4}
+        className="font-mono"
+        rows={3}
+        fullWidth
         placeholder={t("setting.system-section.additional-style-placeholder")}
         value={workspaceGeneralSetting.additionalStyle}
         onChange={(event) => updatePartialSetting({ additionalStyle: event.target.value })}
@@ -95,14 +91,9 @@ const WorkspaceSection = () => {
         <span>{t("setting.system-section.additional-script")}</span>
       </div>
       <Textarea
-        className="w-full"
-        color="neutral"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        minRows={2}
-        maxRows={4}
+        className="font-mono"
+        rows={3}
+        fullWidth
         placeholder={t("setting.system-section.additional-script-placeholder")}
         value={workspaceGeneralSetting.additionalScript}
         onChange={(event) => updatePartialSetting({ additionalScript: event.target.value })}

web/src/components/UpdateAccountDialog.tsx

-import { Textarea } from "@mui/joy";
-import { Button, Input } from "@usememos/mui";
+import { Button, Input, Textarea } from "@usememos/mui";
 import { isEqual } from "lodash-es";
 import { XIcon } from "lucide-react";
 import { useState } from "react";
@@ -143,7 +142,7 @@ const UpdateAccountDialog = ({ destroy }: Props) => {
     <div className="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">
       <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{t("setting.account-section.update-information")}</p>
-        <Button size="sm" variant="plain" onClick={handleCloseBtnClick}>
+        <Button variant="plain" onClick={handleCloseBtnClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
@@ -191,14 +190,7 @@ const UpdateAccountDialog = ({ destroy }: Props) => {
         </p>
         <Input fullWidth type="email" value={state.email} onChange={handleEmailChanged} />
         <p className="text-sm">{t("common.description")}</p>
-        <Textarea
-          className="w-full"
-          color="neutral"
-          minRows={2}
-          maxRows={4}
-          value={state.description}
-          onChange={handleDescriptionChanged}
-        />
+        <Textarea rows={2} fullWidth value={state.description} onChange={handleDescriptionChanged} />
         <div className="w-full flex flex-row justify-end items-center pt-4 space-x-2">
           <Button variant="plain" onClick={handleCloseBtnClick}>
             {t("common.cancel")}

web/src/components/UpdateCustomizedProfileDialog.tsx

-import Textarea from "@mui/joy/Textarea/Textarea";
-import { Button, Input } from "@usememos/mui";
+import { Button, Input, Textarea } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -100,7 +99,7 @@ const UpdateCustomizedProfileDialog = ({ destroy }: Props) => {
     <div className="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">
       <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{t("setting.system-section.customize-server.title")}</p>
-        <Button size="sm" variant="plain" onClick={handleCloseButtonClick}>
+        <Button variant="plain" onClick={handleCloseButtonClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
@@ -110,7 +109,7 @@ const UpdateCustomizedProfileDialog = ({ destroy }: Props) => {
         <p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.icon-url")}</p>
         <Input className="w-full" type="text" value={customProfile.logoUrl} onChange={handleLogoUrlChanged} />
         <p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.description")}</p>
-        <Textarea className="w-full" minRows="2" maxRows="4" value={customProfile.description} onChange={handleDescriptionChanged} />
+        <Textarea rows={3} fullWidth value={customProfile.description} onChange={handleDescriptionChanged} />
         <p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.locale")}</p>
         <LocaleSelect className="!w-full" value={customProfile.locale} onChange={handleLocaleSelectChange} />
         <p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.appearance")}</p>

web/src/pages/Resources.tsx

@@ -135,7 +135,7 @@ const Resources = () => {
                               <span className="text-gray-600 dark:text-gray-400">{t("resource.unused-resources")}</span>
                               <span className="text-gray-500 dark:text-gray-500 opacity-80">({unusedResources.length})</span>
                               <Tooltip title="Delete all" placement="top">
-                                <Button size="sm" variant="plain" onClick={handleDeleteUnusedResources}>
+                                <Button variant="plain" onClick={handleDeleteUnusedResources}>
                                   <TrashIcon className="w-4 h-auto opacity-60" />
                                 </Button>
                               </Tooltip>