From f5dfd52f6efece2f4cad227044ecf4dd66301bbc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Aug 2023 21:36:58 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/Dialog.css | 60 +++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 FrontEnd/src/components/dialog/Dialog.css

(limited to 'FrontEnd/src/components/dialog/Dialog.css')

diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
new file mode 100644
index 00000000..e4c61440
--- /dev/null
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -0,0 +1,60 @@
+.cru-dialog-overlay {
+  position: fixed;
+  z-index: 1040;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  overflow: auto;
+}
+
+.cru-dialog-background {
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: var(--cru-surface-dim-color);
+  opacity: 0.8;
+}
+
+.cru-dialog-container {
+  max-width: 100%;
+  min-width: 30vw;
+
+  margin: 2em auto;
+
+  border: var(--cru-key-container-color) 1px solid;
+  border-radius: 5px;
+  padding: 1.5em;
+  background-color: var(--cru-surface-color);
+}
+
+@media (min-width: 576px) {
+  .cru-dialog-container {
+    max-width: 800px;
+  }
+}
+
+.cru-dialog-enter .cru-dialog-container {
+  transform: scale(0, 0);
+  opacity: 0;
+  transform-origin: center;
+}
+
+.cru-dialog-enter-active .cru-dialog-container {
+  transform: scale(1, 1);
+  opacity: 1;
+  transition: transform 0.3s, opacity 0.3s;
+  transform-origin: center;
+}
+
+.cru-dialog-exit-active .cru-dialog-container {
+  transition: transform 0.3s, opacity 0.3s;
+  transform: scale(0, 0);
+  opacity: 0;
+  transform-origin: center;
+}
\ No newline at end of file
-- 
cgit v1.2.3


From d65dcebc3ed64c96c70f0ee7f228b4dfe79b28a1 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 29 Aug 2023 20:41:34 +0800
Subject: ...

---
 FrontEnd/src/components/common.ts                  |   2 +
 FrontEnd/src/components/dialog/Dialog.css          |   4 +-
 FrontEnd/src/components/dialog/Dialog.tsx          |  39 ++---
 FrontEnd/src/components/theme-color.css            | 173 ---------------------
 FrontEnd/src/components/theme.css                  | 100 ++++++------
 FrontEnd/src/index.css                             |   3 -
 .../src/pages/setting/ChangeNicknameDialog.tsx     |   2 +-
 FrontEnd/src/pages/setting/index.tsx               |   4 +-
 FrontEnd/src/utilities/index.ts                    |  10 ++
 9 files changed, 88 insertions(+), 249 deletions(-)
 delete mode 100644 FrontEnd/src/components/theme-color.css
 create mode 100644 FrontEnd/src/utilities/index.ts

(limited to 'FrontEnd/src/components/dialog/Dialog.css')

diff --git a/FrontEnd/src/components/common.ts b/FrontEnd/src/components/common.ts
index 171ebc48..835a8b4a 100644
--- a/FrontEnd/src/components/common.ts
+++ b/FrontEnd/src/components/common.ts
@@ -1,3 +1,5 @@
+import "./index.css";
+
 export type { Text, I18nText } from "~src/common";
 export { UiLogicError, c, convertI18nText, useC } from "~src/common";
 
diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index e4c61440..f25309ae 100644
--- a/FrontEnd/src/components/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -17,7 +17,7 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: var(--cru-surface-dim-color);
+  background-color: var(--cru-dialog-overlay-color);
   opacity: 0.8;
 }
 
@@ -27,7 +27,7 @@
 
   margin: 2em auto;
 
-  border: var(--cru-key-container-color) 1px solid;
+  border: var(--cru-dialog-container-background-color) 1px solid;
   border-radius: 5px;
   padding: 1.5em;
   background-color: var(--cru-surface-color);
diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index b1d66704..bdba9198 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -1,6 +1,5 @@
 import { ReactNode, useRef } from "react";
 import ReactDOM from "react-dom";
-import { CSSTransition } from "react-transition-group";
 import classNames from "classnames";
 
 import { ThemeColor } from "../common";
