...

9 files changed, 141 insertions, 148 deletions

diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index 3f0f9cb6..387f6f21 100644
--- a/FrontEnd/src/components/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -1,26 +1,9 @@
-.cru-dialog-overlay {

-  position: fixed;

-  z-index: 1040;

-  left: 0;

-  top: 0;

-  right: 0;

-  bottom: 0;

+.cru-dialog-normal {

   overflow: auto;

-  padding: 20vh 1em;

+  padding: 20vh 1em 0;

 }

 

-.cru-dialog-background {

-  position: absolute;

-  z-index: -1;

-  left: 0;

-  right: 0;

-  top: 0;

-  bottom: 0;

-  background-color: var(--cru-dialog-overlay-color);

-  opacity: 0.8;

-}

-

-.cru-dialog-container {

+.cru-dialog-normal .cru-dialog-container {

   max-width: 100%;

   min-width: 30vw;

 

@@ -33,18 +16,18 @@
 }

 

 @media (min-width: 576px) {

-  .cru-dialog-container {

+  .cru-dialog-normal .cru-dialog-container {

     max-width: 800px;

   }

 }

 

-.cru-dialog-enter .cru-dialog-container {

+.cru-dialog-normal-enter .cru-dialog-container {

   opacity: 0;

   transform: scale(0, 0);

   transform-origin: center;

 }

 

-.cru-dialog-enter-active .cru-dialog-container {

+.cru-dialog-normal-enter-active .cru-dialog-container {

   opacity: 1;

   transform: scale(1, 1);

   transform-origin: center;

@@ -53,13 +36,13 @@
     opacity 0.3s;

 }

 

-.cru-dialog-exit .cru-dialog-container {

+.cru-dialog-normal-exit .cru-dialog-container {

   opacity: 1;

   transform: scale(1, 1);

   transform-origin: center;

 }

 

-.cru-dialog-exit-active .cru-dialog-container {

+.cru-dialog-normal-exit-active .cru-dialog-container {

   opacity: 0;

   transform: scale(0, 0);

   transform-origin: center;

diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index 2d0b34db..b5524a11 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -1,10 +1,8 @@
-import { ReactNode, useRef } from "react";
-import classNames from "classnames";
-import { CSSTransition } from "react-transition-group";
+import { ReactNode } from "react";
 
 import { ThemeColor } from "../common";
 
-import InPortal from "../InPortal";
+import DialogOverlay from "./DialogOverlay";
 
 import "./Dialog.css";
 
@@ -23,41 +21,15 @@ export default function Dialog({
   children,
   disableCloseOnClickOnOverlay,
 }: DialogProps) {
-  const nodeRef = useRef(null);
-  const lastPointerDownIdRef = useRef<number | null>(null);
-
   return (
-    <InPortal>
-      <CSSTransition
-        nodeRef={nodeRef}
-        mountOnEnter
-        unmountOnExit
-        in={open}
-        timeout={300}
-        classNames="cru-dialog"
-      >
-        <div
-          ref={nodeRef}
-          className={classNames(
-            `cru-theme-${color ?? "primary"}`,
-            "cru-dialog-overlay",
-          )}
-        >
-          <div
-            className="cru-dialog-background"
-            onPointerDown={(e) => {
-              lastPointerDownIdRef.current = e.pointerId;
-            }}
-            onPointerUp={(e) => {
-              if (lastPointerDownIdRef.current === e.pointerId) {
-                if (!disableCloseOnClickOnOverlay) onClose();
-              }
-              lastPointerDownIdRef.current = null;
-            }}
-          />
-          <div className="cru-dialog-container">{children}</div>
-        </div>
-      </CSSTransition>
-    </InPortal>
+    <DialogOverlay
+      open={open}
+      onClose={onClose}
+      transitionClassNames="cru-dialog-normal"
+      overlayClassName={`cru-dialog-normal cru-theme-${color ?? "primary"}`}
+      disableCloseOnClickOnOverlay={disableCloseOnClickOnOverlay}
+    >
+      {children}
+    </DialogOverlay>
   );
 }
diff --git a/FrontEnd/src/components/dialog/DialogOverlay.css b/FrontEnd/src/components/dialog/DialogOverlay.css
new file mode 100644
index 00000000..51a124fa
--- /dev/null
+++ b/FrontEnd/src/components/dialog/DialogOverlay.css
@@ -0,0 +1,13 @@
+.cru-dialog-overlay {
+  position: fixed;
+  z-index: 1040;
+  inset: 0;
+}
+
+.cru-dialog-background {
+  position: fixed;
+  z-index: -1;
+  inset: 0;
+  background-color: var(--cru-dialog-overlay-color);
+  opacity: 0.8;
+}
diff --git a/FrontEnd/src/components/dialog/DialogOverlay.tsx b/FrontEnd/src/components/dialog/DialogOverlay.tsx
new file mode 100644
index 00000000..f7b58474
--- /dev/null
+++ b/FrontEnd/src/components/dialog/DialogOverlay.tsx
@@ -0,0 +1,66 @@
+import { ReactNode, useRef } from "react";
+import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
+
+import InPortal from "../InPortal";
+
+import "./DialogOverlay.css";
+
+interface DialogOverlayProps {
+  open: boolean;
+  onClose: () => void;
+  transitionClassNames: string;
+  overlayClassName?: string;
+  containerClassName?: string;
+  children?: ReactNode;
+  disableCloseOnClickOnOverlay?: boolean;
+}
+
+export default function DialogOverlay({
+  open,
+  onClose,
+  transitionClassNames,
+  overlayClassName,
+  containerClassName,
+  children,
+  disableCloseOnClickOnOverlay,
+}: DialogOverlayProps) {
+  const nodeRef = useRef(null);
+  const lastPointerDownIdRef = useRef<number | null>(null);
+
+  return (
+    <InPortal>
+      <CSSTransition
+        nodeRef={nodeRef}
+        mountOnEnter
+        unmountOnExit
+        in={open}
+        timeout={300}
+        classNames={transitionClassNames}
+      >
+        <div
+          ref={nodeRef}
+          className={classNames("cru-dialog-overlay", overlayClassName)}
+        >
+          <div
+            className="cru-dialog-background"
+            onPointerDown={(e) => {
+              lastPointerDownIdRef.current = e.pointerId;
+            }}
+            onPointerUp={(e) => {
+              if (lastPointerDownIdRef.current === e.pointerId) {
+                if (!disableCloseOnClickOnOverlay) onClose();
+              }
+              lastPointerDownIdRef.current = null;
+            }}
+          />
+          <div
+            className={classNames("cru-dialog-container", containerClassName)}
+          >
+            {children}
+          </div>
+        </div>
+      </CSSTransition>
+    </InPortal>
+  );
+}
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.css b/FrontEnd/src/components/dialog/FullPageDialog.css
index 3ba8ba15..175cbb40 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.css
+++ b/FrontEnd/src/components/dialog/FullPageDialog.css
@@ -1,45 +1,32 @@
-.cru-dialog-full-page {

-  position: fixed;

-  z-index: 1030;

-  left: 0;

-  top: 0;

-  right: 0;

+.cru-dialog-full-page .cru-dialog-container {

+  position: absolute;

   bottom: 0;

+  width: 100%;

+  height: 85%;

+  border-top: 2px solid var(--cru-theme-color);

+  padding-top: 0.5em;

   background-color: var(--cru-background-color);

-  padding-top: 56px;

 }

 

-.cru-dialog-full-page-top-bar {

-  height: 56px;

-  position: absolute;

-  top: 0;

-  left: 0;

-  right: 0;

-  z-index: 1;

-  background-color: var(--cru-theme-color);

-  display: flex;

-  align-items: center;

-}

-

-.cru-dialog-full-page-content-container {

+.cru-dialog-full-page-content {

   overflow: scroll;

 }

 

-.cru-dialog-full-page-back-button {

-  margin-left: 0.5em;

+.cru-dialog-full-page-back {

+  float: right;

+  padding-right: 0.5em;

 }

 

-.cru-dialog-full-page-enter {

-  transform: translate(100%, 0);

+.cru-dialog-full-page-enter .cru-dialog-container {

+  transform: translate(0, 100%);

 }

 

-.cru-dialog-full-page-enter-active {

+.cru-dialog-full-page-enter-active .cru-dialog-container {

   transform: none;

   transition: transform 0.3s;

 }

 

-.cru-dialog-full-page-exit-active {

+.cru-dialog-full-page-exit-active .cru-dialog-container {

   transition: transform 0.3s;

-  transform: translate(100%, 0);

+  transform: translate(0, 100%);

 }

-

diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index b0a39ee3..44ea2a7b 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -1,10 +1,8 @@
-import { ReactNode, useRef } from "react";
-import classNames from "classnames";
-import { CSSTransition } from "react-transition-group";
+import { ReactNode } from "react";
 
 import { ThemeColor } from "../common";
 import { IconButton } from "../button";
-import InPortal from "../InPortal";
+import DialogOverlay from "./DialogOverlay";
 
 import "./FullPageDialog.css";
 
@@ -12,8 +10,8 @@ interface FullPageDialogProps {
   open: boolean;
   onClose: () => void;
   color?: ThemeColor;
-  contentContainerClassName?: string;
-  children: ReactNode;
+  children?: ReactNode;
+  disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function FullPageDialog({
@@ -21,42 +19,25 @@ export default function FullPageDialog({
   onClose,
   color,
   children,
-  contentContainerClassName,
+  disableCloseOnClickOnOverlay,
 }: FullPageDialogProps) {
-  const nodeRef = useRef(null);
-
   return (
-    <InPortal>
-      <CSSTransition
-        nodeRef={nodeRef}
-        mountOnEnter
-        unmountOnExit
-        in={open}
-        timeout={300}
-        classNames="cru-dialog-full-page"
-      >
-        <div
-          ref={nodeRef}
-          className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
-        >
-          <div className="cru-dialog-full-page-top-bar">
-            <IconButton
-              icon="arrow-left"
-              color="light"
-              className="cru-dialog-full-page-back-button"
-              onClick={onClose}
-            />
-          </div>
-          <div
-            className={classNames(
-              "cru-dialog-full-page-content-container",
-              contentContainerClassName,
-            )}
-          >
-            {children}
-          </div>
-        </div>
-      </CSSTransition>
-    </InPortal>
+    <DialogOverlay
+      open={open}
+      onClose={onClose}
+      transitionClassNames="cru-dialog-full-page"
+      overlayClassName={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
+      disableCloseOnClickOnOverlay={disableCloseOnClickOnOverlay}
+    >
+      <div className="cru-dialog-full-page-content">
+        <IconButton
+          icon="x-lg"
+          color={color ?? "primary"}
+          className="cru-dialog-full-page-back"
+          onClick={onClose}
+        />
+        {children}
+      </div>
+    </DialogOverlay>
   );
 }
diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
index 83b48318..2af7262e 100644
--- a/FrontEnd/src/components/index.css
+++ b/FrontEnd/src/components/index.css
@@ -7,6 +7,7 @@
 }

 

 body {

+  font-size: var(--cru-default-font-size);

   font-family: var(--cru-default-font-family);

   background: var(--cru-body-background-color);

   color: var(--cru-text-major-color);

@@ -14,6 +15,9 @@ body {
 }

 

 textarea {

+  font-size: 1rem;

+  resize: none;

+  outline: none;

   transition: border-color 0.3s;

   border-color: var(--cru-text-minor-color);

   background: var(--cru-background-color);

diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index 68dd780f..caf7c205 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -1,4 +1,5 @@
 :root {
+  --cru-default-font-size: 16px;
   --cru-default-font-family: 'Segoe UI', 'DengXian', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --cru-page-padding: 1em 2em;
 
diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
index f779297b..effd3dd6 100644
--- a/FrontEnd/src/index.css
+++ b/FrontEnd/src/index.css
@@ -13,20 +13,6 @@ small {
   cursor: pointer;

 }

 

-textarea {

-  resize: none;

-  outline: none;

-  border-color: var(--cru-bg-2-color);

-}

-

-textarea:hover {

-  border-color: var(--cru-primary-r2-color);

-}

-

-textarea:focus {

-  border-color: var(--cru-primary-color);

-}

-

 .white-space-no-wrap {

   white-space: nowrap;

 }

@@ -59,4 +45,4 @@ i {
 

 a {

   text-decoration: none;

-}
\ No newline at end of file
+}