Unmask the editor when changing editor theme (#12604)

GitOrigin-RevId: 633d12c748cfd615fa72698f886a452c5b2fd2bb

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 />}
     </>
   )
 }

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)}
+    />
+  )
+})

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;
 }