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

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

@@ -40,10 +40,13 @@ const AlertDialog = ({
       />
       <div
         className={classNames(
-          'z-[1] w-[95vw] rounded border border-border bg-default px-6 py-5 shadow-xl md:w-auto',
+          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] px-6 py-5 shadow-xl md:w-auto',
           !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
       >
         {children}
       </div>

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

@@ -253,7 +253,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
         close={cancelChallenge}
         className={{
           content: classNames(
-            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border',
+            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border md:translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
             !isMobileScreen && 'shadow-overlay-light',
             isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
           ),

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -203,7 +203,11 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
             return (
               <Fragment key={groupId}>
-                <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
+                <div
+                  className={`border-0 border-t border-solid border-[--separator-color] py-1 ${
+                    index === 0 ? 'border-t-0' : ''
+                  }`}
+                >
                   {group.items.map((menuItem) => {
                     const onClickEditorItem = () => {
                       handleMenuSelection(menuItem).catch(console.error)

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -207,7 +207,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
             <input
               disabled={disabled}
               className={classNames(
-                'w-full min-w-55 rounded border border-solid border-passive-3 bg-default px-2 py-1.5 text-sm',
+                'w-full min-w-55 rounded border border-solid border-passive-3 bg-default md:translucent-ui:bg-transparent px-2 py-1.5 text-sm',
                 'focus-within:ring-2 focus-within:ring-info',
               )}
               placeholder="e.g. YYYY-MM-DD"

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

@@ -62,7 +62,7 @@ const Dropdown = ({
       </VisuallyHidden>
       <Select
         className={classNames(
-          'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default px-3.5 py-1.5 text-sm text-foreground',
+          'flex w-full min-w-55 items-center justify-between rounded border border-passive-3 bg-default md:translucent-ui:bg-transparent px-3.5 py-1.5 text-sm text-foreground',
           disabled && 'opacity-50',
           classNameOverride.button,
           !fullWidth && 'md:w-fit',
@@ -83,9 +83,12 @@ const Dropdown = ({
       <SelectPopover
         store={select}
         className={classNames(
-          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-border bg-default py-1',
+          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
           classNameOverride.popover,
         )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
         portal={false}
       >
         {items.map((item) => (

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -121,7 +121,7 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
       close={dismiss}
       className={{
         content: classNames(
-          'm-0 flex h-full w-full flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]',
+          'm-0 flex h-full w-full flex-col rounded bg-[--popover-background-color] p-0 shadow-main md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]',
         ),
       }}
       actions={[

packages/web/src/javascripts/Components/Input/DecoratedInput.tsx

@@ -4,7 +4,7 @@ import { DecoratedInputProps } from './DecoratedInputProps'
 
 const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean, roundedFull?: boolean) => {
   return {
-    container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
+    container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default translucent-ui:bg-transparent text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
       !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
     } ${roundedFull ? 'rounded-full' : 'rounded'}`,
     input: `focus:ring-none w-full border-0 bg-transparent text-text focus:shadow-none focus:outline-none ${

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -62,7 +62,7 @@ const LinkedItemsPanel = ({
     <div>
       <form
         className={classNames(
-          'sticky top-0 z-10 bg-default px-2.5 pt-2.5',
+          'sticky top-0 z-10 bg-default md:translucent-ui:bg-transparent px-2.5 pt-2.5',
           linkedResults.length || unlinkedItems.length || notesLinkingToItem.length
             ? 'border-b border-border pb-2.5'
             : 'pb-1',
@@ -70,7 +70,10 @@ const LinkedItemsPanel = ({
       >
         <DecoratedInput
           type="text"
-          className={{ container: !isSearching ? 'px-0.5 py-1.5' : 'py-0', input: 'placeholder:text-passive-0' }}
+          className={{
+            container: classNames(!isSearching ? 'px-0.5 py-1.5' : 'py-0', 'md:translucent-ui:bg-default'),
+            input: 'placeholder:text-passive-0',
+          }}
           placeholder="Search items to link..."
           value={searchQuery}
           onChange={setSearchQuery}

packages/web/src/javascripts/Components/Menu/MenuItemSeparator.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
 
 const MenuItemSeparator: FunctionComponent = () => (
   <li className="list-none" role="none">
-    <div role="separator" className="my-2 h-[1px] bg-border" />
+    <div role="separator" className="my-2 h-[1px] bg-[--separator-color]" />
   </li>
 )
 

packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx

@@ -38,7 +38,7 @@ const Tooltip = ({ text }: { text: string }) => {
         onMouseEnter={() => setVisible(true)}
         onMouseLeave={() => setVisible(false)}
       >
-        <Icon type={'notes'} className="text-border" size="large" />
+        <Icon type={'notes'} className="text-border translucent-ui:text-[--popover-border-color]" size="large" />
       </div>
       <Popover
         open={visible}

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

@@ -104,16 +104,19 @@ const Modal = ({
       />
       <div
         className={classNames(
-          'z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
           className?.content,
         )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
       >
         {customHeader && !disableCustomHeader ? (
           customHeader
         ) : (
           <div
             className={classNames(
-              'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3',
+              'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3 md:translucent-ui:bg-transparent',
               hasTopInset ? 'pb-1.5 pt-safe-top' : 'py-1.5',
             )}
           >

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -98,7 +98,7 @@ const PositionedPopoverContent = ({
       <div
         className={classNames(
           'absolute left-0 top-0 flex w-full min-w-80 cursor-auto flex-col',
-          'overflow-y-auto rounded border border-[--menu-border-color] bg-default shadow-main md:h-auto md:max-w-xs',
+          'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] shadow-main md:h-auto md:max-w-xs',
           !disableMobileFullscreenTakeover && 'h-full',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
@@ -109,6 +109,7 @@ const PositionedPopoverContent = ({
           {
             ...styles,
             ...adjustedStyles,
+            backdropFilter: 'var(--popover-backdrop-filter)',
           } as CSSProperties
         }
         ref={mergeRefs([setPopoverElement, addCloseMethod])}

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -14,6 +14,7 @@ import PreferencesSegment from '../PreferencesComponents/PreferencesSegment'
 import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
 import EditorAppearance from './Appearance/EditorAppearance'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
+import usePreference from '@/Hooks/usePreference'
 
 type Props = {
   application: WebApplication
@@ -33,6 +34,11 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
     application.getPreference(PrefKey.UseSystemColorScheme, PrefDefaults[PrefKey.UseSystemColorScheme]),
   )
 
+  const useTranslucentUI = usePreference(PrefKey.UseTranslucentUI)
+  const toggleTranslucentUI = () => {
+    application.setPreference(PrefKey.UseTranslucentUI, !useTranslucentUI).catch(console.error)
+  }
+
   useEffect(() => {
     const usecase = new GetAllThemesUseCase(application.items)
     const { thirdParty, native } = usecase.execute({ excludeLayerable: true })
@@ -106,6 +112,14 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
         <PreferencesSegment>
           <Title>Themes</Title>
           <div className="mt-2">
+            <div className="flex justify-between gap-2 md:items-center">
+              <div className="flex flex-col">
+                <Subtitle>Disable translucent UI</Subtitle>
+                <Text>Use opaque style for UI elements instead of translucency</Text>
+              </div>
+              <Switch onChange={toggleTranslucentUI} checked={!useTranslucentUI} />
+            </div>
+            <HorizontalSeparator classes="my-4" />
             <div className="flex justify-between gap-2 md:items-center">
               <div className="flex flex-col">
                 <Subtitle>Use system color scheme</Subtitle>

packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx

@@ -9,7 +9,10 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = (props) => (
   <div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
     <PreferencesMenuView menu={props.menu} />
-    <div className="min-h-0 flex-grow overflow-auto bg-contrast" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}>
+    <div
+      className="min-h-0 flex-grow overflow-auto bg-contrast md:bg-[--popover-background-color]"
+      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+    >
       <PaneSelector {...props} />
     </div>
   </div>

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -24,7 +24,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
+    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-[--popover-background-color] md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem

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}

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -38,7 +38,7 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
       />
       <div
         className={classNames(
-          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
+          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[--modal-background-color]',
           'p-0 pb-safe-bottom pt-safe-top shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
           'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
           getPlatformString(),

packages/web/src/javascripts/Components/Shared/HorizontalSeparator.tsx

@@ -4,7 +4,7 @@ type Props = {
   classes?: string
 }
 const HorizontalSeparator: FunctionComponent<Props> = ({ classes = '' }) => {
-  return <hr className={`min-h-[1px] w-full border-none bg-border ${classes}`} />
+  return <hr className={`min-h-[1px] w-full border-none bg-[--separator-color] ${classes}`} />
 }
 
 export default HorizontalSeparator

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

@@ -47,7 +47,7 @@ const StyledTooltip = ({
         autoFocusOnShow={!showOnHover}
         store={tooltip}
         className={classNames(
-          'z-tooltip max-w-max rounded border border-border bg-contrast px-3 py-1.5 text-sm text-foreground shadow',
+          'z-tooltip max-w-max rounded border border-border translucent-ui:border-[--popover-border-color] bg-contrast translucent-ui:bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-3 py-1.5 text-sm text-foreground shadow',
           className,
         )}
         updatePosition={() => {

packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -277,7 +277,7 @@ function TextFormatFloatingToolbar({
   return (
     <div
       ref={toolbarRef}
-      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast"
+      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] px-2 py-1 shadow-sm shadow-contrast"
     >
       {isLink && (
         <LinkEditor