...

4 files changed, 86 insertions, 11 deletions

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);

 }