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