mirror of
https://github.com/usememos/memos.git
synced 2025-01-31 17:48:12 +08:00
chore: tweak dialog close button
This commit is contained in:
parent
ab1fa44f00
commit
4a407668bc
19 changed files with 91 additions and 106 deletions
|
@ -1,3 +1,4 @@
|
|||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useUserStore } from "@/store/v1";
|
||||
|
@ -69,34 +70,34 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
|
|||
<p className="title-text">
|
||||
{t("setting.account-section.change-password")} ({user.nickname})
|
||||
</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<p className="text-sm mb-1">{t("auth.new-password")}</p>
|
||||
<input
|
||||
<Input
|
||||
className="w-full"
|
||||
type="password"
|
||||
className="input-text"
|
||||
placeholder={t("auth.new-password")}
|
||||
value={newPassword}
|
||||
onChange={handleNewPasswordChanged}
|
||||
/>
|
||||
<p className="text-sm mb-1 mt-2">{t("auth.repeat-new-password")}</p>
|
||||
<input
|
||||
<Input
|
||||
className="w-full"
|
||||
type="password"
|
||||
className="input-text"
|
||||
placeholder={t("auth.repeat-new-password")}
|
||||
value={newPasswordAgain}
|
||||
onChange={handleNewPasswordAgainChanged}
|
||||
/>
|
||||
<div className="mt-4 w-full flex flex-row justify-end items-center space-x-2">
|
||||
<span className="btn-text" onClick={handleCloseBtnClick}>
|
||||
<div className="flex flex-row justify-end items-center mt-4 w-full gap-x-2">
|
||||
<Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
|
||||
{t("common.cancel")}
|
||||
</span>
|
||||
<span className="btn-primary" onClick={handleSaveBtnClick}>
|
||||
</Button>
|
||||
<Button color="primary" onClick={handleSaveBtnClick}>
|
||||
{t("common.save")}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { getNormalizedTimeString, getUnixTime } from "@/helpers/datetime";
|
||||
|
@ -66,16 +66,20 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{t("message.change-memo-created-time")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start !w-72 max-w-full">
|
||||
<input
|
||||
className="input-text mt-2"
|
||||
<Input
|
||||
className="w-full"
|
||||
type="datetime-local"
|
||||
value={createdAt}
|
||||
max={maxDatetimeValue}
|
||||
slotProps={{
|
||||
input: {
|
||||
max: maxDatetimeValue,
|
||||
},
|
||||
}}
|
||||
onChange={handleDatetimeInputChange}
|
||||
/>
|
||||
<div className="flex flex-row justify-end items-center mt-4 w-full gap-x-2">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
|
@ -70,9 +70,9 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container !w-64">
|
||||
<p className="title-text">{t("setting.account-section.change-password")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<p className="text-sm mb-1">{t("auth.new-password")}</p>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input, Radio, RadioGroup } from "@mui/joy";
|
||||
import { Button, IconButton, Input, Radio, RadioGroup } from "@mui/joy";
|
||||
import React, { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { userServiceClient } from "@/grpcweb";
|
||||
|
@ -86,9 +86,9 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">Create access token</p>
|
||||
<button className="btn close-btn" onClick={() => destroy()}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={() => destroy()}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container !w-80">
|
||||
<div className="w-full flex flex-col justify-start items-start mb-3">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Divider, Input, Option, Select, Typography } from "@mui/joy";
|
||||
import { Button, Divider, IconButton, Input, Option, Select, Typography } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import * as api from "@/helpers/api";
|
||||
|
@ -237,9 +237,9 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text ml-auto">{t(isCreating ? "setting.sso-section.create-sso" : "setting.sso-section.update-sso")}</p>
|
||||
<button className="btn close-btn ml-auto" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container min-w-[19rem]">
|
||||
{isCreating && (
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import { isNaN, unionBy } from "lodash-es";
|
||||
import React, { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
@ -76,9 +76,9 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{"Add references"}</p>
|
||||
<button className="btn close-btn" onClick={() => destroy()}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={() => destroy()}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container !w-80">
|
||||
<Input
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Autocomplete, Button, Input, List, ListItem, Option, Select, Typography } from "@mui/joy";
|
||||
import { Autocomplete, Button, IconButton, Input, List, ListItem, Option, Select, Typography } from "@mui/joy";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { Resource } from "@/types/proto/api/v2/resource_service";
|
||||
|
@ -180,9 +180,9 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{t("resource.create-dialog.title")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseDialog}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseDialog}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container !w-80">
|
||||
<Typography className="!mb-1" level="body-md">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input, Typography } from "@mui/joy";
|
||||
import { Button, IconButton, Input, Typography } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import * as api from "@/helpers/api";
|
||||
|
@ -109,9 +109,9 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
|
|||
<span className="title-text ml-auto">
|
||||
{t(isCreating ? "setting.storage-section.create-storage" : "setting.storage-section.update-storage")}
|
||||
</span>
|
||||
<button className="btn close-btn ml-auto" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container min-w-[19rem]">
|
||||
<Typography className="!mb-1" level="body-md">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { tagServiceClient } from "@/grpcweb";
|
||||
|
@ -91,9 +91,9 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{t("tag-list.create-tag")}</p>
|
||||
<button className="btn close-btn" onClick={() => destroy()}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={() => destroy()}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container !w-80">
|
||||
<Input
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { webhookServiceClient } from "@/grpcweb";
|
||||
|
@ -100,9 +100,9 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{isCreating ? "Create webhook" : "Edit webhook"}</p>
|
||||
<button className="btn close-btn" onClick={() => destroy()}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={() => destroy()}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container !w-80">
|
||||
<div className="w-full flex flex-col justify-start items-start mb-3">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button } from "@mui/joy";
|
||||
import { Button, IconButton } from "@mui/joy";
|
||||
import { DefaultColorPalette } from "@mui/joy/styles/types";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import Icon from "../Icon";
|
||||
|
@ -48,9 +48,9 @@ const CommonDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{title}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<p className="content-text">{content}</p>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import * as api from "@/helpers/api";
|
||||
|
@ -59,15 +59,15 @@ const DisablePasswordLoginDialog: React.FC<Props> = ({ destroy }: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container !w-64">
|
||||
<p className="title-text">{t("setting.system-section.disable-password-login")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container !w-64">
|
||||
{confirmedOnce ? (
|
||||
<>
|
||||
<p className="content-text">{t("setting.system-section.disable-password-login-final-warning")}</p>
|
||||
<input type="text" className="input-text" value={typingConfirmation} onChange={handleTypingConfirmationChanged} />
|
||||
<Input value={typingConfirmation} onChange={handleTypingConfirmationChanged} />
|
||||
</>
|
||||
) : (
|
||||
<p className="content-text">{t("setting.system-section.disable-password-login-warning")}</p>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { IconButton } from "@mui/joy";
|
||||
import { useEffect } from "react";
|
||||
import { useGlobalStore, useTagStore } from "@/store/module";
|
||||
import { MemoRelation } from "@/types/proto/api/v2/memo_relation_service";
|
||||
|
@ -30,9 +31,9 @@ const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Pr
|
|||
<img className="w-5 h-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
|
||||
<p className="ml-1 text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
|
||||
</div>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start max-w-full w-[36rem]">
|
||||
<MemoEditorV1
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { IconButton } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { markdownServiceClient } from "@/grpcweb";
|
||||
import { Node } from "@/types/proto/api/v2/markdown_service";
|
||||
|
@ -31,12 +32,12 @@ const PreviewMarkdownDialog: React.FC<Props> = ({ content, destroy }: Props) =>
|
|||
<div className="flex flex-row justify-start items-center">
|
||||
<p className="text-black opacity-80 dark:text-gray-200">Preview</p>
|
||||
</div>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start max-w-full w-[32rem]">
|
||||
<MemoContent nodes={nodes} />
|
||||
{content !== "" ? <MemoContent nodes={nodes} /> : <p className="text-gray-400 dark:text-gray-600">Nothing to preview</p>}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button } from "@mui/joy";
|
||||
import { Button, IconButton } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
@ -82,9 +82,9 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container py-3 px-4 !mb-0 rounded-t-lg">
|
||||
<p className="">{t("common.share")} Memo</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="icon-img" />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container w-full flex flex-col justify-start items-start relative">
|
||||
<div className="px-4 pb-3 w-full flex flex-row justify-start items-center space-x-2">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import { isEqual } from "lodash-es";
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
@ -127,9 +127,9 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container !w-64">
|
||||
<p className="title-text">{t("setting.account-section.update-information")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container space-y-2">
|
||||
<div className="w-full flex flex-row justify-start items-center">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import Textarea from "@mui/joy/Textarea/Textarea";
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
@ -95,9 +95,9 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{t("setting.system-section.customize-server.title")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseButtonClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseButtonClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container min-w-[16rem]">
|
||||
<p className="text-sm mb-1">
|
||||
|
@ -108,7 +108,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ 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={state.logoUrl} onChange={handleLogoUrlChanged} />
|
||||
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.description")}</p>
|
||||
<Textarea minRows="2" maxRows="4" className="!input-text" value={state.description} onChange={handleDescriptionChanged} />
|
||||
<Textarea className="w-full" minRows="2" maxRows="4" value={state.description} onChange={handleDescriptionChanged} />
|
||||
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.locale")}</p>
|
||||
<LocaleSelect className="!w-full" value={state.locale} onChange={handleLocaleSelectChange} />
|
||||
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.appearance")}</p>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Input } from "@mui/joy";
|
||||
import { Button, IconButton, Input } from "@mui/joy";
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import * as api from "@/helpers/api";
|
||||
|
@ -53,9 +53,9 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{t("setting.storage-section.update-local-path")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="dialog-content-container max-w-xs">
|
||||
<p className="text-sm break-words mb-1">{t("setting.storage-section.update-local-path-description")}</p>
|
||||
|
|
|
@ -18,25 +18,3 @@
|
|||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-normal {
|
||||
@apply select-none flex flex-row justify-center items-center border dark:border-zinc-800 cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn-normal border-transparent bg-green-600 text-white dark:border-transparent dark:text-gray-200;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply btn-normal border-red-600 bg-red-50 text-red-600;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
@apply btn-normal text-gray-600 border-none dark:text-gray-200 hover:shadow-none;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
@apply w-full px-3 py-2 leading-6 text-sm dark:text-gray-200 rounded border focus:outline focus:outline-2 dark:border-zinc-700 dark:bg-zinc-800;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue