Updated Z_INDEX constant and added to theme

src/__tests__/components/dropdown.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent } from "@testing-library/react";
 import { Dropdown } from "../../components/Dropdown";
 import { vitest, expect, it, describe } from "vitest";
 import { renderWithProvider } from "../../testHelpers";
+import { Z_INDEX } from "../../constants";
 
 describe("Dropdown", () => {
   const items = [
@@ -64,7 +65,7 @@ describe("Dropdown", () => {
       width: max-content;
       position: relative;
       overflow: visible;
-      z-index: 1000;
+      z-index: ${Z_INDEX.DROPDOWN};
       height: 34px;
     }
 

src/__tests__/components/modal.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent } from "@testing-library/react";
 import { vitest, expect, it } from "vitest";
 import { renderWithProvider } from "../../testHelpers";
 import Modal from "../../components/Modal/Modal";
+import { Z_INDEX } from "../../constants";
 
 const value = true;
 const onClose = vitest.fn();
@@ -44,7 +45,7 @@ it("should render the menu with correct content and call onClose", () => {
      width: 100%;
      height: 100vh;
      background: rgba(0,0,0,0.8);
-     z-index: 1040;
+     z-index: ${Z_INDEX.MODAL};
      -webkit-animation: cJoqxJ 0.2s forwards;
      animation: cJoqxJ 0.2s forwards;
    }

src/components/Charts/Density/styles.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Z_INDEX } from "../../../constants";
 
 export const Wrapper = styled.div`
     position: relative;
@@ -8,7 +9,7 @@ export const Wrapper = styled.div`
     // Fix tooltip "border"
     .recharts-tooltip-wrapper {
         outline: none;
-        z-index: 15;
+        z-index: ${Z_INDEX.TOOLTIP};
     }
 `;
 
@@ -49,4 +50,4 @@ export const ActionButton = styled.div<{ disabled?: boolean }>`
     }
 
     opacity: ${({ disabled }) => (disabled ? 0.4 : 0.9)};
-`;
+`;

src/constants/index.ts

@@ -8,7 +8,8 @@ export enum SCREEN_WIDTH {
 }
 
 export enum Z_INDEX {
-  DROPDOWN = 1000,
-  MODAL = 1040,
-  TOOLTIP = 1080,
+  TOOLTIP = 1100,
+  MODAL = 1090,
+  HEADER = 1080,
+  DROPDOWN = 1070,
 }

src/index.ts

@@ -3,4 +3,4 @@ export * from "./theme";
 export * from "./Providers";
 export * from './hooks';
 export * from './utils';
-export { default as ResetCSS } from './ResetCSS';
+export { default as ResetCSS } from './ResetCSS';

src/theme/dark.ts

@@ -1,12 +1,14 @@
 import { DefaultTheme } from "styled-components";
 import { buttons, colors } from "./colors";
+import { Z_INDEX } from "../constants";
 
 const darkTheme: DefaultTheme = {
   colors,
   background: "#0e1218",
   buttons,
   primaryGradient: `linear-gradient(90deg, #7da0c1 3.46%, #34627d 100%)`,
   primaryDarkGradient: `linear-gradient(90deg, #32404e 3.46%, #1a2c38 100%)`,
+  zIndexes: Z_INDEX
 };
 
 export default darkTheme;

src/theme/index.ts

@@ -1,12 +1,14 @@
 import { ThemeColors } from "./types";
 import { ButtonsColors } from "./colors";
+import { Z_INDEX } from "../constants";
 
 export interface UIKitTheme {
   colors: ThemeColors;
   buttons: ButtonsColors;
   background: string;
-  primaryGradient: string
-  primaryDarkGradient: string
+  primaryGradient: string;
+  primaryDarkGradient: string;
+  zIndexes: typeof Z_INDEX
 }
 
 export { default as dark } from "./dark";