chore: tweak dialog close button

This commit is contained in:
Steven 2024-01-13 15:33:23 +08:00
parent ab1fa44f00
commit 4a407668bc
19 changed files with 91 additions and 106 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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