@@ -16,42 +15,34 @@ if (optionalPortalElement == null) {
 const portalElement = optionalPortalElement;
 
 interface DialogProps {
-  color?: ThemeColor;
   children?: ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog({
-  color,
   children,
   disableCloseOnClickOnOverlay,
 }: DialogProps) {
-  color = color ?? "primary";
-
   const closeDialog = useCloseDialog();
 
-  const nodeRef = useRef(null);
+  const lastPointerDownIdRef = useRef<number | null>(null);
 
   return ReactDOM.createPortal(
-    <CSSTransition
-      nodeRef={nodeRef}
-      mountOnEnter
-      unmountOnExit
-      in
-      timeout={300}
-      classNames="cru-dialog"
-    >
+    <div className={classNames("cru-dialog-overlay")}>
       <div
-        ref={nodeRef}
-        className={classNames("cru-dialog-overlay", `cru-${color}`)}
-      >
-        <div
-          className="cru-dialog-background"
-          onClick={disableCloseOnClickOnOverlay ? undefined : closeDialog}
-        />
-        <div className="cru-dialog-container">{children}</div>
-      </div>
-    </CSSTransition>,
+        className="cru-dialog-background"
+        onPointerDown={(e) => {
+          lastPointerDownIdRef.current = e.pointerId;
+        }}
+        onPointerUp={(e) => {
+          if (lastPointerDownIdRef.current === e.pointerId) {
+            if (!disableCloseOnClickOnOverlay) closeDialog();
+          }
+          lastPointerDownIdRef.current = null;
+        }}
+      />
+      <div className="cru-dialog-container">{children}</div>
+    </div>,
     portalElement,
   );
 }
diff --git a/FrontEnd/src/components/theme-color.css b/FrontEnd/src/components/theme-color.css
deleted file mode 100644
index 24a7e267..00000000
--- a/FrontEnd/src/components/theme-color.css
+++ /dev/null
@@ -1,173 +0,0 @@
-/* Generated by theme-generator.ts */
-
-:root {
-  --cru-primary-color: hsl(210 100% 40%);
-  --cru-primary-1-color: hsl(210 100% 37%);
-  --cru-primary-2-color: hsl(210 100% 34%);
-  --cru-primary-on-color: hsl(210 100% 100%);
-  --cru-primary-container-color: hsl(210 100% 90%);
-  --cru-primary-container-1-color: hsl(210 100% 80%);
-  --cru-primary-container-2-color: hsl(210 100% 70%);
-  --cru-primary-on-container-color: hsl(210 100% 10%);
-  --cru-secondary-color: hsl(40 100% 40%);
-  --cru-secondary-1-color: hsl(40 100% 37%);
-  --cru-secondary-2-color: hsl(40 100% 34%);
-  --cru-secondary-on-color: hsl(40 100% 100%);
-  --cru-secondary-container-color: hsl(40 100% 90%);
-  --cru-secondary-container-1-color: hsl(40 100% 80%);
-  --cru-secondary-container-2-color: hsl(40 100% 70%);
-  --cru-secondary-on-container-color: hsl(40 100% 10%);
-  --cru-tertiary-color: hsl(160 100% 40%);
-  --cru-tertiary-1-color: hsl(160 100% 37%);
-  --cru-tertiary-2-color: hsl(160 100% 34%);
-  --cru-tertiary-on-color: hsl(160 100% 100%);
-  --cru-tertiary-container-color: hsl(160 100% 90%);
-  --cru-tertiary-container-1-color: hsl(160 100% 80%);
-  --cru-tertiary-container-2-color: hsl(160 100% 70%);
-  --cru-tertiary-on-container-color: hsl(160 100% 10%);
-  --cru-danger-color: hsl(0 100% 40%);
-  --cru-danger-1-color: hsl(0 100% 37%);
-  --cru-danger-2-color: hsl(0 100% 34%);
-  --cru-danger-on-color: hsl(0 100% 100%);
-  --cru-danger-container-color: hsl(0 100% 90%);
-  --cru-danger-container-1-color: hsl(0 100% 80%);
-  --cru-danger-container-2-color: hsl(0 100% 70%);
-  --cru-danger-on-container-color: hsl(0 100% 10%);
-  --cru-success-color: hsl(120 60% 40%);
-  --cru-success-1-color: hsl(120 60% 37%);
-  --cru-success-2-color: hsl(120 60% 34%);
-  --cru-success-on-color: hsl(120 60% 100%);
-  --cru-success-container-color: hsl(120 60% 90%);
-  --cru-success-container-1-color: hsl(120 60% 80%);
-  --cru-success-container-2-color: hsl(120 60% 70%);
-  --cru-success-on-container-color: hsl(120 60% 10%);
-  --cru-surface-dim-color: hsl(0 0% 87%);
-  --cru-surface-color: hsl(0 0% 98%);
-  --cru-surface-1-color: hsl(0 0% 90%);
-  --cru-surface-2-color: hsl(0 0% 82%);
-  --cru-surface-bright-color: hsl(0 0% 98%);
-  --cru-surface-container-lowest-color: hsl(0 0% 100%);
-  --cru-surface-container-low-color: hsl(0 0% 96%);
-  --cru-surface-container-color: hsl(0 0% 94%);
-  --cru-surface-container-high-color: hsl(0 0% 92%);
-  --cru-surface-container-highest-color: hsl(0 0% 90%);
-  --cru-surface-on-color: hsl(0 0% 10%);
-  --cru-surface-on-variant-color: hsl(0 0% 30%);
-  --cru-surface-outline-color: hsl(0 0% 50%);
-  --cru-surface-outline-variant-color: hsl(0 0% 80%);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --cru-primary-color: hsl(210 100% 80%);
-    --cru-primary-1-color: hsl(210 100% 75%);
-    --cru-primary-2-color: hsl(210 100% 68%);
-    --cru-primary-on-color: hsl(210 100% 20%);
-    --cru-primary-container-color: hsl(210 100% 30%);
-    --cru-primary-container-1-color: hsl(210 100% 25%);
-    --cru-primary-container-2-color: hsl(210 100% 20%);
-    --cru-primary-on-container-color: hsl(210 100% 90%);
-    --cru-secondary-color: hsl(40 100% 80%);
-    --cru-secondary-1-color: hsl(40 100% 75%);
-    --cru-secondary-2-color: hsl(40 100% 68%);
-    --cru-secondary-on-color: hsl(40 100% 20%);
-    --cru-secondary-container-color: hsl(40 100% 30%);
-    --cru-secondary-container-1-color: hsl(40 100% 25%);
-    --cru-secondary-container-2-color: hsl(40 100% 20%);
-    --cru-secondary-on-container-color: hsl(40 100% 90%);
-    --cru-tertiary-color: hsl(160 100% 80%);
-    --cru-tertiary-1-color: hsl(160 100% 75%);
-    --cru-tertiary-2-color: hsl(160 100% 68%);
-    --cru-tertiary-on-color: hsl(160 100% 20%);
-    --cru-tertiary-container-color: hsl(160 100% 30%);
-    --cru-tertiary-container-1-color: hsl(160 100% 25%);
-    --cru-tertiary-container-2-color: hsl(160 100% 20%);
-    --cru-tertiary-on-container-color: hsl(160 100% 90%);
-    --cru-danger-color: hsl(0 100% 80%);
-    --cru-danger-1-color: hsl(0 100% 75%);
-    --cru-danger-2-color: hsl(0 100% 68%);
-    --cru-danger-on-color: hsl(0 100% 20%);
-    --cru-danger-container-color: hsl(0 100% 30%);
-    --cru-danger-container-1-color: hsl(0 100% 25%);
-    --cru-danger-container-2-color: hsl(0 100% 20%);
-    --cru-danger-on-container-color: hsl(0 100% 90%);
-    --cru-success-color: hsl(120 60% 80%);
-    --cru-success-1-color: hsl(120 60% 75%);
-    --cru-success-2-color: hsl(120 60% 68%);
-    --cru-success-on-color: hsl(120 60% 20%);
-    --cru-success-container-color: hsl(120 60% 30%);
-    --cru-success-container-1-color: hsl(120 60% 25%);
-    --cru-success-container-2-color: hsl(120 60% 20%);
-    --cru-success-on-container-color: hsl(120 60% 90%);
-    --cru-surface-dim-color: hsl(0 0% 6%);
-    --cru-surface-color: hsl(0 0% 6%);
-    --cru-surface-1-color: hsl(0 0% 25%);
-    --cru-surface-2-color: hsl(0 0% 40%);
-    --cru-surface-bright-color: hsl(0 0% 24%);
-    --cru-surface-container-lowest-color: hsl(0 0% 4%);
-    --cru-surface-container-low-color: hsl(0 0% 10%);
-    --cru-surface-container-color: hsl(0 0% 12%);
-    --cru-surface-container-high-color: hsl(0 0% 17%);
-    --cru-surface-container-highest-color: hsl(0 0% 22%);
-    --cru-surface-on-color: hsl(0 0% 90%);
-    --cru-surface-on-variant-color: hsl(0 0% 80%);
-    --cru-surface-outline-color: hsl(0 0% 60%);
-    --cru-surface-outline-variant-color: hsl(0 0% 30%);
-  }
-}
-
-.cru-primary {
-  --cru-key-color: var(--cru-primary-color);
-  --cru-key-1-color: var(--cru-primary-1-color);
-  --cru-key-2-color: var(--cru-primary-2-color);
-  --cru-key-on-color: var(--cru-primary-on-color);
-  --cru-key-container-color: var(--cru-primary-container-color);
-  --cru-key-container-1-color: var(--cru-primary-container-1-color);
-  --cru-key-container-2-color: var(--cru-primary-container-2-color);
-  --cru-key-on-container-color: var(--cru-primary-on-container-color);
-}
-
-.cru-secondary {
-  --cru-key-color: var(--cru-secondary-color);
-  --cru-key-1-color: var(--cru-secondary-1-color);
-  --cru-key-2-color: var(--cru-secondary-2-color);
-  --cru-key-on-color: var(--cru-secondary-on-color);
-  --cru-key-container-color: var(--cru-secondary-container-color);
-  --cru-key-container-1-color: var(--cru-secondary-container-1-color);
-  --cru-key-container-2-color: var(--cru-secondary-container-2-color);
-  --cru-key-on-container-color: var(--cru-secondary-on-container-color);
-}
-
-.cru-tertiary {
-  --cru-key-color: var(--cru-tertiary-color);
-  --cru-key-1-color: var(--cru-tertiary-1-color);
-  --cru-key-2-color: var(--cru-tertiary-2-color);
-  --cru-key-on-color: var(--cru-tertiary-on-color);
-  --cru-key-container-color: var(--cru-tertiary-container-color);
-  --cru-key-container-1-color: var(--cru-tertiary-container-1-color);
-  --cru-key-container-2-color: var(--cru-tertiary-container-2-color);
-  --cru-key-on-container-color: var(--cru-tertiary-on-container-color);
-}
-
-.cru-danger {
-  --cru-key-color: var(--cru-danger-color);
-  --cru-key-1-color: var(--cru-danger-1-color);
-  --cru-key-2-color: var(--cru-danger-2-color);
-  --cru-key-on-color: var(--cru-danger-on-color);
-  --cru-key-container-color: var(--cru-danger-container-color);
-  --cru-key-container-1-color: var(--cru-danger-container-1-color);
-  --cru-key-container-2-color: var(--cru-danger-container-2-color);
-  --cru-key-on-container-color: var(--cru-danger-on-container-color);
-}
-
-.cru-success {
-  --cru-key-color: var(--cru-success-color);
-  --cru-key-1-color: var(--cru-success-1-color);
-  --cru-key-2-color: var(--cru-success-2-color);
-  --cru-key-on-color: var(--cru-success-on-color);
-  --cru-key-container-color: var(--cru-success-container-color);
-  --cru-key-container-1-color: var(--cru-success-container-1-color);
-  --cru-key-container-2-color: var(--cru-success-container-2-color);
-  --cru-key-on-container-color: var(--cru-success-on-container-color);
-}
-
diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index 6ceb369f..d7e30d1a 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -1,5 +1,3 @@
-@import "./theme-color.css";
-
 :root {
   --cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --cru-page-padding: 1em 2em;
@@ -10,26 +8,26 @@
 
 /* theme colors */
 :root {
-  --cru-primary-color: hsl(210, 100%, 50%);
-  --cru-secondary-color: hsl(30, 100%, 50%);
-  --cru-create-color: hsl(120, 100%, 25%);
-  --cru-danger-color: hsl(0, 100%, 50%);
+  --cru-primary-color: hsl(210 100% 50%);
+  --cru-secondary-color: hsl(30 100% 50%);
+  --cru-create-color: hsl(120 100% 25%);
+  --cru-danger-color: hsl(0 100% 50%);
 }
 
 /* common colors */
 :root {
-  --cru-background-color: hsl(0, 0%, 100%);
-  --cru-container-background-color: hsl(0, 0%, 97%);
-  --cru-text-primary-color: hsl(0, 0%, 0%);
-  --cru-text-secondary-color: hsl(0, 0%, 38%);
+  --cru-background-color: hsl(0 0% 100%);
+  --cru-container-background-color: hsl(0 0% 97%);
+  --cru-text-primary-color: hsl(0 0% 0%);
+  --cru-text-secondary-color: hsl(0 0% 38%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --cru-background-color: hsl(0, 0%, 0%);
-    --cru-container-background-color: hsl(0, 0%, 2%);
-    --cru-text-primary-color: hsl(0, 0%, 100%);
-    --cru-text-secondary-color: hsl(0, 0%, 85%);
+    --cru-background-color: hsl(0 0% 0%);
+    --cru-container-background-color: hsl(0 0% 2%);
+    --cru-text-primary-color: hsl(0 0% 100%);
+    --cru-text-secondary-color: hsl(0 0% 85%);
   }
 }
 
@@ -37,37 +35,51 @@
   --cru-body-background-color: var(--cru-background-color);
 }
 
+/* dialog color */
+
+:root {
+  --cru-dialog-overlay-color: hsl(0 0% 100%);
+  --cru-dialog-container-background-color: hsl(0 0% 100%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cru-dialog-overlay-color: hsl(0 0% 0%);
+    --cru-dialog-container-background-color: hsl(0 0% 0%);
+  }
+}
+
 /* clickable color */
 :root {
   --cru-clickable-primary-normal-color: var(--cru-primary-color);
-  --cru-clickable-primary-hover-color: hsl(210, 100%, 60%);
-  --cru-clickable-primary-focus-color: hsl(210, 100%, 60%);
-  --cru-clickable-primary-active-color: hsl(210, 100%, 70%);
+  --cru-clickable-primary-hover-color: hsl(210 100% 60%);
+  --cru-clickable-primary-focus-color: hsl(210 100% 60%);
+  --cru-clickable-primary-active-color: hsl(210 100% 70%);
   --cru-clickable-secondary-normal-color: var(--cru-secondary-color);
-  --cru-clickable-secondary-hover-color: hsl(30, 100%, 60%);
-  --cru-clickable-secondary-focus-color: hsl(30, 100%, 60%);
-  --cru-clickable-secondary-active-color: hsl(30, 100%, 70%);
+  --cru-clickable-secondary-hover-color: hsl(30 100% 60%);
+  --cru-clickable-secondary-focus-color: hsl(30 100% 60%);
+  --cru-clickable-secondary-active-color: hsl(30 100% 70%);
   --cru-clickable-create-normal-color: var(--cru-create-color);
-  --cru-clickable-create-hover-color: hsl(120, 100%, 35%);
-  --cru-clickable-create-focus-color: hsl(120, 100%, 35%);
-  --cru-clickable-create-active-color: hsl(120, 100%, 35%);
+  --cru-clickable-create-hover-color: hsl(120 100% 35%);
+  --cru-clickable-create-focus-color: hsl(120 100% 35%);
+  --cru-clickable-create-active-color: hsl(120 100% 35%);
   --cru-clickable-danger-normal-color: var(--cru-danger-color);
-  --cru-clickable-danger-hover-color: hsl(0, 100%, 60%);
-  --cru-clickable-danger-focus-color: hsl(0, 100%, 60%);
-  --cru-clickable-danger-active-color: hsl(0, 100%, 70%);
-  --cru-clickable-grayscale-normal-color: hsl(0, 0%, 100%);
-  --cru-clickable-grayscale-hover-color: hsl(0, 0%, 92%);
-  --cru-clickable-grayscale-focus-color: hsl(0, 0%, 92%);
-  --cru-clickable-grayscale-active-color: hsl(0, 0%, 88%);
-  --cru-clickable-disabled-color: hsl(0, 0%, 50%);
+  --cru-clickable-danger-hover-color: hsl(0 100% 60%);
+  --cru-clickable-danger-focus-color: hsl(0 100% 60%);
+  --cru-clickable-danger-active-color: hsl(0 100% 70%);
+  --cru-clickable-grayscale-normal-color: hsl(0 0% 100%);
+  --cru-clickable-grayscale-hover-color: hsl(0 0% 92%);
+  --cru-clickable-grayscale-focus-color: hsl(0 0% 92%);
+  --cru-clickable-grayscale-active-color: hsl(0 0% 88%);
+  --cru-clickable-disabled-color: hsl(0 0% 50%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --cru-clickable-grayscale-normal-color: hsl(0, 0%, 0%);
-    --cru-clickable-grayscale-hover-color: hsl(0, 0%, 10%);
-    --cru-clickable-grayscale-focus-color: hsl(0, 0%, 10%);
-    --cru-clickable-grayscale-active-color: hsl(0, 0%, 20%);
+    --cru-clickable-grayscale-normal-color: hsl(0 0% 0%);
+    --cru-clickable-grayscale-hover-color: hsl(0 0% 10%);
+    --cru-clickable-grayscale-focus-color: hsl(0 0% 10%);
+    --cru-clickable-grayscale-active-color: hsl(0 0% 20%);
   }
 }
 
@@ -110,19 +122,19 @@
 :root {
   /* push button colors */
   --cru-push-button-text-color: #ffffff;
-  --cru-push-button-disabled-text-color: hsl(0, 0%, 80%);
+  --cru-push-button-disabled-text-color: hsl(0 0% 80%);
 }
 
 /* Card colors */
 :root {
-  --cru-card-background-primary-color: hsl(210, 100%, 50%);
-  --cru-card-border-primary-color: hsl(210, 100%, 50%);
-  --cru-card-background-secondary-color: hsl(30, 100%, 50%);
-  --cru-card-border-secondary-color: hsl(30, 100%, 50%);
-  --cru-card-background-create-color: hsl(120, 100%, 25%);
-  --cru-card-border-create-color: hsl(120, 100%, 25%);
-  --cru-card-background-danger-color: hsl(0, 100%, 50%);
-  --cru-card-border-danger-color: hsl(0, 100%, 50%);
+  --cru-card-background-primary-color: hsl(210 100% 50%);
+  --cru-card-border-primary-color: hsl(210 100% 50%);
+  --cru-card-background-secondary-color: hsl(30 100% 50%);
+  --cru-card-border-secondary-color: hsl(30 100% 50%);
+  --cru-card-background-create-color: hsl(120 100% 25%);
+  --cru-card-border-create-color: hsl(120 100% 25%);
+  --cru-card-background-danger-color: hsl(0 100% 50%);
+  --cru-card-border-danger-color: hsl(0 100% 50%);
 }
 
 .cru-card-primary {
diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
index ee92520b..f779297b 100644
--- a/FrontEnd/src/index.css
+++ b/FrontEnd/src/index.css
@@ -1,8 +1,5 @@
 @import "npm:bootstrap-icons/font/bootstrap-icons.css";
 
-@import "./views/common/index.css";
-
-
 small {
   line-height: 1.2;
 }
diff --git a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
index bd1eaa51..912f554f 100644
--- a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
@@ -1,7 +1,7 @@
 import { getHttpUserClient } from "~src/http/user";
 import { useUserLoggedIn } from "~src/services/user";
 
-import OperationDialog from "~src/components/dialog/OperationDialog";
+import { OperationDialog } from "~src/components/dialog";
 
 export default function ChangeNicknameDialog() {
   const user = useUserLoggedIn();
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 4d2c28c7..d2333134 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -245,9 +245,9 @@ export default function SettingPage() {
   const navigate = useNavigate();
 
   const { controller, createDialogSwitch } = useDialog({
-    "change-password": <ChangeNicknameDialog />,
+    "change-nickname": <ChangeNicknameDialog />,
     "change-avatar": <ChangeAvatarDialog />,
-    "change-nickname": <ChangePasswordDialog />,
+    "change-password": <ChangePasswordDialog />,
     logout: (
       <ConfirmDialog
         title="settings.dialogConfirmLogout.title"
diff --git a/FrontEnd/src/utilities/index.ts b/FrontEnd/src/utilities/index.ts
new file mode 100644
index 00000000..085f8ae3
--- /dev/null
+++ b/FrontEnd/src/utilities/index.ts
@@ -0,0 +1,10 @@
+export { default as base64 } from "./base64";
+export { withQuery } from "./url";
+
+export function delay(milliseconds: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, milliseconds);
+  });
+}
-- 
cgit v1.2.3


From 5c624ecb5c7e33039d9f14dbce099e4874efb23b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Aug 2023 00:34:47 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/ConfirmDialog.tsx   |  5 ++---
 FrontEnd/src/components/dialog/Dialog.css          | 24 ++--------------------
 FrontEnd/src/components/dialog/Dialog.tsx          |  9 +++++++-
 FrontEnd/src/components/dialog/DialogContainer.css |  3 +--
 FrontEnd/src/components/dialog/DialogContainer.tsx |  2 +-
 FrontEnd/src/components/dialog/OperationDialog.css |  4 ----
 FrontEnd/src/components/dialog/OperationDialog.tsx |  2 +-
 FrontEnd/src/components/theme.css                  | 16 +++++++++++++++
 8 files changed, 31 insertions(+), 34 deletions(-)

(limited to 'FrontEnd/src/components/dialog/Dialog.css')

diff --git a/FrontEnd/src/components/dialog/ConfirmDialog.tsx b/FrontEnd/src/components/dialog/ConfirmDialog.tsx
index a7b3917f..97cad452 100644
--- a/FrontEnd/src/components/dialog/ConfirmDialog.tsx
+++ b/FrontEnd/src/components/dialog/ConfirmDialog.tsx
@@ -9,7 +9,6 @@ export default function ConfirmDialog({
   title,
   body,
   color,
-  bodyColor,
 }: {
   onConfirm: () => void;
   title: Text;
@@ -22,7 +21,7 @@ export default function ConfirmDialog({
   const closeDialog = useCloseDialog();
 
   return (
-    <Dialog>
+    <Dialog color={color ?? "danger"}>
       <DialogContainer
         title={title}
         titleColor={color ?? "danger"}
@@ -51,7 +50,7 @@ export default function ConfirmDialog({
           },
         ]}
       >
-        <div className={`cru-${bodyColor ?? "primary"}`}>{c(body)}</div>
+        <div>{c(body)}</div>
       </DialogContainer>
     </Dialog>
   );
diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index f25309ae..e4f52a92 100644
--- a/FrontEnd/src/components/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -27,34 +27,14 @@
 
   margin: 2em auto;
 
-  border: var(--cru-dialog-container-background-color) 1px solid;
+  border: var(--cru-theme-color) 2px solid;
   border-radius: 5px;
   padding: 1.5em;
-  background-color: var(--cru-surface-color);
+  background-color: var(--cru-dialog-container-background-color);
 }
 
 @media (min-width: 576px) {
   .cru-dialog-container {
     max-width: 800px;
   }
-}
-
-.cru-dialog-enter .cru-dialog-container {
-  transform: scale(0, 0);
-  opacity: 0;
-  transform-origin: center;
-}
-
-.cru-dialog-enter-active .cru-dialog-container {
-  transform: scale(1, 1);
-  opacity: 1;
-  transition: transform 0.3s, opacity 0.3s;
-  transform-origin: center;
-}
-
-.cru-dialog-exit-active .cru-dialog-container {
-  transition: transform 0.3s, opacity 0.3s;
-  transform: scale(0, 0);
-  opacity: 0;
-  transform-origin: center;
 }
\ No newline at end of file
diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index bdba9198..85e8ca46 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -15,11 +15,13 @@ if (optionalPortalElement == null) {
 const portalElement = optionalPortalElement;
 
 interface DialogProps {
+  color?: ThemeColor;
   children?: ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog({
+  color,
   children,
   disableCloseOnClickOnOverlay,
 }: DialogProps) {
@@ -28,7 +30,12 @@ export default function Dialog({
   const lastPointerDownIdRef = useRef<number | null>(null);
 
   return ReactDOM.createPortal(
-    <div className={classNames("cru-dialog-overlay")}>
+    <div
+      className={classNames(
+        `cru-theme-${color ?? "primary"}`,
+        "cru-dialog-overlay",
+      )}
+    >
       <div
         className="cru-dialog-background"
         onPointerDown={(e) => {
diff --git a/FrontEnd/src/components/dialog/DialogContainer.css b/FrontEnd/src/components/dialog/DialogContainer.css
index fbb18e0d..b3c52511 100644
--- a/FrontEnd/src/components/dialog/DialogContainer.css
+++ b/FrontEnd/src/components/dialog/DialogContainer.css
@@ -1,11 +1,10 @@
 .cru-dialog-container-title {
   font-size: 1.2em;
   font-weight: bold;
-  color: var(--cru-key-color);
+  color: var(--cru-theme-color);
   margin-bottom: 0.5em;
 }
 
-
 .cru-dialog-container-hr {
   margin: 1em 0;
 }
diff --git a/FrontEnd/src/components/dialog/DialogContainer.tsx b/FrontEnd/src/components/dialog/DialogContainer.tsx
index afee2669..6ee4e134 100644
--- a/FrontEnd/src/components/dialog/DialogContainer.tsx
+++ b/FrontEnd/src/components/dialog/DialogContainer.tsx
@@ -52,7 +52,7 @@ export default function DialogContainer(props: DialogContainerProps) {
       <div
         ref={titleRef}
         className={classNames(
-          `cru-dialog-container-title cru-${titleColor ?? "primary"}`,
+          `cru-dialog-container-title cru-theme-${titleColor ?? "primary"}`,
           titleClassName,
         )}
       >
diff --git a/FrontEnd/src/components/dialog/OperationDialog.css b/FrontEnd/src/components/dialog/OperationDialog.css
index f4b7237e..28f73c9d 100644
--- a/FrontEnd/src/components/dialog/OperationDialog.css
+++ b/FrontEnd/src/components/dialog/OperationDialog.css
@@ -1,7 +1,3 @@
-.cru-operation-dialog-prompt {
-  color: var(--cru-surface-on-color);
-}
-
 .cru-operation-dialog-input-group {
   display: block;
   margin: 0.5em 0;
diff --git a/FrontEnd/src/components/dialog/OperationDialog.tsx b/FrontEnd/src/components/dialog/OperationDialog.tsx
index 902d60c6..4b4ceb36 100644
--- a/FrontEnd/src/components/dialog/OperationDialog.tsx
+++ b/FrontEnd/src/components/dialog/OperationDialog.tsx
@@ -217,7 +217,7 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
   }
 
   return (
-    <Dialog>
+    <Dialog color={color}>
       <DialogContainer title={title} titleColor={color} buttons={buttons}>
         {body}
       </DialogContainer>
diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index d7e30d1a..67340b6f 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -14,6 +14,22 @@
   --cru-danger-color: hsl(0 100% 50%);
 }
 
+.cru-theme-primary {
+  --cru-theme-color: var(--cru-primary-color);
+}
+
+.cru-theme-secondary {
+  --cru-theme-color: var(--cru-secondary-color);
+}
+
+.cru-theme-create {
+  --cru-theme-color: var(--cru-create-color);
+}
+
+.cru-theme-danger {
+  --cru-theme-color: var(--cru-danger-color);
+}
+
 /* common colors */
 :root {
   --cru-background-color: hsl(0 0% 100%);
-- 
cgit v1.2.3


From 0b110df59aa98f78d3dd491e4c7ef310cee3c166 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 20 Sep 2023 19:42:41 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/Dialog.css        |  5 ++---
 FrontEnd/src/pages/timeline/Timeline.css         | 16 ----------------
 FrontEnd/src/pages/timeline/TimelinePostView.css |  2 +-
 3 files changed, 3 insertions(+), 20 deletions(-)

(limited to 'FrontEnd/src/components/dialog/Dialog.css')

diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index e4f52a92..23b663db 100644
--- a/FrontEnd/src/components/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -5,9 +5,8 @@
   top: 0;
   right: 0;
   bottom: 0;
-  display: flex;
-  align-items: center;
   overflow: auto;
+  padding: 20vh 1em;
 }
 
 .cru-dialog-background {
@@ -37,4 +36,4 @@
   .cru-dialog-container {
     max-width: 800px;
   }
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index 01a6acd6..db25eda0 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -25,22 +25,6 @@
   background: var(--timeline-background-color);
 }
 
-.timeline-post-item-options-mask {
-  background: hsla(0, 0%, 100%, 0.85);
-  z-index: 100;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  border-radius: var(--cru-card-border-radius);
-}
-
 .timeline-sync-state-badge {
   font-size: 0.8em;
   padding: 3px 8px;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.css b/FrontEnd/src/pages/timeline/TimelinePostView.css
index f14e1322..a8db46bf 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.css
@@ -34,4 +34,4 @@
 
 .timeline-post-content {
   margin-top: 0.5em;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3