...

4 files changed, 80 insertions, 50 deletions

diff --git a/FrontEnd/src/views/common/Spinner.tsx b/FrontEnd/src/views/common/Spinner.tsx
index b591d8ab..4c735fef 100644
--- a/FrontEnd/src/views/common/Spinner.tsx
+++ b/FrontEnd/src/views/common/Spinner.tsx
@@ -8,12 +8,14 @@ import "./Spinner.css";
 export interface SpinnerProps {
   size?: "sm" | "md" | "lg" | number | string;
   color?: PaletteColorType;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export default function Spinner(
   props: SpinnerProps
 ): React.ReactElement | null {
-  const { size, color } = props;
+  const { size, color, className, style } = props;
   const calculatedSize =
     size === "sm"
       ? "18px"
@@ -30,8 +32,12 @@ export default function Spinner(
 
   return (
     <span
-      className={classnames("cru-spinner", `cru-color-${calculatedColor}`)}
-      style={{ width: calculatedSize, height: calculatedSize }}
+      className={classnames(
+        "cru-spinner",
+        `cru-color-${calculatedColor}`,
+        className
+      )}
+      style={{ width: calculatedSize, height: calculatedSize, ...style }}
     />
   );
 }
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>
   );
 };
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 4a860e95..8eb24e1d 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -144,6 +144,14 @@
   float: right;

 }

 

+.cru-align-text-bottom {

+  vertical-align: text-bottom;

+}

+

+.cru-align-middle {

+  vertical-align: middle;

+}

+

 .cru-clearfix::after {

   clear: both;

 }