5 files changed, 19 insertions, 139 deletions
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,
   };