chore: make mobile menu ui more native-like (#2594)

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

@@ -79,7 +79,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onCl
         disableClickOutside={isClickOutsideDisabled}
         anchorElement={buttonRef}
         open={isOpen}
-        className="pt-2 md:pt-0"
+        className="md:pb-1"
       >
         <ChangeEditorMenu
           application={application}

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

@@ -13,7 +13,7 @@ import {
   PrefKey,
   SNNote,
 } from '@standardnotes/snjs'
-import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
 import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
 import { createEditorMenuGroups } from '../../Utils/createEditorMenuGroups'
@@ -24,6 +24,7 @@ import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { Pill } from '../Preferences/PreferencesComponents/Content'
 import ModalOverlay from '../Modal/ModalOverlay'
 import SuperNoteConverter from '../SuperEditor/SuperNoteConverter'
+import MenuSection from '../Menu/MenuSection'
 
 type ChangeEditorMenuProps = {
   application: WebApplication
@@ -210,48 +211,42 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
       <Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu" isOpen={isVisible}>
         {groups
           .filter((group) => group.items && group.items.length)
-          .map((group, index) => {
+          .map((group) => {
             const groupId = getGroupId(group)
 
             return (
-              <Fragment key={groupId}>
-                <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)
-                    }
+              <MenuSection key={groupId}>
+                {group.items.map((menuItem) => {
+                  const onClickEditorItem = () => {
+                    handleMenuSelection(menuItem).catch(console.error)
+                  }
 
-                    return (
-                      <MenuRadioButtonItem
-                        key={menuItem.uiFeature.uniqueIdentifier.value}
-                        onClick={onClickEditorItem}
-                        className={'flex-row-reversed py-2'}
-                        checked={isSelected(menuItem)}
-                        info={menuItem.uiFeature.description}
-                      >
-                        <div className="flex flex-grow items-center justify-between">
-                          <div className={`flex items-center ${group.featured ? 'font-bold' : ''}`}>
-                            {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                            {menuItem.uiFeature.displayName}
-                            {menuItem.isLabs && (
-                              <Pill className="px-1.5 py-0.5" style="success">
-                                Labs
-                              </Pill>
-                            )}
-                          </div>
-                          {!menuItem.isEntitled && (
-                            <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
+                  return (
+                    <MenuRadioButtonItem
+                      key={menuItem.uiFeature.uniqueIdentifier.value}
+                      onClick={onClickEditorItem}
+                      className={'flex-row-reversed py-2'}
+                      checked={isSelected(menuItem)}
+                      info={menuItem.uiFeature.description}
+                    >
+                      <div className="flex flex-grow items-center justify-between">
+                        <div className={`flex items-center ${group.featured ? 'font-bold' : ''}`}>
+                          {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                          {menuItem.uiFeature.displayName}
+                          {menuItem.isLabs && (
+                            <Pill className="px-1.5 py-0.5" style="success">
+                              Labs
+                            </Pill>
                           )}
                         </div>
-                      </MenuRadioButtonItem>
-                    )
-                  })}
-                </div>
-              </Fragment>
+                        {!menuItem.isEntitled && (
+                          <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
+                        )}
+                      </div>
+                    </MenuRadioButtonItem>
+                  )
+                })}
+              </MenuSection>
             )
           })}
       </Menu>

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

@@ -10,7 +10,7 @@ import {
   NoteType,
   SNNote,
 } from '@standardnotes/snjs'
-import { Fragment, useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import Icon from '../Icon/Icon'
 import { PremiumFeatureIconName, PremiumFeatureIconClass } from '../Icon/PremiumFeatureIcon'
 import Menu from '../Menu/Menu'
@@ -20,6 +20,7 @@ import { EditorMenuItem } from '../NotesOptions/EditorMenuItem'
 import { SuperNoteImporter } from '../SuperEditor/SuperNoteImporter'
 import { Pill } from '../Preferences/PreferencesComponents/Content'
 import ModalOverlay from '../Modal/ModalOverlay'
+import MenuSection from '../Menu/MenuSection'
 
 const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')
 
@@ -132,36 +133,34 @@ const ChangeEditorMultipleMenu = ({ application, notes, setDisableClickOutside }
   return (
     <>
       <Menu isOpen={true} a11yLabel="Change note type">
-        {groupsWithItems.map((group, index) => (
-          <Fragment key={getGroupId(group)}>
-            <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
-              {group.items.map((item) => {
-                const onClickEditorItem = () => {
-                  handleMenuSelection(item).catch(console.error)
-                }
-                return (
-                  <MenuItem
-                    key={item.uiFeature.uniqueIdentifier.value}
-                    onClick={onClickEditorItem}
-                    className={'flex-row-reversed py-2'}
-                  >
-                    <div className="flex flex-grow items-center justify-between">
-                      <div className={'flex items-center'}>
-                        {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                        {item.uiFeature.displayName}
-                        {item.isLabs && (
-                          <Pill className="px-1.5 py-0.5" style="success">
-                            Labs
-                          </Pill>
-                        )}
-                      </div>
-                      {!item.isEntitled && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+        {groupsWithItems.map((group) => (
+          <MenuSection key={getGroupId(group)}>
+            {group.items.map((item) => {
+              const onClickEditorItem = () => {
+                handleMenuSelection(item).catch(console.error)
+              }
+              return (
+                <MenuItem
+                  key={item.uiFeature.uniqueIdentifier.value}
+                  onClick={onClickEditorItem}
+                  className={'flex-row-reversed py-2'}
+                >
+                  <div className="flex flex-grow items-center justify-between">
+                    <div className={'flex items-center'}>
+                      {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                      {item.uiFeature.displayName}
+                      {item.isLabs && (
+                        <Pill className="px-1.5 py-0.5" style="success">
+                          Labs
+                        </Pill>
+                      )}
                     </div>
-                  </MenuItem>
-                )
-              })}
-            </div>
-          </Fragment>
+                    {!item.isEntitled && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+                  </div>
+                </MenuItem>
+              )
+            })}
+          </MenuSection>
         ))}
       </Menu>
       <ModalOverlay isOpen={showSuperImporter} close={closeCurrentSuperNoteImporter}>

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

@@ -25,7 +25,7 @@ const ChangeMultipleButton = ({ application, notesController }: Props) => {
         disableClickOutside={disableClickOutside}
         anchorElement={changeButtonRef}
         open={isChangeMenuOpen}
-        className="pt-2 md:pt-0"
+        className="md:pb-1"
       >
         <ChangeEditorMultipleMenu
           application={application}