Merge pull request #25923 from overleaf/dp-view-dropdown

Update UI of view dropdown

GitOrigin-RevId: 2d689a73886e0821eaa21e6666092e9414528e55

services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx

@@ -1,6 +1,7 @@
 import {
   DropdownDivider,
   DropdownHeader,
+  DropdownItem,
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
 import { MenuBar } from '@/shared/components/menu-bar/menu-bar'
 import { MenuBarDropdown } from '@/shared/components/menu-bar/menu-bar-dropdown'
@@ -209,13 +210,17 @@ export const ToolbarMenuBar = () => {
           className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
         >
           <ChangeLayoutOptions />
+          <DropdownDivider />
           <DropdownHeader>Editor settings</DropdownHeader>
           <MenuBarOption
             eventKey="show_equation_preview"
             title={t('show_equation_preview')}
-            trailingIcon={mathPreview ? 'check' : undefined}
+            leadingIcon={
+              mathPreview ? 'check' : <DropdownItem.EmptyLeadingIcon />
+            }
             onClick={toggleMathPreview}
           />
+          <DropdownDivider />
           <CommandSection section={pdfControlsMenuSectionStructure} />
         </MenuBarDropdown>
         <CommandDropdown

services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx

@@ -8,6 +8,7 @@ type MenuBarOptionProps = {
   title: string
   onClick?: MouseEventHandler
   disabled?: boolean
+  leadingIcon?: ReactNode
   trailingIcon?: ReactNode
   href?: string
   target?: string
@@ -20,6 +21,7 @@ export const MenuBarOption = ({
   onClick: clickHandler,
   href,
   disabled,
+  leadingIcon,
   trailingIcon,
   target,
   rel,
@@ -42,6 +44,7 @@ export const MenuBarOption = ({
         onMouseEnter={() => setSelected(null)}
         onClick={onClick}
         disabled={disabled}
+        leadingIcon={leadingIcon}
         trailingIcon={trailingIcon}
         href={href}
         rel={rel}