refactor: menu items (#2057)

2022-11-27 22:53:30 +05:30
parent 8145cdb8ac
commit 3c91b0cb17
24 changed files with 291 additions and 352 deletions
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -8,20 +8,15 @@ import Popover from '../Popover/Popover'
 import { IconType } from '@standardnotes/snjs'
 import { getTitleForLinkedTag } from '@/Utils/Items/Display/getTitleForLinkedTag'
 import { useApplication } from '../ApplicationView/ApplicationProvider'
+import MenuItem from '../Menu/MenuItem'

 type Props = {
  navigationController: NavigationController
  notesController: NotesController
-  className: string
  iconClassName: string
 }

-const AddTagOption: FunctionComponent<Props> = ({
-  navigationController,
-  notesController,
-  className,
-  iconClassName,
-}) => {
+const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesController, iconClassName }) => {
  const application = useApplication()
  const menuContainerRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)
@@ -34,7 +29,8 @@ const AddTagOption: FunctionComponent<Props> = ({

  return (
    <div ref={menuContainerRef}>
-      <button
+      <MenuItem
+        className="justify-between"
        onClick={toggleMenu}
        onKeyDown={(event) => {
          if (event.key === KeyboardKey.Escape) {
@@ -42,14 +38,13 @@ const AddTagOption: FunctionComponent<Props> = ({
          }
        }}
        ref={buttonRef}
-        className={className}
      >
        <div className="flex items-center">
          <Icon type="hashtag" className={`${iconClassName} mr-2 text-neutral`} />
          Add tag
        </div>
        <Icon type="chevron-right" className="text-neutral" />
-      </button>
+      </MenuItem>
      <Popover
        togglePopover={toggleMenu}
        anchorElement={buttonRef.current}
@@ -59,9 +54,8 @@ const AddTagOption: FunctionComponent<Props> = ({
        className="py-2"
      >
        {navigationController.tags.map((tag) => (
-          <button
+          <MenuItem
            key={tag.uuid}
-            className={`max-w-80 ${className.replace('justify-between', 'justify-start')}`}
            onClick={() => {
              notesController.isTagInSelectedNotes(tag)
                ? notesController.removeTagFromSelectedNotes(tag).catch(console.error)
@@ -81,7 +75,7 @@ const AddTagOption: FunctionComponent<Props> = ({
            >
              {getTitleForLinkedTag(tag, application)?.longTitle}
            </span>
-          </button>
+          </MenuItem>
        ))}
      </Popover>
    </div>
--- a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -6,20 +6,15 @@ import Icon from '@/Components/Icon/Icon'
 import ChangeEditorMenu from '@/Components/ChangeEditor/ChangeEditorMenu'
 import Popover from '../Popover/Popover'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import MenuItem from '../Menu/MenuItem'

 type ChangeEditorOptionProps = {
  application: WebApplication
  note: SNNote
-  className: string
  iconClassName: string
 }

-const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
-  application,
-  note,
-  className,
-  iconClassName,
-}) => {
+const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ application, note, iconClassName }) => {
  const [isOpen, setIsOpen] = useState(false)
  const menuContainerRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)
@@ -35,7 +30,8 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({

  return (
    <div ref={menuContainerRef}>
-      <button
+      <MenuItem
+        className="justify-between"
        onClick={toggleMenu}
        onKeyDown={(event) => {
          if (event.key === KeyboardKey.Escape) {
@@ -43,7 +39,6 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
          }
        }}
        ref={buttonRef}
-        className={className}
      >
        <div className="flex items-center">
          <Icon type="dashboard" className={`${iconClassName} mr-2 text-neutral`} />
@@ -53,7 +48,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
          {shortcut && <KeyboardShortcutIndicator className={'mr-2'} shortcut={shortcut} />}
          <Icon type="chevron-right" className="text-neutral" />
        </div>
-      </button>
+      </MenuItem>
      <Popover
        align="start"
        anchorElement={buttonRef.current}
--- a/packages/web/src/javascripts/Components/NotesOptions/ClassNames.ts
+++ b/packages/web/src/javascripts/Components/NotesOptions/ClassNames.ts
@@ -1,13 +1,3 @@
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
-import { classNames } from '@standardnotes/utils'
-
-export const menuItemTextClassNames = 'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item'
-
-export const menuItemClassNames = classNames(
-  menuItemTextClassNames,
-  'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
-)
-
-export const menuItemSwitchClassNames = classNames(menuItemTextClassNames, menuItemClassNames, 'justify-between')

 export const iconClass = `text-neutral mr-2 ${MenuItemIconSize}`
--- a/packages/web/src/javascripts/Components/NotesOptions/DeletePermanentlyButton.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/DeletePermanentlyButton.tsx
@@ -1,19 +1,13 @@
 import Icon from '@/Components/Icon/Icon'
-import { classNames } from '@standardnotes/utils'
+import MenuItem from '../Menu/MenuItem'

 type DeletePermanentlyButtonProps = {
  onClick: () => void
 }

 export const DeletePermanentlyButton = ({ onClick }: DeletePermanentlyButtonProps) => (
-  <button
-    className={classNames(
-      'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item',
-      'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item',
-    )}
-    onClick={onClick}
-  >
+  <MenuItem onClick={onClick}>
    <Icon type="close" className="mr-2 text-danger" />
    <span className="text-danger">Delete permanently</span>
-  </button>
+  </MenuItem>
 )
--- a/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsOption.tsx
@@ -5,15 +5,15 @@ import Icon from '@/Components/Icon/Icon'
 import ListedActionsMenu from './ListedActionsMenu'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import Popover from '../../Popover/Popover'
+import MenuItem from '@/Components/Menu/MenuItem'

 type Props = {
  application: WebApplication
  note: SNNote
-  className: string
  iconClassName: string
 }

-const ListedActionsOption: FunctionComponent<Props> = ({ application, note, className, iconClassName }) => {
+const ListedActionsOption: FunctionComponent<Props> = ({ application, note, iconClassName }) => {
  const menuContainerRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)

@@ -31,7 +31,8 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note, clas

  return (
    <div ref={menuContainerRef}>
-      <button
+      <MenuItem
+        className="justify-between"
        onClick={toggleMenu}
        onKeyDown={(event) => {
          if (event.key === KeyboardKey.Escape) {
@@ -39,14 +40,13 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note, clas
          }
        }}
        ref={buttonRef}
-        className={className}
      >
        <div className="flex items-center">
          <Icon type="listed" className={`mr-2 text-neutral ${iconClassName}`} />
          Listed actions
        </div>
        <Icon type="chevron-right" className="text-neutral" />
-      </button>
+      </MenuItem>
      <Popover
        togglePopover={toggleMenu}
        anchorElement={buttonRef.current}
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -1,5 +1,4 @@
 import Icon from '@/Components/Icon/Icon'
-import Switch from '@/Components/Switch/Switch'
 import { observer } from 'mobx-react-lite'
 import { useState, useEffect, useMemo, useCallback } from 'react'
 import { NoteType, Platform, SNNote } from '@standardnotes/snjs'
@@ -22,7 +21,6 @@ import { getNoteBlob, getNoteFileName } from '@/Utils/NoteExportUtils'
 import { shareSelectedNotes } from '@/NativeMobileWeb/ShareSelectedNotes'
 import { downloadSelectedNotesOnAndroid } from '@/NativeMobileWeb/DownloadSelectedNotesOnAndroid'
 import ProtectedUnauthorizedLabel from '../ProtectedItemOverlay/ProtectedUnauthorizedLabel'
-import { classNames } from '@standardnotes/utils'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 import { NoteAttributes } from './NoteAttributes'
@@ -30,8 +28,10 @@ import { SpellcheckOptions } from './SpellcheckOptions'
 import { NoteSizeWarning } from './NoteSizeWarning'
 import { DeletePermanentlyButton } from './DeletePermanentlyButton'
 import { useCommandService } from '../ApplicationView/CommandProvider'
-import { menuItemClassNames, menuItemSwitchClassNames, iconClass } from './ClassNames'
+import { iconClass } from './ClassNames'
 import SuperNoteOptions from './SuperNoteOptions'
+import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
+import MenuItem from '../Menu/MenuItem'

 const iconSize = MenuItemIconSize
 const iconClassDanger = `text-danger mr-2 ${iconSize}`
@@ -160,132 +160,94 @@ const NotesOptions = ({
    return <ProtectedUnauthorizedLabel />
  }

-  const firstItemClass = 'pt-4'
-
  return (
    <>
      {notes.length === 1 && (
        <>
-          <button className={classNames(menuItemClassNames, firstItemClass)} onClick={openRevisionHistoryModal}>
-            <div className="flex w-full items-center justify-between">
-              <span className="flex">
-                <Icon type="history" className={iconClass} />
-                Note history
-              </span>
-              {historyShortcut && <KeyboardShortcutIndicator className={''} shortcut={historyShortcut} />}
-            </div>
-          </button>
+          <MenuItem onClick={openRevisionHistoryModal}>
+            <Icon type="history" className={iconClass} />
+            Note history
+            {historyShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={historyShortcut} />}
+          </MenuItem>
          <HorizontalSeparator classes="my-2" />
        </>
      )}
-      <button
-        className={menuItemSwitchClassNames}
-        onClick={() => {
-          notesController.setLockSelectedNotes(!locked)
+      <MenuSwitchButtonItem
+        checked={locked}
+        onChange={(locked) => {
+          notesController.setLockSelectedNotes(locked)
        }}
      >
-        <span className="flex items-center">
-          <Icon type="pencil-off" className={iconClass} />
-          Prevent editing
-        </span>
-        <Switch className="px-0" checked={locked} />
-      </button>
-      <button
-        className={menuItemSwitchClassNames}
-        onClick={() => {
+        <Icon type="pencil-off" className={iconClass} />
+        Prevent editing
+      </MenuSwitchButtonItem>
+      <MenuSwitchButtonItem
+        checked={!hidePreviews}
+        onChange={(hidePreviews) => {
          notesController.setHideSelectedNotePreviews(!hidePreviews)
        }}
      >
-        <span className="flex items-center">
-          <Icon type="rich-text" className={iconClass} />
-          Show preview
-        </span>
-        <Switch className="px-0" checked={!hidePreviews} />
-      </button>
-      <button
-        className={menuItemSwitchClassNames}
-        onClick={() => {
-          notesController.setProtectSelectedNotes(!protect).catch(console.error)
+        <Icon type="rich-text" className={iconClass} />
+        Show preview
+      </MenuSwitchButtonItem>
+      <MenuSwitchButtonItem
+        checked={protect}
+        onChange={(protect) => {
+          notesController.setProtectSelectedNotes(protect).catch(console.error)
        }}
      >
-        <span className="flex items-center">
-          <Icon type="lock" className={iconClass} />
-          Password protect
-        </span>
-        <Switch className="px-0" checked={protect} />
-      </button>
+        <Icon type="lock" className={iconClass} />
+        Password protect
+      </MenuSwitchButtonItem>
      {notes.length === 1 && (
        <>
          <HorizontalSeparator classes="my-2" />
-          <ChangeEditorOption
-            iconClassName={iconClass}
-            className={menuItemSwitchClassNames}
-            application={application}
-            note={notes[0]}
-          />
+          <ChangeEditorOption iconClassName={iconClass} application={application} note={notes[0]} />
        </>
      )}
      <HorizontalSeparator classes="my-2" />
      {navigationController.tagsCount > 0 && (
        <AddTagOption
          iconClassName={iconClass}
-          className={menuItemSwitchClassNames}
          navigationController={navigationController}
          notesController={notesController}
        />
      )}
-
-      <button
-        className={menuItemClassNames}
+      <MenuItem
        onClick={() => {
          notesController.setStarSelectedNotes(!starred)
        }}
      >
-        <div className="flex w-full items-center justify-between">
-          <span className="flex">
-            <Icon type="star" className={iconClass} />
-            {starred ? 'Unstar' : 'Star'}
-          </span>
-          {starShortcut && <KeyboardShortcutIndicator className={''} shortcut={starShortcut} />}
-        </div>
-      </button>
+        <Icon type="star" className={iconClass} />
+        {starred ? 'Unstar' : 'Star'}
+        {starShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={starShortcut} />}
+      </MenuItem>

      {unpinned && (
-        <button
-          className={menuItemClassNames}
+        <MenuItem
          onClick={() => {
            notesController.setPinSelectedNotes(true)
          }}
        >
-          <div className="flex w-full items-center justify-between">
-            <span className="flex">
-              <Icon type="pin" className={iconClass} />
-              Pin to top
-            </span>
-            {pinShortcut && <KeyboardShortcutIndicator className={''} shortcut={pinShortcut} />}
-          </div>
-        </button>
+          <Icon type="pin" className={iconClass} />
+          Pin to top
+          {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
+        </MenuItem>
      )}
      {pinned && (
-        <button
-          className={menuItemClassNames}
+        <MenuItem
          onClick={() => {
            notesController.setPinSelectedNotes(false)
          }}
        >
-          <div className="flex w-full items-center justify-between">
-            <span className="flex">
-              <Icon type="unpin" className={iconClass} />
-              Unpin
-            </span>
-            {pinShortcut && <KeyboardShortcutIndicator className={''} shortcut={pinShortcut} />}
-          </div>
-        </button>
+          <Icon type="unpin" className={iconClass} />
+          Unpin
+          {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
+        </MenuItem>
      )}
      {notes[0].noteType !== NoteType.Super && (
        <>
-          <button
-            className={menuItemClassNames}
+          <MenuItem
            onClick={() => {
              application.isNativeMobileWeb()
                ? void shareSelectedNotes(application, notes)
@@ -294,22 +256,21 @@ const NotesOptions = ({
          >
            <Icon type={application.platform === Platform.Android ? 'share' : 'download'} className={iconClass} />
            {application.platform === Platform.Android ? 'Share' : 'Export'}
-          </button>
+          </MenuItem>
          {application.platform === Platform.Android && (
-            <button className={menuItemClassNames} onClick={() => downloadSelectedNotesOnAndroid(application, notes)}>
+            <MenuItem onClick={() => downloadSelectedNotesOnAndroid(application, notes)}>
              <Icon type="download" className={iconClass} />
              Export
-            </button>
+            </MenuItem>
          )}
        </>
      )}
-      <button className={menuItemClassNames} onClick={duplicateSelectedItems}>
+      <MenuItem onClick={duplicateSelectedItems}>
        <Icon type="copy" className={iconClass} />
        Duplicate
-      </button>
+      </MenuItem>
      {unarchived && (
-        <button
-          className={menuItemClassNames}
+        <MenuItem
          onClick={async () => {
            await notesController.setArchiveSelectedNotes(true).catch(console.error)
            closeMenuAndToggleNotesList()
@@ -317,11 +278,10 @@ const NotesOptions = ({
        >
          <Icon type="archive" className={iconClassWarning} />
          <span className="text-warning">Archive</span>
-        </button>
+        </MenuItem>
      )}
      {archived && (
-        <button
-          className={menuItemClassNames}
+        <MenuItem
          onClick={async () => {
            await notesController.setArchiveSelectedNotes(false).catch(console.error)
            closeMenuAndToggleNotesList()
@@ -329,7 +289,7 @@ const NotesOptions = ({
        >
          <Icon type="unarchive" className={iconClassWarning} />
          <span className="text-warning">Unarchive</span>
-        </button>
+        </MenuItem>
      )}
      {notTrashed &&
        (altKeyDown ? (
@@ -340,8 +300,7 @@ const NotesOptions = ({
            }}
          />
        ) : (
-          <button
-            className={menuItemClassNames}
+          <MenuItem
            onClick={async () => {
              await notesController.setTrashSelectedNotes(true)
              closeMenuAndToggleNotesList()
@@ -349,12 +308,11 @@ const NotesOptions = ({
          >
            <Icon type="trash" className={iconClassDanger} />
            <span className="text-danger">Move to trash</span>
-          </button>
+          </MenuItem>
        ))}
      {trashed && (
        <>
-          <button
-            className={menuItemClassNames}
+          <MenuItem
            onClick={async () => {
              await notesController.setTrashSelectedNotes(false)
              closeMenuAndToggleNotesList()
@@ -362,15 +320,14 @@ const NotesOptions = ({
          >
            <Icon type="restore" className={iconClassSuccess} />
            <span className="text-success">Restore</span>
-          </button>
+          </MenuItem>
          <DeletePermanentlyButton
            onClick={async () => {
              await notesController.deleteNotesPermanently()
              closeMenuAndToggleNotesList()
            }}
          />
-          <button
-            className={menuItemClassNames}
+          <MenuItem
            onClick={async () => {
              await notesController.emptyTrash()
              closeMenuAndToggleNotesList()
@@ -383,7 +340,7 @@ const NotesOptions = ({
                <div className="text-xs">{notesController.trashedNotesCount} notes in Trash</div>
              </div>
            </div>
-          </button>
+          </MenuItem>
        </>
      )}

@@ -398,21 +355,11 @@ const NotesOptions = ({
          )}
          <HorizontalSeparator classes="my-2" />

-          <ListedActionsOption
-            iconClassName={iconClass}
-            className={menuItemSwitchClassNames}
-            application={application}
-            note={notes[0]}
-          />
+          <ListedActionsOption iconClassName={iconClass} application={application} note={notes[0]} />

          <HorizontalSeparator classes="my-2" />

-          <SpellcheckOptions
-            className={menuItemSwitchClassNames}
-            editorForNote={editorForNote}
-            notesController={notesController}
-            note={notes[0]}
-          />
+          <SpellcheckOptions editorForNote={editorForNote} notesController={notesController} note={notes[0]} />

          <HorizontalSeparator classes="my-2" />

--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -8,6 +8,7 @@ import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalCo
 import Popover from '../Popover/Popover'
 import { LinkingController } from '@/Controllers/LinkingController'
 import RoundIconButton from '../Button/RoundIconButton'
+import Menu from '../Menu/Menu'

 type Props = {
  application: WebApplication
@@ -50,17 +51,19 @@ const NotesOptionsPanel = ({
        togglePopover={toggleMenu}
        anchorElement={buttonRef.current}
        open={isOpen}
-        className="select-none"
+        className="select-none md:pt-2"
      >
-        <NotesOptions
-          application={application}
-          navigationController={navigationController}
-          notesController={notesController}
-          linkingController={linkingController}
-          historyModalController={historyModalController}
-          requestDisableClickOutside={handleDisableClickOutsideRequest}
-          closeMenu={toggleMenu}
-        />
+        <Menu a11yLabel="Note options menu" isOpen={isOpen}>
+          <NotesOptions
+            application={application}
+            navigationController={navigationController}
+            notesController={notesController}
+            linkingController={linkingController}
+            historyModalController={historyModalController}
+            requestDisableClickOutside={handleDisableClickOutsideRequest}
+            closeMenu={toggleMenu}
+          />
+        </Menu>
      </Popover>
    </>
  )
--- a/packages/web/src/javascripts/Components/NotesOptions/SpellcheckOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/SpellcheckOptions.tsx
@@ -1,16 +1,15 @@
 import Icon from '@/Components/Icon/Icon'
-import Switch from '@/Components/Switch/Switch'
 import { FunctionComponent } from 'react'
 import { SNComponent, SNNote } from '@standardnotes/snjs'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { iconClass } from './ClassNames'
+import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'

 export const SpellcheckOptions: FunctionComponent<{
  editorForNote: SNComponent | undefined
  notesController: NotesController
  note: SNNote
-  className: string
-}> = ({ editorForNote, notesController, note, className }) => {
+}> = ({ editorForNote, notesController, note }) => {
  const spellcheckControllable = Boolean(!editorForNote || editorForNote.package_info.spellcheckControl)
  const noteSpellcheck = !spellcheckControllable
    ? true
@@ -20,19 +19,16 @@ export const SpellcheckOptions: FunctionComponent<{

  return (
    <div className="flex flex-col">
-      <button
-        className={className}
-        onClick={() => {
+      <MenuSwitchButtonItem
+        checked={Boolean(noteSpellcheck)}
+        onChange={() => {
          notesController.toggleGlobalSpellcheckForNote(note).catch(console.error)
        }}
        disabled={!spellcheckControllable}
      >
-        <span className="flex items-center">
-          <Icon type="notes" className={iconClass} />
-          Spellcheck
-        </span>
-        <Switch className="px-0" checked={noteSpellcheck} disabled={!spellcheckControllable} />
-      </button>
+        <Icon type="notes" className={iconClass} />
+        Spellcheck
+      </MenuSwitchButtonItem>
      {!spellcheckControllable && (
        <p className="px-3 py-1.5 text-xs">Spellcheck cannot be controlled for this editor.</p>
      )}
--- a/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
@@ -13,7 +13,7 @@ import Menu from '../Menu/Menu'
 import MenuItem from '../Menu/MenuItem'
 import Popover from '../Popover/Popover'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
-import { iconClass, menuItemClassNames, menuItemSwitchClassNames } from './ClassNames'
+import { iconClass } from './ClassNames'

 type Props = {
  note: SNNote
@@ -33,19 +33,14 @@ const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }

      <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Super</div>

-      <button className={menuItemClassNames} onClick={enableSuperMarkdownPreview}>
-        <div className="flex w-full items-center justify-between">
-          <span className="flex">
-            <Icon type="markdown" className={iconClass} />
-            Show Markdown
-          </span>
-          {markdownShortcut && <KeyboardShortcutIndicator shortcut={markdownShortcut} />}
-        </div>
-      </button>
+      <MenuItem onClick={enableSuperMarkdownPreview}>
+        <Icon type="markdown" className={iconClass} />
+        Show Markdown
+        {markdownShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={markdownShortcut} />}
+      </MenuItem>

-      <button
+      <MenuItem
        ref={exportButtonRef}
-        className={menuItemSwitchClassNames}
        onClick={() => {
          setIsExportMenuOpen((open) => !open)
        }}
@@ -54,8 +49,8 @@ const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }
          <Icon type="download" className={iconClass} />
          Export
        </div>
-        <Icon type="chevron-right" className="text-neutral" />
-      </button>
+        <Icon type="chevron-right" className="ml-auto text-neutral" />
+      </MenuItem>
      <Popover
        side="left"
        align="start"