4 files changed, 61 insertions, 55 deletions
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index d7501f98..4a860e95 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -1,45 +1,45 @@
 :root {
   --cru-background-color: #f8f9fa;
 
-  --cru-primary-color: rgb(255, 105, 0);
-  --cru-primary-l1-color: rgb(255, 120, 26);
-  --cru-primary-l2-color: rgb(255, 135, 51);
-  --cru-primary-l3-color: rgb(255, 150, 77);
-  --cru-primary-d1-color: rgb(230, 95, 0);
-  --cru-primary-d2-color: rgb(204, 84, 0);
-  --cru-primary-d3-color: rgb(179, 74, 0);
-  --cru-primary-f1-color: rgb(230, 95, 0);
-  --cru-primary-f2-color: rgb(204, 84, 0);
-  --cru-primary-f3-color: rgb(179, 74, 0);
-  --cru-primary-r1-color: rgb(255, 120, 26);
-  --cru-primary-r2-color: rgb(255, 135, 51);
-  --cru-primary-r3-color: rgb(255, 150, 77);
-  --cru-primary-enhance-color: rgb(255, 150, 77);
-  --cru-primary-enhance-l1-color: rgb(255, 161, 94);
-  --cru-primary-enhance-l2-color: rgb(255, 171, 112);
-  --cru-primary-enhance-l3-color: rgb(255, 182, 130);
-  --cru-primary-enhance-d1-color: rgb(255, 131, 43);
-  --cru-primary-enhance-d2-color: rgb(255, 111, 10);
-  --cru-primary-enhance-d3-color: rgb(232, 96, 0);
-  --cru-primary-enhance-f1-color: rgb(255, 161, 94);
-  --cru-primary-enhance-f2-color: rgb(255, 171, 112);
-  --cru-primary-enhance-f3-color: rgb(255, 182, 130);
-  --cru-primary-enhance-r1-color: rgb(255, 131, 43);
-  --cru-primary-enhance-r2-color: rgb(255, 111, 10);
-  --cru-primary-enhance-r3-color: rgb(232, 96, 0);
-  --cru-secondary-color: rgb(23, 255, 0);
-  --cru-secondary-l1-color: rgb(46, 255, 26);
-  --cru-secondary-l2-color: rgb(69, 255, 51);
-  --cru-secondary-l3-color: rgb(92, 255, 77);
-  --cru-secondary-d1-color: rgb(20, 230, 0);
-  --cru-secondary-d2-color: rgb(18, 204, 0);
-  --cru-secondary-d3-color: rgb(16, 179, 0);
-  --cru-secondary-f1-color: rgb(20, 230, 0);
-  --cru-secondary-f2-color: rgb(18, 204, 0);
-  --cru-secondary-f3-color: rgb(16, 179, 0);
-  --cru-secondary-r1-color: rgb(46, 255, 26);
-  --cru-secondary-r2-color: rgb(69, 255, 51);
-  --cru-secondary-r3-color: rgb(92, 255, 77);
+  --cru-primary-color: rgb(0, 123, 255);
+  --cru-primary-l1-color: rgb(26, 136, 255);
+  --cru-primary-l2-color: rgb(51, 149, 255);
+  --cru-primary-l3-color: rgb(77, 163, 255);
+  --cru-primary-d1-color: rgb(0, 111, 230);
+  --cru-primary-d2-color: rgb(0, 98, 204);
+  --cru-primary-d3-color: rgb(0, 86, 179);
+  --cru-primary-f1-color: rgb(0, 111, 230);
+  --cru-primary-f2-color: rgb(0, 98, 204);
+  --cru-primary-f3-color: rgb(0, 86, 179);
+  --cru-primary-r1-color: rgb(26, 136, 255);
+  --cru-primary-r2-color: rgb(51, 149, 255);
+  --cru-primary-r3-color: rgb(77, 163, 255);
+  --cru-primary-enhance-color: rgb(77, 163, 255);
+  --cru-primary-enhance-l1-color: rgb(94, 172, 255);
+  --cru-primary-enhance-l2-color: rgb(112, 181, 255);
+  --cru-primary-enhance-l3-color: rgb(130, 190, 255);
+  --cru-primary-enhance-d1-color: rgb(43, 145, 255);
+  --cru-primary-enhance-d2-color: rgb(10, 128, 255);
+  --cru-primary-enhance-d3-color: rgb(0, 112, 232);
+  --cru-primary-enhance-f1-color: rgb(94, 172, 255);
+  --cru-primary-enhance-f2-color: rgb(112, 181, 255);
+  --cru-primary-enhance-f3-color: rgb(130, 190, 255);
+  --cru-primary-enhance-r1-color: rgb(43, 145, 255);
+  --cru-primary-enhance-r2-color: rgb(10, 128, 255);
+  --cru-primary-enhance-r3-color: rgb(0, 112, 232);
+  --cru-secondary-color: rgb(128, 128, 128);
+  --cru-secondary-l1-color: rgb(141, 141, 141);
+  --cru-secondary-l2-color: rgb(153, 153, 153);
+  --cru-secondary-l3-color: rgb(166, 166, 166);
+  --cru-secondary-d1-color: rgb(115, 115, 115);
+  --cru-secondary-d2-color: rgb(102, 102, 102);
+  --cru-secondary-d3-color: rgb(90, 90, 90);
+  --cru-secondary-f1-color: rgb(115, 115, 115);
+  --cru-secondary-f2-color: rgb(102, 102, 102);
+  --cru-secondary-f3-color: rgb(90, 90, 90);
+  --cru-secondary-r1-color: rgb(141, 141, 141);
+  --cru-secondary-r2-color: rgb(153, 153, 153);
+  --cru-secondary-r3-color: rgb(166, 166, 166);
   --cru-text-primary-color: rgb(17, 17, 17);
   --cru-text-primary-l1-color: rgb(41, 41, 41);
   --cru-text-primary-l2-color: rgb(65, 65, 65);
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index 0b455baa..e0ea2cad 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -3,7 +3,7 @@
 }
 
 .cru-menu-item {
-  font-size: 1.2em;
+  font-size: 1em;
   padding: 0.5em 1.5em;
   cursor: pointer;
 }
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
index 8f8fd20e..658532d3 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -1,4 +1,5 @@
 .cru-popup-menu-menu-container {
+  z-index: 1040;
   border-radius: 5px;
   border: var(--cru-primary-color) 1px solid;
   background-color: var(--cru-background-color);
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 851f3bee..d7b81f49 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import React from "react";
+import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
 import Menu, { MenuItems } from "./Menu";
@@ -57,21 +58,25 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
       >
         {children}
       </div>
-      {show ? (
-        <div
-          ref={setPopperElement}
-          className="cru-popup-menu-menu-container"
-          style={styles.popper}
-          {...attributes.popper}
-        >
-          <Menu
-            items={items}
-            onItemClicked={() => {
-              setShow(false);
-            }}
-          />
-        </div>
-      ) : null}
+      {show
+        ? createPortal(
+            <div
+              ref={setPopperElement}
+              className="cru-popup-menu-menu-container"
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <Menu
+                items={items}
+                onItemClicked={() => {
+                  setShow(false);
+                }}
+              />
+            </div>,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            document.getElementById("portal")!
+          )
+        : null}
     </>
   );
 };