Merge pull request #27003 from overleaf/dp-modal-opacity

Change settings modal appearance tab to have transparent backdrop

GitOrigin-RevId: 9cbf36164a8d82ec5945d06c7107a3b73b334cfe

services/web/frontend/js/features/ide-redesign/components/settings/settings-modal-body.tsx

@@ -1,7 +1,8 @@
 import MaterialIcon, {
   AvailableUnfilledIcon,
 } from '@/shared/components/material-icon'
-import { ReactElement, useMemo, useState } from 'react'
+import { ReactElement } from 'react'
+
 import {
   Nav,
   NavLink,
@@ -9,10 +10,6 @@ import {
   TabContent,
   TabPane,
 } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
-import EditorSettings from './editor-settings/editor-settings'
-import AppearanceSettings from './appearance-settings/appearance-settings'
-import CompilerSettings from './compiler-settings/compiler-settings'
 
 export type SettingsEntry = SettingsLink | SettingsTab
 
@@ -30,41 +27,15 @@ type SettingsLink = {
   title: string
 }
 
-export const SettingsModalBody = () => {
-  const { t } = useTranslation()
-  const settingsTabs: SettingsEntry[] = useMemo(
-    () => [
-      {
-        key: 'editor',
-        title: t('editor'),
-        icon: 'code',
-        component: <EditorSettings />,
-      },
-      {
-        key: 'compiler',
-        title: t('compiler'),
-        icon: 'picture_as_pdf',
-        component: <CompilerSettings />,
-      },
-      {
-        key: 'appearance',
-        title: t('appearance'),
-        icon: 'brush',
-        component: <AppearanceSettings />,
-      },
-      {
-        key: 'account_settings',
-        title: t('account_settings'),
-        icon: 'settings',
-        href: '/user/settings',
-      },
-    ],
-    [t]
-  )
-  const [activeTab, setActiveTab] = useState<string | null | undefined>(
-    settingsTabs[0]?.key
-  )
-
+export const SettingsModalBody = ({
+  activeTab,
+  setActiveTab,
+  settingsTabs,
+}: {
+  activeTab: string | null | undefined
+  setActiveTab: (tab: string | null | undefined) => void
+  settingsTabs: SettingsEntry[]
+}) => {
   return (
     <TabContainer
       transition={false}

services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx

@@ -5,24 +5,70 @@ import OLModal, {
 } from '@/features/ui/components/ol/ol-modal'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { useTranslation } from 'react-i18next'
-import { SettingsModalBody } from './settings-modal-body'
+import { SettingsEntry, SettingsModalBody } from './settings-modal-body'
+
+import AppearanceSettings from './appearance-settings/appearance-settings'
+import CompilerSettings from './compiler-settings/compiler-settings'
+import EditorSettings from './editor-settings/editor-settings'
+import { useMemo, useState } from 'react'
 
 const SettingsModal = () => {
   // TODO ide-redesign-cleanup: Either rename the field, or introduce a separate
   // one
   const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
   const { t } = useTranslation()
+  const settingsTabs: SettingsEntry[] = useMemo(
+    () => [
+      {
+        key: 'editor',
+        title: t('editor'),
+        icon: 'code',
+        component: <EditorSettings />,
+      },
+      {
+        key: 'compiler',
+        title: t('compiler'),
+        icon: 'picture_as_pdf',
+        component: <CompilerSettings />,
+      },
+      {
+        key: 'appearance',
+        title: t('appearance'),
+        icon: 'brush',
+        component: <AppearanceSettings />,
+      },
+      {
+        key: 'account_settings',
+        title: t('account_settings'),
+        icon: 'settings',
+        href: '/user/settings',
+      },
+    ],
+    [t]
+  )
+  const [activeTab, setActiveTab] = useState<string | null | undefined>(
+    settingsTabs[0]?.key
+  )
   return (
     <OLModal
       show={leftMenuShown}
       onHide={() => setLeftMenuShown(false)}
       size="lg"
+      backdropClassName={
+        activeTab === 'appearance'
+          ? 'ide-settings-modal-transparent-backdrop'
+          : undefined
+      }
     >
       <OLModalHeader closeButton>
         <OLModalTitle>{t('settings')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody className="ide-settings-modal-body">
-        <SettingsModalBody />
+        <SettingsModalBody
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          settingsTabs={settingsTabs}
+        />
       </OLModalBody>
     </OLModal>
   )

services/web/frontend/stylesheets/bootstrap-5/pages/editor/settings.scss

@@ -47,6 +47,10 @@
   padding: 0;
 }
 
+.modal-backdrop.show.ide-settings-modal-transparent-backdrop {
+  opacity: 0;
+}
+
 .ide-settings-section {
   padding-top: var(--spacing-06);
   padding-bottom: var(--spacing-05);