4 files changed, 13 insertions, 7 deletions
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 373371c2..7151f6de 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -3,25 +3,25 @@
   padding: 0.4em 0.8em;
   transition: all 0.5s;
   border-radius: 0.2em;
-  background-color: var(--cru-surface-color);
+  background-color: var(--cru-flat-button-background-normal-color);
   border: 1px none;
-  color: var(--cru-key-color);
+  color: var(--cru-button-normal-color);
   cursor: pointer;
 }
 
 .cru-flat-button:hover {
-  background-color: var(--cru-surface-1-color);
+  background-color: var(--cru-flat-button-background-hover-color);
 }
 
 .cru-flat-button:focus {
-  background-color: var(--cru-surface-1-color);
+  background-color: var(--cru-flat-button-background-focus-color);
 }
 
 .cru-flat-button:active {
-  background-color: var(--cru-surface-2-color);
+  background-color: var(--cru-flat-button-background-active-color);
 }
 
 .cru-flat-button:disabled {
-  color: var(--cru-surface-on-color);
+  color: var(--cru-button-disabled-color);
   cursor: auto;
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 15b21224..20ca7432 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -24,7 +24,7 @@ export default function FlatButton(props: FlatButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        color && `cru-${color}`,
+        `cru-button-${color ?? "primary"}`,
         "cru-flat-button",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
index 63e8948b..2819168e 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -6,3 +6,8 @@
 .cru-loading-button-spinner {
   margin-left: 0.5em;
 }
+
+.cru-loading-button-loading {
+  color: var(--cru-button-normal-color) !important;
+  border-color: var(--cru-button-normal-color) !important;
+}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 43aca766..30b020cd 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -28,6 +28,7 @@ export default function LoadingButton(props: LoadingButtonProps) {
       className={classNames(
         "cru-button outline cru-loading-button",
         `cru-button-${color ?? "primary"}`,
+        loading && "cru-loading-button-loading",
         className,
       )}
       {...otherProps}