happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: unify form styles

This commit is contained in:
Steven 2025-05-15 22:15:01 +08:00
parent f9e07a2245
commit 606924b4c9
23 changed files with 50 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/package.json
View File

@ -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",
@ -83,4 +83,4 @@
"esbuild"
]
}
}
}

14
web/pnpm-lock.yaml
View File

@ -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)

2
web/src/components/ChangeMemberPasswordDialog.tsx
View File

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

2
web/src/components/CreateAccessTokenDialog.tsx
View File

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

2
web/src/components/CreateIdentityProviderDialog.tsx
View File

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

11
web/src/components/CreateShortcutDialog.tsx
View File

@ -1,5 +1,4 @@
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}

2
web/src/components/CreateUserDialog.tsx
View File

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

2
web/src/components/CreateWebhookDialog.tsx
View File

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

6
web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
View File

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

2
web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
View File

@ -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 && (
<>

4
web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
View File

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

4
web/src/components/MemoEditor/ActionButton/TagSelector.tsx
View File

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

4
web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
View File

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

2
web/src/components/MemoEditor/index.tsx
View File

@ -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} />

2
web/src/components/RenameTagDialog.tsx
View File

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

3
web/src/components/Settings/AccessTokenSection.tsx
View File

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

6
web/src/components/Settings/MemoRelatedSettings.tsx
View File

@ -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={

4
web/src/components/Settings/MyAccountSection.tsx
View File

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

1
web/src/components/Settings/WebhookSection.tsx
View File

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

25
web/src/components/Settings/WorkspaceSection.tsx
View File

@ -1,5 +1,5 @@
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 })}

14
web/src/components/UpdateAccountDialog.tsx
View File

@ -1,5 +1,4 @@
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")}

7
web/src/components/UpdateCustomizedProfileDialog.tsx
View File

@ -1,5 +1,4 @@
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>

2
web/src/pages/Resources.tsx
View File

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