5 files changed, 21 insertions, 15 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}
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index f672d7a8..b3ca7485 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -56,21 +56,21 @@
   --cru-button-disabled-color: hsl(0, 0%, 50%);
   /* push button colors */
   --cru-push-button-text-color: #ffffff;
-  --cru-push-button-disabled-text-color: hsl(0, 0, 80%);
+  --cru-push-button-disabled-text-color: hsl(0, 0%, 80%);
   /* flat button colors */
   --cru-flat-button-background-normal-color: #ffffff;
-  --cru-flat-button-background-hover-color: hsl(0, 0, 90%);
-  --cru-flat-button-background-focus-color: hsl(0, 0, 90%);
-  --cru-flat-button-background-active-color: hsl(0, 0, 80%);
+  --cru-flat-button-background-hover-color: hsl(0, 0%, 90%);
+  --cru-flat-button-background-focus-color: hsl(0, 0%, 90%);
+  --cru-flat-button-background-active-color: hsl(0, 0%, 80%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     /* flat button colors */
-    --cru-flat-button-background-normal-color: #ffffff;
-    --cru-flat-button-background-hover-color: #ffffff;
-    --cru-flat-button-background-focus-color: #ffffff;
-    --cru-flat-button-background-active-color: #ffffff;
+    --cru-flat-button-background-normal-color: #000000;
+    --cru-flat-button-background-hover-color: hsl(0, 0%, 20%);
+    --cru-flat-button-background-focus-color: hsl(0, 0%, 20%);
+    --cru-flat-button-background-active-color: hsl(0, 0%, 30%);
   }
 }