From cefceaac3e6c5975563628ab59d8ad4ce0e6cb04 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 4 Apr 2022 21:50:52 -0700
Subject: [PATCH] chore: Combine z-index from editor

---
 app/editor/components/CommandMenu.tsx     | 3 ++-
 app/editor/components/FloatingToolbar.tsx | 3 ++-
 app/typings/styled-components.d.ts        | 1 -
 shared/styles/depths.ts                   | 4 ++--
 shared/styles/theme.ts                    | 1 -
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/editor/components/CommandMenu.tsx b/app/editor/components/CommandMenu.tsx
index a4142da72..9b9a4e2bb 100644
--- a/app/editor/components/CommandMenu.tsx
+++ b/app/editor/components/CommandMenu.tsx
@@ -10,6 +10,7 @@ import insertFiles from "@shared/editor/commands/insertFiles";
 import { CommandFactory } from "@shared/editor/lib/Extension";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { EmbedDescriptor, MenuItem } from "@shared/editor/types";
+import { depths } from "@shared/styles";
 import { supportedImageMimeTypes } from "@shared/utils/files";
 import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 import { Dictionary } from "~/hooks/useDictionary";
@@ -605,7 +606,7 @@ export const Wrapper = styled.div<{
   color: ${(props) => props.theme.text};
   font-family: ${(props) => props.theme.fontFamily};
   position: absolute;
-  z-index: ${(props) => props.theme.zIndex + 100};
+  z-index: ${depths.editorToolbar};
   ${(props) => props.top !== undefined && `top: ${props.top}px`};
   ${(props) => props.bottom !== undefined && `bottom: ${props.bottom}px`};
   left: ${(props) => props.left}px;
diff --git a/app/editor/components/FloatingToolbar.tsx b/app/editor/components/FloatingToolbar.tsx
index 96327f336..e870d4b99 100644
--- a/app/editor/components/FloatingToolbar.tsx
+++ b/app/editor/components/FloatingToolbar.tsx
@@ -4,6 +4,7 @@ import { EditorView } from "prosemirror-view";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
+import { depths } from "@shared/styles";
 import useComponentSize from "~/hooks/useComponentSize";
 import useMediaQuery from "~/hooks/useMediaQuery";
 import useViewportHeight from "~/hooks/useViewportHeight";
@@ -208,7 +209,7 @@ const Wrapper = styled.div<{
   will-change: opacity, transform;
   padding: 8px 16px;
   position: absolute;
-  z-index: ${(props) => props.theme.zIndex + 100};
+  z-index: ${depths.editorToolbar};
   opacity: 0;
   background-color: ${(props) => props.theme.toolbarBackground};
   border-radius: 4px;
diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts
index 9324c45bf..618d321db 100644
--- a/app/typings/styled-components.d.ts
+++ b/app/typings/styled-components.d.ts
@@ -25,7 +25,6 @@ declare module "styled-components" {
     fontFamily: string;
     fontFamilyMono: string;
     fontWeight: number;
-    zIndex: number;
     link: string;
     placeholder: string;
     textSecondary: string;
diff --git a/shared/styles/depths.ts b/shared/styles/depths.ts
index 522e94096..d87360013 100644
--- a/shared/styles/depths.ts
+++ b/shared/styles/depths.ts
@@ -1,8 +1,8 @@
 const depths = {
   header: 800,
   sidebar: 900,
-  // Note: editor toolbars are 900
-  hoverPreview: 998,
+  editorToolbar: 925,
+  hoverPreview: 950,
   // Note: editor lightbox is z-index 999
   modalOverlay: 2000,
   modal: 3000,
diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts
index 5cafbe357..7c326fa89 100644
--- a/shared/styles/theme.ts
+++ b/shared/styles/theme.ts
@@ -58,7 +58,6 @@ export const base = {
     "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
   fontWeight: 400,
   backgroundTransition: "background 100ms ease-in-out",
-  zIndex: 800,
   selected: colors.primary,
   buttonBackground: colors.primary,
   buttonText: colors.white,