feat: Added translucency effect to menus, dialogs and alerts. Can be turned off from Preferences > Appeareance (#2387) [skip e2e]

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -13,7 +13,6 @@ import Icon from '@/Components/Icon/Icon'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
 import { sortThemes } from '@/Utils/SortThemes'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import Menu from '../Menu/Menu'
@@ -21,6 +20,7 @@ import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { useApplication } from '../ApplicationProvider'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
+import MenuItemSeparator from '../Menu/MenuItemSeparator'
 
 type MenuProps = {
   quickSettingsMenuController: QuickSettingsController
@@ -133,7 +133,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuCont
               {component.displayName}
             </MenuSwitchButtonItem>
           ))}
-          <HorizontalSeparator classes="my-2" />
+          <MenuItemSeparator />
         </>
       )}
       <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
@@ -143,7 +143,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuCont
       {themes.map((theme) => (
         <ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier.value} />
       ))}
-      <HorizontalSeparator classes="my-2" />
+      <MenuItemSeparator />
       <FocusModeSwitch
         application={application}
         onToggle={setFocusModeEnabled}