From 7dc2e8045f56d77fa7faa56acfd7c6093ceacd16 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 24 May 2023 11:03:58 +0100
Subject: [PATCH] Unmask the editor when changing editor theme (#12604)

GitOrigin-RevId: 633d12c748cfd615fa72698f886a452c5b2fd2bb
---
 .../components/editor-left-menu.tsx           |  8 ++---
 .../components/left-menu-mask.tsx             | 31 +++++++++++++++++++
 .../stylesheets/app/editor/left-menu.less     |  1 +
 3 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 services/web/frontend/js/features/editor-left-menu/components/left-menu-mask.tsx

diff --git a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
index 3e00fd058d..bd250f2f7c 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
@@ -5,9 +5,10 @@ import { useLayoutContext } from '../../../shared/context/layout-context'
 import classNames from 'classnames'
 import SyncMenu from './sync-menu'
 import SettingsMenu from './settings-menu'
+import LeftMenuMask from './left-menu-mask'
 
 export default function EditorLeftMenu() {
-  const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
+  const { leftMenuShown } = useLayoutContext()
 
   return (
     <>
@@ -21,10 +22,7 @@ export default function EditorLeftMenu() {
         <SettingsMenu />
         <HelpMenu />
       </aside>
-      {leftMenuShown ? (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        <div id="left-menu-mask" onClick={() => setLeftMenuShown(false)} />
-      ) : null}
+      {leftMenuShown && <LeftMenuMask />}
     </>
   )
 }
diff --git a/services/web/frontend/js/features/editor-left-menu/components/left-menu-mask.tsx b/services/web/frontend/js/features/editor-left-menu/components/left-menu-mask.tsx
new file mode 100644
index 0000000000..e606102967
--- /dev/null
+++ b/services/web/frontend/js/features/editor-left-menu/components/left-menu-mask.tsx
@@ -0,0 +1,31 @@
+import { memo, useEffect, useRef, useState } from 'react'
+import { useLayoutContext } from '../../../shared/context/layout-context'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+
+export default memo(function LeftMenuMask() {
+  const { setLeftMenuShown } = useLayoutContext()
+  const [editorTheme] = useScopeValue('settings.editorTheme')
+  const [overallTheme] = useScopeValue('settings.overallTheme')
+  const [original] = useState({ editorTheme, overallTheme })
+  const maskRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (maskRef.current) {
+      if (
+        editorTheme !== original.editorTheme ||
+        overallTheme !== original.overallTheme
+      ) {
+        maskRef.current.style.opacity = '0'
+      }
+    }
+  }, [editorTheme, overallTheme, original])
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      id="left-menu-mask"
+      ref={maskRef}
+      onClick={() => setLeftMenuShown(false)}
+    />
+  )
+})
diff --git a/services/web/frontend/stylesheets/app/editor/left-menu.less b/services/web/frontend/stylesheets/app/editor/left-menu.less
index 5bae91a13a..010c3dec72 100644
--- a/services/web/frontend/stylesheets/app/editor/left-menu.less
+++ b/services/web/frontend/stylesheets/app/editor/left-menu.less
@@ -188,4 +188,5 @@
   opacity: 0.4;
   background-color: #999;
   z-index: 99;
+  transition: opacity 0.5s;
 }