6 files changed, 34 insertions, 27 deletions
diff --git a/FrontEnd/src/views/common/input/InputGroup.css b/FrontEnd/src/views/common/input/InputGroup.css
index 1763ea53..7e905b1e 100644
--- a/FrontEnd/src/views/common/input/InputGroup.css
+++ b/FrontEnd/src/views/common/input/InputGroup.css
@@ -8,7 +8,7 @@
 
 .cru-input-label {
   display: block;
-  color: var(--cru-key-color);
+  color: var(--cru-clickable-normal-color);
   font-size: 0.9em;
   margin-bottom: 0.3em;
 }
@@ -20,24 +20,24 @@
 .cru-input-type-text input {
   appearance: none;
   display: block;
-  border: 1px solid var(--cru-surface-outline-color);
-  color: var(--cru-surface-on-color);
-  background-color: var(--cru-surface-color);
+  border: 1px solid;
+  /* color: var(--cru-surface-on-color); */
+  /* background-color: var(--cru-surface-color); */
   margin: 0;
-  padding: 0;
-  font-size: 1.2em;
+  font-size: 1em;
+  padding: 0.2em;
 }
 
 .cru-input-type-text input:hover {
-  border-color: var(--cru-key-color);
+  border-color: var(--cru-clickable-hover-color);
 }
 
 .cru-input-type-text input:focus {
-  border-color: var(--cru-key-color);
+  border-color: var(--cru-clickable-focus-color);
 }
 
 .cru-input-type-text input:disabled {
-  border-color: var(--cru-surface-on-color);
+  border-color: var(--cru-clickable-disabled-color);
 }
 
 .cru-input-error {
diff --git a/FrontEnd/src/views/common/input/InputGroup.tsx b/FrontEnd/src/views/common/input/InputGroup.tsx
index 5714411c..d95bb29e 100644
--- a/FrontEnd/src/views/common/input/InputGroup.tsx
+++ b/FrontEnd/src/views/common/input/InputGroup.tsx
@@ -360,7 +360,7 @@ export function InputGroup({
       ref={containerRef}
       className={classNames(
         "cru-input-group",
-        `cru-${color ?? "primary"}`,
+        `cru-clickable-${color ?? "primary"}`,
         containerClassName,
       )}
     >
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index 9b0f55bf..75734533 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -3,16 +3,27 @@
 }
 
 .cru-menu-item {
+  display: block;
   font-size: 1em;
+  width: 100%;
   padding: 0.5em 1.5em;
-  cursor: pointer;
   transition: all 0.5s;
-  color: var(--cru-button-normal-color);
+  color: var(--cru-clickable-normal-color);
+  background-color: var(--cru-clickable-grayscale-normal-color);
+  border: none;
+  cursor: pointer;
 }
 
 .cru-menu-item:hover {
-  color: white;
-  background-color: var(--cru-button-normal-color);
+  background-color: var(--cru-clickable-grayscale-hover-color);
+}
+
+.cru-menu-item:focus {
+  background-color: var(--cru-clickable-grayscale-focus-color);
+}
+
+.cru-menu-item:active {
+  background-color: var(--cru-clickable-grayscale-active-color);
 }
 
 .cru-menu-item-icon {
@@ -21,5 +32,5 @@
 
 .cru-menu-divider {
   border-width: 0;
-  border-top: 1px solid var(--cru-button-normal-color);
+  border-top: 1px solid var(--cru-primary-color);
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index 65cd55b4..e8099c76 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -21,7 +21,6 @@ export type MenuItem =
 export type MenuItems = MenuItem[];
 
 export type MenuProps = {
-  color?: ThemeColor;
   items: MenuItems;
   onItemClicked?: () => void;
   className?: string;
@@ -29,7 +28,6 @@ export type MenuProps = {
 };
 
 export default function Menu({
-  color,
   items,
   onItemClicked,
   className,
@@ -38,19 +36,16 @@ export default function Menu({
   const c = useC();
 
   return (
-    <div
-      className={classNames(`cru-menu cru-button-${color ?? "primary"}`, className)}
-      style={style}
-    >
+    <div className={classNames("cru-menu", className)} style={style}>
       {items.map((item, index) => {
         if (item.type === "divider") {
           return <hr key={index} className="cru-menu-divider" />;
         } else {
           const { text, color, icon, onClick } = item;
           return (
-            <div
+            <button
               key={index}
-              className={`cru-menu-item cru-button-${color ?? "primary"}`}
+              className={`cru-menu-item cru-clickable-${color ?? "primary"}`}
               onClick={() => {
                 onClick();
                 onItemClicked?.();
@@ -58,7 +53,7 @@ export default function Menu({
             >
               {icon != null && <Icon color={color} icon={icon} />}
               {c(text)}
-            </div>
+            </button>
           );
         }
       })}
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
index b8dfe265..149e0699 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -1,6 +1,7 @@
 .cru-popup-menu-menu-container {
   z-index: 1040;
-  border-radius: 5px;
-  border: var(--cru-button-normal-color) 1px solid;
+  border-radius: 3px;
+  border: var(--cru-clickable-normal-color) 1.5px solid;
   background-color: var(--cru-background-color);
+  overflow: hidden;
 }
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 035f5602..5c8d5e98 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -52,7 +52,7 @@ export default function PopupMenu({
         createPortal(
           <div
             ref={setPopperElement}
-            className={`cru-popup-menu-menu-container cru-button-${
+            className={`cru-popup-menu-menu-container cru-clickable-${
               color ?? "primary"
             }`}
             style={styles.popper}