...

12 files changed, 189 insertions, 213 deletions

diff --git a/FrontEnd/src/services/alert.ts b/FrontEnd/src/services/alert.ts
index 48d482ea..abe56315 100644
--- a/FrontEnd/src/services/alert.ts
+++ b/FrontEnd/src/services/alert.ts
@@ -1,11 +1,13 @@
 import React from "react";
 import pull from "lodash/pull";
 
-import { BootstrapThemeColor, I18nText } from "@/common";
+import { I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
 
 export interface AlertInfo {
-  type?: BootstrapThemeColor;
-  message: React.FC<unknown> | I18nText;
+  type?: PaletteColorType;
+  message?: I18nText;
+  customMessage?: React.ReactElement;
   dismissTime?: number | "never";
 }
 
@@ -55,9 +57,3 @@ export const alertService = new AlertService();
 export function pushAlert(alert: AlertInfo): void {
   alertService.push(alert);
 }
-
-export const kAlertHostId = "alert-host";
-
-export function getAlertHost(): HTMLElement | null {
-  return document.getElementById(kAlertHostId);
-}
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 6d2760f2..4ceff8ab 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -14,8 +14,8 @@ import {
 } from "@/http/user";
 import { Trans, useTranslation } from "react-i18next";
 import Button from "../common/button/Button";
-import TextButton from "../common/button/TextButton";
 import Spinner from "../common/Spinner";
+import FlatButton from "../common/button/FlatButton";
 
 interface DialogProps<TData = undefined, TReturn = undefined> {
   open: boolean;
@@ -232,12 +232,12 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
         className={classnames("edit-mask", !editMaskVisible && "d-none")}
         onClick={() => setEditMaskVisible(false)}
       >
-        <TextButton text="admin:user.modify" onClick={on[kModify]} />
-        <TextButton
+        <FlatButton text="admin:user.modify" onClick={on[kModify]} />
+        <FlatButton
           text="admin:user.modifyPermissions"
           onClick={on[kModifyPermission]}
         />
-        <TextButton
+        <FlatButton
           text="admin:user.delete"
           color="danger"
           onClick={on[kDelete]}
diff --git a/FrontEnd/src/views/common/alert/AlertHost.tsx b/FrontEnd/src/views/common/alert/AlertHost.tsx
index 21b9882d..ba6d6a0f 100644
--- a/FrontEnd/src/views/common/alert/AlertHost.tsx
+++ b/FrontEnd/src/views/common/alert/AlertHost.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import without from "lodash/without";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
-import {
-  alertService,
-  AlertInfoEx,
-  kAlertHostId,
-  AlertInfo,
-} from "@/services/alert";
+import { alertService, AlertInfoEx, AlertInfo } from "@/services/alert";
 import { convertI18nText } from "@/common";
 
+import "./alert.css";
+
 interface AutoCloseAlertProps {
   alert: AlertInfo;
   close: () => void;
@@ -51,14 +49,29 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
   };
 
   return (
-    <div className="m-3" onClick={cancelTimer}>
-      {(() => {
-        const { message } = alert;
-        if (typeof message === "function") {
-          const Message = message;
-          return <Message />;
-        } else return convertI18nText(message, t);
-      })()}
+    <div
+      className={classNames(
+        "m-3 cru-alert",
+        "cru-" + (alert.type ?? "primary")
+      )}
+      onClick={cancelTimer}
+    >
+      <div className="cru-alert-content">
+        {(() => {
+          const { message, customMessage } = alert;
+          if (customMessage != null) {
+            return customMessage;
+          } else {
+            return convertI18nText(message, t);
+          }
+        })()}
+      </div>
+      <div className="cru-alert-close-button-container">
+        <i
+          className={classNames("icon-button bi-x cru-alert-close-button")}
+          onClick={close}
+        />
+      </div>
     </div>
   );
 };
@@ -66,8 +79,6 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
 const AlertHost: React.FC = () => {
   const [alerts, setAlerts] = React.useState<AlertInfoEx[]>([]);
 
-  // react guarantee that state setters are stable, so we don't need to add it to dependency list
-
   React.useEffect(() => {
     const consume = (alert: AlertInfoEx): void => {
       setAlerts((old) => [...old, alert]);
@@ -80,7 +91,7 @@ const AlertHost: React.FC = () => {
   }, []);
 
   return (
-    <div id={kAlertHostId} className="alert-container">
+    <div className="alert-container">
       {alerts.map((alert) => {
         return (
           <AutoCloseAlert
diff --git a/FrontEnd/src/views/common/alert/alert.css b/FrontEnd/src/views/common/alert/alert.css
index 12ce294e..328f5f9b 100644
--- a/FrontEnd/src/views/common/alert/alert.css
+++ b/FrontEnd/src/views/common/alert/alert.css
@@ -2,3 +2,31 @@
   position: fixed;

   z-index: 1040;

 }

+

+.cru-alert {

+  border-radius: 5px;

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

+  color: var(--cru-theme-t-color);

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

+

+  display: flex;

+  overflow: hidden;

+}

+

+.cru-alert-content {

+  padding: 0.5em 2em;

+}

+

+.cru-alert-close-button-container {

+  margin-left: auto;

+  width: 2em;

+  text-align: center;

+  display: flex;

+  align-items: center;

+  justify-content: center;

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

+}

+

+.cru-alert-close-button {

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

+}

diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 54127f05..c34176f6 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,59 +1,19 @@
-.cru-button.primary {

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

-  --cru-button-t-color: var(--cru-primary-t-color);

-  --cru-button-f1-color: var(--cru-primary-f1-color);

-  --cru-button-f2-color: var(--cru-primary-f2-color);

-  --cru-button-f3-color: var(--cru-primary-f3-color);

-}

-

-.cru-button.primary-enhance {

-  --cru-button-color: var(--cru-primary-enhance-color);

-  --cru-button-t-color: var(--cru-primary-enhance-t-color);

-  --cru-button-f1-color: var(--cru-primary-enhance-f1-color);

-  --cru-button-f2-color: var(--cru-primary-enhance-f2-color);

-  --cru-button-f3-color: var(--cru-primary-enhance-f3-color);

-}

-

-.cru-button.secondary {

-  --cru-button-color: var(--cru-secondary-color);

-  --cru-button-t-color: var(--cru-secondary-t-color);

-  --cru-button-f1-color: var(--cru-secondary-f1-color);

-  --cru-button-f2-color: var(--cru-secondary-f2-color);

-  --cru-button-f3-color: var(--cru-secondary-f3-color);

-}

-

-.cru-button.success {

-  --cru-button-color: var(--cru-success-color);

-  --cru-button-t-color: var(--cru-success-t-color);

-  --cru-button-f1-color: var(--cru-success-f1-color);

-  --cru-button-f2-color: var(--cru-success-f2-color);

-  --cru-button-f3-color: var(--cru-success-f3-color);

-}

-

-.cru-button.danger {

-  --cru-button-color: var(--cru-danger-color);

-  --cru-button-t-color: var(--cru-danger-t-color);

-  --cru-button-f1-color: var(--cru-danger-f1-color);

-  --cru-button-f2-color: var(--cru-danger-f2-color);

-  --cru-button-f3-color: var(--cru-danger-f3-color);

-}

-

 .cru-button:not(.outline) {

-  color: var(--cru-button-t-color);

+  color: var(--cru-theme-t-color);

   cursor: pointer;

   padding: 0.2em 0.5em;

   border-radius: 0.2em;

   border: none;

   transition: all 0.5s;

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

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

 }

 

 .cru-button:not(.outline):hover {

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

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

 }

 

 .cru-button:not(.outline):active {

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

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

 }

 

 .cru-button:not(.outline):disabled {

@@ -62,8 +22,8 @@
 }

 

 .cru-button.outline {

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

-  border: var(--cru-button-color) 1px solid;

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

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

   cursor: pointer;

   padding: 0.2em 0.5em;

   border-radius: 0.2em;

@@ -72,14 +32,14 @@
 }

 

 .cru-button.outline:hover {

-  color: var(--cru-button-f1-color);

-  border-color: var(--cru-button-f1-color);

+  color: var(--cru-theme-f1-color);

+  border-color: var(--cru-theme-f1-color);

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

 }

 

 .cru-button.outline:active {

-  color: var(--cru-button-f2-color);

-  border-color: var(--cru-button-f2-color);

+  color: var(--cru-theme-f2-color);

+  border-color: var(--cru-theme-f2-color);

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

 }

 

diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 986fb061..f0d33153 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -5,44 +5,14 @@
   border: none;

   background-color: transparent;

   transition: all 0.6s;

-}

-

-.cru-flat-button:hover:not(.disabled) {

-  background-color: #e9ecef;

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

 }

 

 .cru-flat-button.disabled {

+  color: var(--cru-theme-l1-color);

   cursor: default;

 }

 

-.cru-flat-button.primary {

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

-}

-

-.cru-flat-button.primary.disabled {

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

-}

-

-.cru-flat-button.secondary {

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

-}

-

-.cru-flat-button.secondary.disabled {

-  color: var(--cru-secondary-l1-color);

-}

-

-.cru-flat-button.success {

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

-}

-

-.cru-flat-button.success.disabled {

-  color: var(--cru-success-l1-color);

-}

-

-.cru-flat-button.danger {

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

-}

-

-.cru-flat-button.danger.disabled {

-  color: var(--cru-danger-l1-color);

+.cru-flat-button:hover:not(.disabled) {

+  background-color: #e9ecef;

 }

diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css
deleted file mode 100644
index f5c8aefa..00000000
--- a/FrontEnd/src/views/common/button/TextButton.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.cru-text-button {

-  background: transparent;

-  border: none;

-}

-

-.cru-text-button.primary {

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

-}

-

-.cru-text-button.primary:hover {

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

-}

-

-.cru-text-button.secondary {

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

-}

-

-.cru-text-button.secondary:hover {

-  color: var(--cru-secondary-l1-color);

-}

-

-.cru-text-button.success {

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

-}

-

-.cru-text-button.success:hover {

-  color: var(--cru-success-l1-color);

-}

-

-.cru-text-button.danger {

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

-}

-

-.cru-text-button.danger:hover {

-  color: var(--cru-danger-l1-color);

-}

diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx
deleted file mode 100644
index 1d8e7a4b..00000000
--- a/FrontEnd/src/views/common/button/TextButton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-
-import { CommonButtonProps } from "./common";
-import Button from "./Button";
-
-import "./TextButton.css";
-
-function _TextButton(
-  props: CommonButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>
-): React.ReactElement | null {
-  return (
-    <Button ref={ref} customButtonClassName="cru-flat-button" {...props} />
-  );
-}
-
-const TextButton = React.forwardRef(_TextButton);
-export default TextButton;
diff --git a/FrontEnd/src/views/common/button/common.ts b/FrontEnd/src/views/common/button/common.ts
index a9db959e..0d84bae0 100644
--- a/FrontEnd/src/views/common/button/common.ts
+++ b/FrontEnd/src/views/common/button/common.ts
@@ -20,7 +20,11 @@ export function calculateProps(
 } {
   const { text, color, className, children, ...otherProps } = props;
   const newProps = {
-    className: classNames(buttonClassName, color ?? "primary", className),
+    className: classNames(
+      buttonClassName,
+      color != null ? "cru-" + color : "cru-primary",
+      className
+    ),
     ...otherProps,
   };
 
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 529e0e51..a4ce8cf3 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -92,6 +92,106 @@
   --cru-success-t3-color: rgb(179, 179, 179);

 }

 

+.cru-primary {

+  --cru-theme-color: var(--cru-primary-color);

+  --cru-theme-l1-color: var(--cru-primary-l1-color);

+  --cru-theme-l2-color: var(--cru-primary-l2-color);

+  --cru-theme-l3-color: var(--cru-primary-l3-color);

+  --cru-theme-d1-color: var(--cru-primary-d1-color);

+  --cru-theme-d2-color: var(--cru-primary-d2-color);

+  --cru-theme-d3-color: var(--cru-primary-d3-color);

+  --cru-theme-f1-color: var(--cru-primary-f1-color);

+  --cru-theme-f2-color: var(--cru-primary-f2-color);

+  --cru-theme-f3-color: var(--cru-primary-f3-color);

+  --cru-theme-r1-color: var(--cru-primary-r1-color);

+  --cru-theme-r2-color: var(--cru-primary-r2-color);

+  --cru-theme-r3-color: var(--cru-primary-r3-color);

+  --cru-theme-t-color: var(--cru-primary-t-color);

+  --cru-theme-t1-color: var(--cru-primary-t1-color);

+  --cru-theme-t2-color: var(--cru-primary-t2-color);

+  --cru-theme-t3-color: var(--cru-primary-t3-color);

+}

+

+.cru-primary-enhance {

+  --cru-theme-color: var(--cru-primary-enhance-color);

+  --cru-theme-l1-color: var(--cru-primary-enhance-l1-color);

+  --cru-theme-l2-color: var(--cru-primary-enhance-l2-color);

+  --cru-theme-l3-color: var(--cru-primary-enhance-l3-color);

+  --cru-theme-d1-color: var(--cru-primary-enhance-d1-color);

+  --cru-theme-d2-color: var(--cru-primary-enhance-d2-color);

+  --cru-theme-d3-color: var(--cru-primary-enhance-d3-color);

+  --cru-theme-f1-color: var(--cru-primary-enhance-f1-color);

+  --cru-theme-f2-color: var(--cru-primary-enhance-f2-color);

+  --cru-theme-f3-color: var(--cru-primary-enhance-f3-color);

+  --cru-theme-r1-color: var(--cru-primary-enhance-r1-color);

+  --cru-theme-r2-color: var(--cru-primary-enhance-r2-color);

+  --cru-theme-r3-color: var(--cru-primary-enhance-r3-color);

+  --cru-theme-t-color: var(--cru-primary-enhance-t-color);

+  --cru-theme-t1-color: var(--cru-primary-enhance-t1-color);

+  --cru-theme-t2-color: var(--cru-primary-enhance-t2-color);

+  --cru-theme-t3-color: var(--cru-primary-enhance-t3-color);

+}

+

+.cru-secondary {

+  --cru-theme-color: var(--cru-secondary-color);

+  --cru-theme-l1-color: var(--cru-secondary-l1-color);

+  --cru-theme-l2-color: var(--cru-secondary-l2-color);

+  --cru-theme-l3-color: var(--cru-secondary-l3-color);

+  --cru-theme-d1-color: var(--cru-secondary-d1-color);

+  --cru-theme-d2-color: var(--cru-secondary-d2-color);

+  --cru-theme-d3-color: var(--cru-secondary-d3-color);

+  --cru-theme-f1-color: var(--cru-secondary-f1-color);

+  --cru-theme-f2-color: var(--cru-secondary-f2-color);

+  --cru-theme-f3-color: var(--cru-secondary-f3-color);

+  --cru-theme-r1-color: var(--cru-secondary-r1-color);

+  --cru-theme-r2-color: var(--cru-secondary-r2-color);

+  --cru-theme-r3-color: var(--cru-secondary-r3-color);

+  --cru-theme-t-color: var(--cru-secondary-t-color);

+  --cru-theme-t1-color: var(--cru-secondary-t1-color);

+  --cru-theme-t2-color: var(--cru-secondary-t2-color);

+  --cru-theme-t3-color: var(--cru-secondary-t3-color);

+}

+

+.cru-success {

+  --cru-theme-color: var(--cru-success-color);

+  --cru-theme-l1-color: var(--cru-success-l1-color);

+  --cru-theme-l2-color: var(--cru-success-l2-color);

+  --cru-theme-l3-color: var(--cru-success-l3-color);

+  --cru-theme-d1-color: var(--cru-success-d1-color);

+  --cru-theme-d2-color: var(--cru-success-d2-color);

+  --cru-theme-d3-color: var(--cru-success-d3-color);

+  --cru-theme-f1-color: var(--cru-success-f1-color);

+  --cru-theme-f2-color: var(--cru-success-f2-color);

+  --cru-theme-f3-color: var(--cru-success-f3-color);

+  --cru-theme-r1-color: var(--cru-success-r1-color);

+  --cru-theme-r2-color: var(--cru-success-r2-color);

+  --cru-theme-r3-color: var(--cru-success-r3-color);

+  --cru-theme-t-color: var(--cru-success-t-color);

+  --cru-theme-t1-color: var(--cru-success-t1-color);

+  --cru-theme-t2-color: var(--cru-success-t2-color);

+  --cru-theme-t3-color: var(--cru-success-t3-color);

+}

+

+.cru-danger {

+  --cru-theme-color: var(--cru-danger-color);

+  --cru-theme-l1-color: var(--cru-danger-l1-color);

+  --cru-theme-l2-color: var(--cru-danger-l2-color);

+  --cru-theme-l3-color: var(--cru-danger-l3-color);

+  --cru-theme-d1-color: var(--cru-danger-d1-color);

+  --cru-theme-d2-color: var(--cru-danger-d2-color);

+  --cru-theme-d3-color: var(--cru-danger-d3-color);

+  --cru-theme-f1-color: var(--cru-danger-f1-color);

+  --cru-theme-f2-color: var(--cru-danger-f2-color);

+  --cru-theme-f3-color: var(--cru-danger-f3-color);

+  --cru-theme-r1-color: var(--cru-danger-r1-color);

+  --cru-theme-r2-color: var(--cru-danger-r2-color);

+  --cru-theme-r3-color: var(--cru-danger-r3-color);

+  --cru-theme-t-color: var(--cru-danger-t-color);

+  --cru-theme-t1-color: var(--cru-danger-t1-color);

+  --cru-theme-t2-color: var(--cru-danger-t2-color);

+  --cru-theme-t3-color: var(--cru-danger-t3-color);

+}

+

 .cru-color-primary {

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

 }

diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index 923c7d3c..c3fa82c4 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -7,51 +7,12 @@
   padding: 0.5em 1.5em;

   cursor: pointer;

   transition: all 0.5s;

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

 }

 

-.cru-menu-item.color-primary {

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

-}

-

-.cru-menu-item.color-primary:hover {

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

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

-}

-

-.cru-menu-item.color-secondary {

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

-}

-

-.cru-menu-item.color-secondary:hover {

-  color: var(--cru-secondary-t-color);

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

-}

-

-.cru-menu-item.color-primary-enhance {

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

-}

-

-.cru-menu-item.color-primary-enhance:hover {

-  color: var(--cru-primary-enhance-t-color);

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

-}

-

-.cru-menu-item.color-success {

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

-}

-

-.cru-menu-item.color-success:hover {

-  color: var(--cru-success-t-color);

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

-}

-

-.cru-menu-item.color-danger {

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

-}

-

-.cru-menu-item.color-danger:hover {

-  color: var(--cru-danger-t-color);

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

+.cru-menu-item:hover {

+  color: var(--cru-theme-t-color);

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

 }

 

 .cru-menu-item-icon {

diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index 04243fa3..d2f65391 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -47,7 +47,7 @@ export default function _Menu({
               key={index}
               className={classnames(
                 "cru-menu-item",
-                `color-${item.color ?? "primary"}`
+                `cru-${item.color ?? "primary"}`
               )}
               onClick={() => {
                 item.onClick();