4 files changed, 52 insertions, 6 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 55563e00..12c6903e 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -30,6 +30,7 @@
 
 .cru-button:not(.outline):disabled {
   background-color: var(--cru-surface-on-color);
+  border-color: var(--cru-surface-on-color);
   cursor: auto;
 }
 
@@ -55,8 +56,8 @@
 }
 
 .cru-button.outline:disabled {
-  color: var(--cru-disabled-color);
-  border-color: var(--cru-disabled-color);
+  color: var(--cru-surface-on-color);
+  border-color: var(--cru-surface-on-color);
   background-color: white;
   cursor: auto;
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 921fafe4..373371c2 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -21,7 +21,7 @@
   background-color: var(--cru-surface-2-color);
 }
 
-.cru-flat-button.disabled {
-  color: var(--cru-disabled-color);
+.cru-flat-button:disabled {
+  color: var(--cru-surface-on-color);
   cursor: auto;
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css
index 25c5f84c..a1ac67f7 100644
--- a/FrontEnd/src/views/common/button/IconButton.css
+++ b/FrontEnd/src/views/common/button/IconButton.css
@@ -3,8 +3,49 @@
   font-size: 1.4rem;
   background: none;
   border: none;
+  transition: all 0.5s;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cru-icon-button:hover {
+  color: var(--cru-key-1-color);
+}
+
+.cru-icon-button:focus {
+  color: var(--cru-key-1-color);
+}
+
+.cru-icon-button:active {
+  color: var(--cru-key-2-color);
+}
+
+.cru-flat-button:disabled {
+  color: var(--cru-surface-on-color);
+  cursor: auto;
 }
 
 .cru-icon-button.large {
   font-size: 1.6rem;
 }
+
+.cru-icon-button.on-surface {
+  color: var(--cru-surface-color);
+}
+
+.cru-icon-button.on-surface:hover {
+  color: var(--cru-surface-1-color);
+}
+
+.cru-icon-button.on-surface:focus {
+  color: var(--cru-surface-1-color);
+}
+
+.cru-icon-button.on-surface:active {
+  color: var(--cru-surface-2-color);
+}
+
+.cru-flat-button.on-surface:disabled {
+  color: var(--cru-surface-on-color);
+  cursor: auto;
+}
+\ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index e5454574..ac746a7b 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -7,7 +7,7 @@ import "./IconButton.css";
 
 interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
-  color?: ThemeColor;
+  color?: ThemeColor | "on-surface";
   large?: boolean;
 }
 
@@ -20,7 +20,11 @@ export default function IconButton(props: IconButtonProps) {
         "cru-icon-button",
         large && "large",
         "bi-" + icon,
-        color ? "cru-" + color : "cru-primary",
+        color === "on-surface"
+          ? "on-surface"
+          : color != null
+          ? "cru-" + color
+          : "cru-primary",
         className,
       )}
       {...otherProps}