fix z-index problems

src/components/CarbonAds/index.tsx

@@ -13,7 +13,6 @@ const StyledCloseBtn = styled.button`
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 50;
   border-radius: 0;
   background: ${({ theme }) => theme.DANGER};
 `;

src/components/ErrorContainer/ErrorContainer.tsx

@@ -26,10 +26,10 @@ const StyledErrorExpand = styled.button<{ error: boolean }>`
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
   box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
   cursor: pointer;
-  z-index: 100;
 
   &:hover {
     color: ${({ theme }) => theme.TEXT_DANGER};
+    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
   }
 `;
 

src/components/Graph/index.tsx

@@ -24,9 +24,9 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
   width: 100%;
   height: ${({ isWidget }) => (isWidget ? "100vh" : "calc(100vh - 36px)")};
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  background-image:  ${({ theme }) => `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`}; 
-    background-size: 10px 10px;
-    z-index: 0;
+  background-image: ${({ theme }) =>
+    `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};
+  background-size: 10px 10px;
 
   :active {
     cursor: move;

src/components/Loading/index.tsx

@@ -15,7 +15,7 @@ const StyledLoading = styled.div`
   height: 100vh;
   text-align: center;
   background: ${({ theme }) => theme.BLACK_DARK};
-  z-index: 100;
+  z-index: 36;
 `;
 
 const StyledLogo = styled.h2`

src/components/Modal/styles.tsx

@@ -15,7 +15,7 @@ export const ModalWrapper = styled.div`
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.85);
-  z-index: 100;
+  z-index: 36;
 
   * {
     box-sizing: border-box;

src/components/Tooltip/index.tsx

@@ -16,7 +16,7 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
   top: 0;
   right: 0;
   transform: translate(calc(100% + 15px), 25%);
-  z-index: 5;
+  z-index: 2;
   background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
   color: ${({ theme }) => theme.TEXT_NORMAL};
   border-radius: 5px;

src/constants/globalStyle.ts

@@ -59,7 +59,6 @@ const GlobalStyle = createGlobalStyle`
   }
 
   #carbonads {
-    z-index: 100;
     display: inline-block;
 
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',

src/containers/Editor/Tools.tsx

@@ -24,7 +24,7 @@ export const StyledTools = styled.div`
   background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
   color: ${({ theme }) => theme.SILVER};
   box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  z-index: 36;
+  z-index: 1;
 
   @media only screen and (max-width: 768px) {
     display: none;
@@ -64,40 +64,42 @@ export const Tools: React.FC = () => {
   const toggleEditor = () => setConfig("hideEditor", !hideEditor);
 
   return (
-    <StyledTools>
-      <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
-        <AiOutlineFullscreen />
-      </StyledToolElement>
-      <StyledToolElement
-        aria-label="settings"
-        onClick={() => setSettingsVisible(true)}
-      >
-        <TbSettings />
-      </StyledToolElement>
-      <SearchInput />
-      <StyledToolElement
-        aria-label="save"
-        onClick={() => setDownloadVisible(true)}
-      >
-        <FiDownload />
-      </StyledToolElement>
-      <StyledToolElement aria-label="center canvas" onClick={centerView}>
-        <MdCenterFocusWeak />
-      </StyledToolElement>
-      <StyledToolElement aria-label="zoom out" onClick={zoomOut}>
-        <AiOutlineMinus />
-      </StyledToolElement>
-      <StyledToolElement aria-label="zoom in" onClick={zoomIn}>
-        <AiOutlinePlus />
-      </StyledToolElement>
-      <DownloadModal
-        visible={isDownloadVisible}
-        setVisible={setDownloadVisible}
-      />
+    <>
+      <StyledTools>
+        <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
+          <AiOutlineFullscreen />
+        </StyledToolElement>
+        <StyledToolElement
+          aria-label="settings"
+          onClick={() => setSettingsVisible(true)}
+        >
+          <TbSettings />
+        </StyledToolElement>
+        <SearchInput />
+        <StyledToolElement
+          aria-label="save"
+          onClick={() => setDownloadVisible(true)}
+        >
+          <FiDownload />
+        </StyledToolElement>
+        <StyledToolElement aria-label="center canvas" onClick={centerView}>
+          <MdCenterFocusWeak />
+        </StyledToolElement>
+        <StyledToolElement aria-label="zoom out" onClick={zoomOut}>
+          <AiOutlineMinus />
+        </StyledToolElement>
+        <StyledToolElement aria-label="zoom in" onClick={zoomIn}>
+          <AiOutlinePlus />
+        </StyledToolElement>
+        <DownloadModal
+          visible={isDownloadVisible}
+          setVisible={setDownloadVisible}
+        />
+      </StyledTools>
       <SettingsModal
         visible={settingsVisible}
         setVisible={setSettingsVisible}
       />
-    </StyledTools>
+    </>
   );
 };