chore: tweak dialog close button

web/src/components/ChangeMemberPasswordDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </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">
+        <div className="flex flex-row justify-end items-center mt-4 w-full gap-x-2">
-          <span className="btn-text" onClick={handleCloseBtnClick}>
+          <Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
             {t("common.cancel")}
-          </span>
+          </Button>
-          <span className="btn-primary" onClick={handleSaveBtnClick}>
+          <Button color="primary" onClick={handleSaveBtnClick}>
             {t("common.save")}
-          </span>
+          </Button>
         </div>
       </div>
     </>

web/src/components/ChangeMemoCreatedTsDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="flex flex-col justify-start items-start !w-72 max-w-full">
-        <input
+        <Input
-          className="input-text mt-2"
+          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">

web/src/components/ChangePasswordDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container">
         <p className="text-sm mb-1">{t("auth.new-password")}</p>

web/src/components/CreateAccessTokenDialog.tsx

@@ -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()}>
+        <IconButton size="sm" onClick={() => destroy()}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container !w-80">
         <div className="w-full flex flex-col justify-start items-start mb-3">

web/src/components/CreateIdentityProviderDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container min-w-[19rem]">
         {isCreating && (

web/src/components/CreateMemoRelationDialog.tsx

@@ -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()}>
+        <IconButton size="sm" onClick={() => destroy()}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container !w-80">
         <Input

web/src/components/CreateResourceDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseDialog}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container !w-80">
         <Typography className="!mb-1" level="body-md">

web/src/components/CreateStorageServiceDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container min-w-[19rem]">
         <Typography className="!mb-1" level="body-md">

web/src/components/CreateTagDialog.tsx

@@ -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()}>
+        <IconButton size="sm" onClick={() => destroy()}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container !w-80">
         <Input

web/src/components/CreateWebhookDialog.tsx

@@ -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()}>
+        <IconButton size="sm" onClick={() => destroy()}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container !w-80">
         <div className="w-full flex flex-col justify-start items-start mb-3">

web/src/components/Dialog/CommonDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container">
         <p className="content-text">{content}</p>

web/src/components/DisablePasswordLoginDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </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>

web/src/components/MemoEditor/MemoEditorDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="flex flex-col justify-start items-start max-w-full w-[36rem]">
         <MemoEditorV1

web/src/components/PreviewMarkdownDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </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>
     </>
   );

web/src/components/ShareMemoDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X className="icon-img" />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </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">

web/src/components/UpdateAccountDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </IconButton>
       </div>
       <div className="dialog-content-container space-y-2">
         <div className="w-full flex flex-row justify-start items-center">

web/src/components/UpdateCustomizedProfileDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseButtonClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </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>

web/src/components/UpdateLocalStorageDialog.tsx

@@ -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}>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X />
+          <Icon.X className="w-5 h-auto" />
-        </button>
+        </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>

web/src/css/tailwind.css

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