8 files changed, 57 insertions, 35 deletions
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 2599f2f5..cec81530 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -282,25 +282,29 @@ export default function SettingPage() {
         open={dialog === "change-password"}
         close={() => setDialog(null)}
       />
-      <ConfirmDialog
-        title="settings.dialogConfirmLogout.title"
-        body="settings.dialogConfirmLogout.prompt"
-        onClose={() => setDialog(null)}
-        open={dialog === "logout"}
-        onConfirm={() => {
-          void userService.logout().then(() => {
-            navigate("/");
-          });
-        }}
-      />
-      <ChangeAvatarDialog
-        open={dialog === "change-avatar"}
-        close={() => setDialog(null)}
-      />
-      <ChangeNicknameDialog
-        open={dialog === "change-nickname"}
-        close={() => setDialog(null)}
-      />
+      {user && (
+        <>
+          <ConfirmDialog
+            title="settings.dialogConfirmLogout.title"
+            body="settings.dialogConfirmLogout.prompt"
+            onClose={() => setDialog(null)}
+            open={dialog === "logout"}
+            onConfirm={() => {
+              void userService.logout().then(() => {
+                navigate("/");
+              });
+            }}
+          />
+          <ChangeAvatarDialog
+            open={dialog === "change-avatar"}
+            close={() => setDialog(null)}
+          />
+          <ChangeNicknameDialog
+            open={dialog === "change-nickname"}
+            close={() => setDialog(null)}
+          />
+        </>
+      )}
     </Page>
   );
 }
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index fe619f9d..14b019b9 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -56,7 +56,7 @@
   border-color: var(--cru-key-2-color);
 }
 
-.cru-button.outline:disabled {
+.cru-button.outline:not(.cru-loading-button):disabled {
   color: var(--cru-surface-on-color);
   border-color: var(--cru-surface-on-color);
   background-color: white;
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
new file mode 100644
index 00000000..8d929383
--- /dev/null
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -0,0 +1,14 @@
+.cru-loading-button {
+  display: flex;
+  align-items: center;
+}
+
+.cru-loading-button:disabled {
+  color: var(--cru-key-2-color);
+  border-color: var(--cru-key-2-color);
+  cursor: auto;
+}
+
+.cru-loading-button-spinner {
+  margin-left: 0.5em;
+}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 249f3e1d..f23369de 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -1,19 +1,19 @@
-import * as React from "react";
 import classNames from "classnames";
-import { useTranslation } from "react-i18next";
 
-import { I18nText, ThemeColor, convertI18nText } from "../common";
+import { I18nText, ThemeColor, useC } from "../common";
 
 import Spinner from "../Spinner";
 
+import "./LoadingButton.css";
+
 interface LoadingButtonProps extends React.ComponentPropsWithoutRef<"button"> {
   color?: ThemeColor;
   text?: I18nText;
   loading?: boolean;
 }
 
-function LoadingButton(props: LoadingButtonProps): JSX.Element {
-  const { t } = useTranslation();
+export default function LoadingButton(props: LoadingButtonProps) {
+  const c = useC();
 
   const { color, text, loading, className, children, ...otherProps } = props;
 
@@ -23,17 +23,15 @@ function LoadingButton(props: LoadingButtonProps): JSX.Element {
 
   return (
     <button
+      disabled={loading}
       className={classNames(
-        "cru-" + (color ?? "primary"),
-        "cru-button outline",
+        `cru-${color ?? "primary"} cru-button outline cru-loading-button`,
         className,
       )}
       {...otherProps}
     >
-      {text != null ? convertI18nText(text, t) : children}
-      {loading && <Spinner />}
+      {text != null ? c(text) : children}
+      {loading && <Spinner className="cru-loading-button-spinner" />}
     </button>
   );
 }
-
-export default LoadingButton;
diff --git a/FrontEnd/src/views/common/dialog/Dialog.css b/FrontEnd/src/views/common/dialog/Dialog.css
index 8f12614b..0123a29d 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.css
+++ b/FrontEnd/src/views/common/dialog/Dialog.css
@@ -6,6 +6,7 @@
   right: 0;
   bottom: 0;
   display: flex;
+  align-items: center;
   overflow: auto;
 }
 
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx
index 9ce344dc..2ff7bea8 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useRef } from "react";
 import ReactDOM from "react-dom";
 import { CSSTransition } from "react-transition-group";
 import classNames from "classnames";
@@ -30,15 +30,21 @@ export default function Dialog({
 }: DialogProps) {
   color = color ?? "primary";
 
+  const nodeRef = useRef(null);
+
   return ReactDOM.createPortal(
     <CSSTransition
+      nodeRef={nodeRef}
       mountOnEnter
       unmountOnExit
       in={open}
       timeout={300}
       classNames="cru-dialog"
     >
-      <div className={classNames("cru-dialog-overlay", `cru-${color}`)}>
+      <div
+        ref={nodeRef}
+        className={classNames("cru-dialog-overlay", `cru-${color}`)}
+      >
         <div
           className="cru-dialog-background"
           onClick={
diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.tsx b/FrontEnd/src/views/common/dialog/OperationDialog.tsx
index 8aab45d9..be3f7158 100644
--- a/FrontEnd/src/views/common/dialog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dialog/OperationDialog.tsx
@@ -148,7 +148,6 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
           <LoadingButton
             color={color}
             loading={isProcessing}
-            disabled={hasError}
             onClick={onConfirm}
           >
             {c("operationDialog.confirm")}
diff --git a/FrontEnd/src/views/common/input/InputGroup.tsx b/FrontEnd/src/views/common/input/InputGroup.tsx
index eed8266b..858fa1a5 100644
--- a/FrontEnd/src/views/common/input/InputGroup.tsx
+++ b/FrontEnd/src/views/common/input/InputGroup.tsx
@@ -294,7 +294,7 @@ export function useInputs(options: { init: Initializer }): {
         },
       });
 
-      if (Object.keys(newErrors).length === 0) {
+      if (Object.keys(newErrors).length !== 0) {
         return {
           type: "error",
           errors: newErrors,