From c3f17f1dd1099c244e36d09b14c3e131d703830e Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 19:54:24 +0800
Subject: ...

---
 FrontEnd/src/views/common/button/Button.css     | 72 +++++++++++++++++++++++++
 FrontEnd/src/views/common/button/Button.tsx     |  9 ++--
 FrontEnd/src/views/common/button/FlatButton.css |  8 +--
 FrontEnd/src/views/common/button/TextButton.css |  8 +--
 4 files changed, 86 insertions(+), 11 deletions(-)

(limited to 'FrontEnd/src/views/common/button')

diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index e69de29b..b6df222f 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -0,0 +1,72 @@
+.cru-button {
+  color: white;
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  border: none;
+  transition: all 0.6s;
+}
+
+.cru-button.primary {
+  background-color: var(--tl-primary-color);
+}
+
+.cru-button.primary:hover {
+  background-color: var(--tl-primary-f1-color);
+}
+
+.cru-button.primary:active {
+  background-color: var(--tl-primary-f2-color);
+}
+
+.cru-button.primary.disabled {
+  background-color: var(--tl-primary-f3-color);
+}
+
+.cru-button.secondary {
+  background-color: var(--tl-secondary-color);
+}
+
+.cru-button.secondary:hover {
+  background-color: var(--tl-secondary-f1-color);
+}
+
+.cru-button.secondary:active {
+  background-color: var(--tl-secondary-f2-color);
+}
+
+.cru-button.secondary.disabled {
+  background-color: var(--tl-secondary-f3-color);
+}
+
+.cru-button.success {
+  background-color: var(--tl-success-color);
+}
+
+.cru-button.success:hover {
+  background-color: var(--tl-success-f1-color);
+}
+
+.cru-button.success:active {
+  background-color: var(--tl-success-f2-color);
+}
+
+.cru-button.success.disabled {
+  background-color: var(--tl-success-f3-color);
+}
+
+.cru-button.danger {
+  background-color: var(--tl-danger-color);
+}
+
+.cru-button.danger:hover {
+  background-color: var(--tl-danger-f1-color);
+}
+
+.cru-button.danger:active {
+  background-color: var(--tl-danger-f2-color);
+}
+
+.cru-button.danger.disabled {
+  background-color: var(--tl-danger-f3-color);
+}
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 11710647..a39ef8a7 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -6,16 +6,19 @@ import { calculateProps, CommonButtonProps } from "./common";
 import "./Button.css";
 
 function _Button(
-  props: CommonButtonProps & { customButtonClassName?: string },
+  props: CommonButtonProps & {
+    outline?: boolean;
+    customButtonClassName?: string;
+  },
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
   const { t } = useTranslation();
 
-  const { customButtonClassName, ...otherProps } = props;
+  const { customButtonClassName, outline, ...otherProps } = props;
 
   const { newProps, children } = calculateProps(
     otherProps,
-    customButtonClassName ?? "cru-button",
+    customButtonClassName ?? "cru-button" + (outline ? " outline" : ""),
     t
   );
 
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 522563b9..c3c0dbb3 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -20,7 +20,7 @@
 }
 
 .cru-flat-button.primary.disabled {
-  color: var(--tl-primary-lighter-color);
+  color: var(--tl-primary-l1-color);
 }
 
 .cru-flat-button.secondary {
@@ -28,7 +28,7 @@
 }
 
 .cru-flat-button.secondary.disabled {
-  color: var(--tl-secondary-lighter-color);
+  color: var(--tl-secondary-l1-color);
 }
 
 .cru-flat-button.success {
@@ -36,7 +36,7 @@
 }
 
 .cru-flat-button.success.disabled {
-  color: var(--tl-success-lighter-color);
+  color: var(--tl-success-l1-color);
 }
 
 .cru-flat-button.danger {
@@ -44,5 +44,5 @@
 }
 
 .cru-flat-button.danger.disabled {
-  color: var(--tl-danger-ligher-color);
+  color: var(--tl-danger-l1-color);
 }
diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css
index dc5abaaa..d267fb38 100644
--- a/FrontEnd/src/views/common/button/TextButton.css
+++ b/FrontEnd/src/views/common/button/TextButton.css
@@ -8,7 +8,7 @@
 }
 
 .cru-text-button.primary:hover {
-  color: var(--tl-primary-lighter-color);
+  color: var(--tl-primary-l1-color);
 }
 
 .cru-text-button.secondary {
@@ -16,7 +16,7 @@
 }
 
 .cru-text-button.secondary:hover {
-  color: var(--tl-secondary-lighter-color);
+  color: var(--tl-secondary-l1-color);
 }
 
 .cru-text-button.success {
@@ -24,7 +24,7 @@
 }
 
 .cru-text-button.success:hover {
-  color: var(--tl-success-lighter-color);
+  color: var(--tl-success-l1-color);
 }
 
 .cru-text-button.danger {
@@ -32,5 +32,5 @@
 }
 
 .cru-text-button.danger:hover {
-  color: var(--tl-danger-lighter-color);
+  color: var(--tl-danger-l1-color);
 }
-- 
cgit v1.2.3