fixes UI layering

src/components/UI/BottomBar/styles.css

@@ -21,7 +21,7 @@ button {
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 10000;
+  z-index: 1000;
   background-color: white;
   border-radius: 4px;
   padding: 4px;

src/components/UI/Dialog/DialogBox.jsx

@@ -11,10 +11,16 @@ export const DialogBox = () => (
   <Dialog.Root defaultOpen={true}>
     <Dialog.Trigger asChild>
       <button
-        style={{ position: "absolute", top: 0, left: 0, margin: "20px" }}
+        style={{
+          position: "absolute",
+          top: "20px",
+          left: "20px",
+          background: "white",
+          zIndex: "1000000000",
+        }}
         className="Button violet"
       >
-        <InfoCircledIcon transform="scale(2)" />
+        <InfoCircledIcon color="black" transform="scale(2)" />
       </button>
     </Dialog.Trigger>
     <Dialog.Portal>

src/components/UI/Dialog/dialogbox.css

@@ -4,10 +4,11 @@
 @import "@radix-ui/colors/violet.css";
 
 .DialogOverlay {
-  background-color: var(--blackA9);
+  background-color: rgba(0, 0, 0, 0.7);
   position: fixed;
   inset: 0;
   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 1000;
 }
 
 .DialogContent {
@@ -24,6 +25,7 @@
   max-height: 85vh;
   padding: 25px;
   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 1000;
 }
 .DialogContent:focus {
   outline: none;

src/components/UI/ModeToggleBar/styles.css

@@ -14,7 +14,7 @@ button {
   box-shadow: 0 2px 10px var(--black-a7);
   position: fixed;
   left: 50%;
-  top: 15px;
+  top: 20px;
   transform: translateX(-50%);
   z-index: 1000;
 }

src/components/UI/Panel/styles.css

@@ -1,9 +1,9 @@
 .Panel {
-  position: fixed;
+  position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 10000;
+  z-index: 1000;
   background: white;
   border-radius: 4px;
   padding: 10px;