From 1d320f3e363d46900a420650360b68ba9a4f3f2f Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 23:02:41 +0800
Subject: ...

---
 FrontEnd/src/views/common/button/Button.css        | 99 ++++++++++++----------
 FrontEnd/src/views/common/button/LoadingButton.tsx | 11 ++-
 2 files changed, 63 insertions(+), 47 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 8b5b74a7..3e408d8d 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,72 +1,81 @@
-.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(--cru-primary-color);
-}
-
-.cru-button.primary:hover {
-  background-color: var(--cru-primary-f1-color);
+  --cru-button-color: var(--cru-primary-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:active {
-  background-color: var(--cru-primary-f2-color);
-}
-
-.cru-button.primary.disabled {
-  background-color: var(--cru-primary-f3-color);
+.cru-button.primary-enhance {
+  --cru-button-color: var(--cru-primary-enhance-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 {
-  background-color: var(--cru-secondary-color);
-}
-
-.cru-button.secondary:hover {
-  background-color: var(--cru-secondary-f1-color);
+  --cru-button-color: var(--cru-secondary-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.secondary:active {
-  background-color: var(--cru-secondary-f2-color);
+.cru-button.success {
+  --cru-button-color: var(--cru-success-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.secondary.disabled {
-  background-color: var(--cru-secondary-f3-color);
+.cru-button.danger {
+  --cru-button-color: var(--cru-danger-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.success {
-  background-color: var(--cru-success-color);
+.cru-button:not(.outline) {
+  color: white;
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  border: none;
+  transition: all 0.5s;
+  background-color: var(--cru-button-color);
 }
 
-.cru-button.success:hover {
-  background-color: var(--cru-success-f1-color);
+.cru-button:not(.outline):hover {
+  background-color: var(--cru-button-f1-color);
 }
 
-.cru-button.success:active {
-  background-color: var(--cru-success-f2-color);
+.cru-button:not(.outline):active {
+  background-color: var(--cru-button-f2-color);
 }
 
-.cru-button.success.disabled {
-  background-color: var(--cru-success-f3-color);
+.cru-button:not(.outline):disabled {
+  background-color: var(--cru-button-f3-color);
 }
 
-.cru-button.danger {
-  background-color: var(--cru-danger-color);
+.cru-button.outline {
+  color: var(--cru-button-color);
+  border: var(--cru-button-color) 1px solid;
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  transition: all 0.6s;
+  background-color: white;
 }
 
-.cru-button.danger:hover {
-  background-color: var(--cru-danger-f1-color);
+.cru-button.outline:hover {
+  color: var(--cru-button-f1-color);
+  border-color: var(--cru-button-f1-color);
 }
 
-.cru-button.danger:active {
-  background-color: var(--cru-danger-f2-color);
+.cru-button.outline:active {
+  color: var(--cru-button-f2-color);
+  border-color: var(--cru-button-f2-color);
 }
 
-.cru-button.danger.disabled {
-  background-color: var(--cru-danger-f3-color);
+.cru-button.outline:disabled {
+  color: var(--cru-button-f3-color);
+  border-color: var(--cru-button-f3-color);
 }
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index aee83aa2..a7e34f91 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -11,9 +11,16 @@ const LoadingButton: React.FC<{ loading?: boolean } & CommonButtonProps> = ({
   ...otherProps
 }) => {
   return (
-    <Button color={color} disabled={disabled || loading} {...otherProps}>
+    <Button
+      color={color}
+      outline
+      disabled={disabled || loading}
+      {...otherProps}
+    >
       {otherProps.children}
-      {loading ? <Spinner color={color} /> : null}
+      {loading ? (
+        <Spinner className="cru-align-text-bottom ms-1" color={color} />
+      ) : null}
     </Button>
   );
 };
-- 
cgit v1.2.3