rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: increase context menu item font size on mobile (#1738)

Browse Source
This commit is contained in:
Aman Harwara
2022-10-05 00:28:37 +05:30
committed by GitHub
parent b50dc861cd
commit 1c603161a5
12 changed files with 60 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
View File

@@ -98,7 +98,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
onBlur={handleFileNameInputBlur} onBlur={handleFileNameInputBlur}
/> />
) : ( ) : (
<div className="break-word mb-1 text-sm"> <div className="break-word mb-1 text-mobile-menu-item md:text-sm">
<span className="align-middle">{file.name}</span> <span className="align-middle">{file.name}</span>
{file.protected && ( {file.protected && (
<Icon type="lock-filled" className="ml-2 inline align-middle text-neutral" size="small" /> <Icon type="lock-filled" className="ml-2 inline align-middle text-neutral" size="small" />

14
packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
View File

@@ -40,7 +40,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button> </button>
<Popover anchorElement={menuButtonRef.current} open={isOpen} togglePopover={toggleMenu} className="py-2"> <Popover anchorElement={menuButtonRef.current} open={isOpen} togglePopover={toggleMenu} className="py-2">
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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-sm"
onClick={() => { onClick={() => {
previewHandler(file) previewHandler(file)
closeMenu() closeMenu()
@@ -51,7 +51,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button> </button>
{isAttachedToNote ? ( {isAttachedToNote ? (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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-sm"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.DetachFileToNote, type: PopoverFileItemActionType.DetachFileToNote,
@@ -65,7 +65,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button> </button>
) : ( ) : (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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-sm"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote, type: PopoverFileItemActionType.AttachFileToNote,
@@ -80,7 +80,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
)} )}
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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-sm"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.ToggleFileProtection, type: PopoverFileItemActionType.ToggleFileProtection,
@@ -103,7 +103,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button> </button>
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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-sm"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.DownloadFile, type: PopoverFileItemActionType.DownloadFile,
@@ -116,7 +116,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
Download Download
</button> </button>
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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-sm"
onClick={() => { onClick={() => {
setIsRenamingFile(true) setIsRenamingFile(true)
closeMenu() closeMenu()
@@ -126,7 +126,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
Rename Rename
</button> </button>
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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-sm"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.DeleteFile, type: PopoverFileItemActionType.DeleteFile,

62
packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
View File

@@ -1,8 +1,6 @@
import { FunctionComponent, useCallback, useMemo } from 'react' import { FunctionComponent, useCallback, useMemo } from 'react'
import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction' import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
import Icon from '@/Components/Icon/Icon' import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { observer } from 'mobx-react-lite' import { observer } from 'mobx-react-lite'
import { FilesController } from '@/Controllers/FilesController' import { FilesController } from '@/Controllers/FilesController'
import { SelectedItemsController } from '@/Controllers/SelectedItemsController' import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
@@ -10,6 +8,8 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
import { formatSizeToReadableString } from '@standardnotes/filepicker' import { formatSizeToReadableString } from '@standardnotes/filepicker'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider' import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata' import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
import MenuItem from '../Menu/MenuItem'
import { MenuItemType } from '../Menu/MenuItemType'
type Props = { type Props = {
closeMenu: () => void closeMenu: () => void
@@ -78,74 +78,56 @@ const FileMenuOptions: FunctionComponent<Props> = ({
return ( return (
<> <>
<button <MenuItem onClick={onPreview}>
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onPreview}
>
<Icon type="file" className="mr-2 text-neutral" /> <Icon type="file" className="mr-2 text-neutral" />
Preview file Preview file
</button> </MenuItem>
{selectedFiles.length === 1 && ( {selectedFiles.length === 1 && (
<> <>
{isFileAttachedToNote ? ( {isFileAttachedToNote ? (
<button <MenuItem onClick={onDetach}>
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onDetach}
>
<Icon type="link-off" className="mr-2 text-neutral" /> <Icon type="link-off" className="mr-2 text-neutral" />
Detach from note Detach from note
</button> </MenuItem>
) : shouldShowAttachOption ? ( ) : shouldShowAttachOption ? (
<button <MenuItem onClick={onAttach}>
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onAttach}
>
<Icon type="link" className="mr-2 text-neutral" /> <Icon type="link" className="mr-2 text-neutral" />
Attach to note Attach to note
</button> </MenuItem>
) : null} ) : null}
</> </>
)} )}
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <MenuItem
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" type={MenuItemType.SwitchButton}
onClick={() => { checked={hasProtectedFiles}
void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles) onChange={(hasProtectedFiles) => {
void filesController.setProtectionForFiles(hasProtectedFiles, selectionController.selectedFiles)
}} }}
> >
<span className="flex items-center"> <Icon type="password" className="mr-2 text-neutral" />
<Icon type="password" className="mr-2 text-neutral" /> Password protection
Password protection </MenuItem>
</span>
<Switch
className="pointer-events-none px-0"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
checked={hasProtectedFiles}
/>
</button>
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <MenuItem
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
void filesController.downloadFiles(selectionController.selectedFiles) void filesController.downloadFiles(selectionController.selectedFiles)
}} }}
> >
<Icon type="download" className="mr-2 text-neutral" /> <Icon type="download" className="mr-2 text-neutral" />
Download Download
</button> </MenuItem>
{shouldShowRenameOption && ( {shouldShowRenameOption && (
<button <MenuItem
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
renameToggleCallback?.(true) renameToggleCallback?.(true)
}} }}
> >
<Icon type="pencil" className="mr-2 text-neutral" /> <Icon type="pencil" className="mr-2 text-neutral" />
Rename Rename
</button> </MenuItem>
)} )}
<button <MenuItem
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
closeMenuAndToggleFilesList() closeMenuAndToggleFilesList()
void filesController.deleteFilesPermanently(selectionController.selectedFiles) void filesController.deleteFilesPermanently(selectionController.selectedFiles)
@@ -153,7 +135,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
> >
<Icon type="trash" className="mr-2 text-danger" /> <Icon type="trash" className="mr-2 text-danger" />
<span className="text-danger">Delete permanently</span> <span className="text-danger">Delete permanently</span>
</button> </MenuItem>
<HorizontalSeparator classes="my-2" /> <HorizontalSeparator classes="my-2" />
<div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral"> <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
{!hasSelectedMultipleFiles && ( {!hasSelectedMultipleFiles && (

6
packages/web/src/javascripts/Components/Menu/MenuItem.tsx
View File

@@ -8,8 +8,8 @@ import { MenuItemType } from './MenuItemType'
import RadioIndicator from '../RadioIndicator/RadioIndicator' import RadioIndicator from '../RadioIndicator/RadioIndicator'
type MenuItemProps = { type MenuItemProps = {
type: MenuItemType
children: ReactNode children: ReactNode
type?: MenuItemType
onClick?: MouseEventHandler<HTMLButtonElement> onClick?: MouseEventHandler<HTMLButtonElement>
onChange?: SwitchProps['onChange'] onChange?: SwitchProps['onChange']
onBlur?: (event: { relatedTarget: EventTarget | null }) => void onBlur?: (event: { relatedTarget: EventTarget | null }) => void
@@ -28,7 +28,7 @@ const MenuItem = forwardRef(
onChange, onChange,
onBlur, onBlur,
className = '', className = '',
type, type = MenuItemType.IconButton,
checked, checked,
icon, icon,
iconClassName, iconClassName,
@@ -59,7 +59,7 @@ const MenuItem = forwardRef(
ref={ref} ref={ref}
role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'} role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
className={`flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none ${className}`} className={`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 ${className}`}
onClick={onClick} onClick={onClick}
onBlur={onBlur} onBlur={onBlur}
{...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})} {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}

6
packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx
View File

@@ -33,7 +33,7 @@ const ListItem = ({
return isSearching ? ( return isSearching ? (
<button <button
onClick={handleSearchResultClick} onClick={handleSearchResultClick}
className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop" className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
> >
{splitQueryInString(longTitle, autocompleteSearchQuery).map((substring, index) => ( {splitQueryInString(longTitle, autocompleteSearchQuery).map((substring, index) => (
<span <span
@@ -49,7 +49,7 @@ const ListItem = ({
))} ))}
</button> </button>
) : ( ) : (
<div className="max-w-80 flex w-full items-center justify-between border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text"> <div className="max-w-80 flex w-full items-center justify-between border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text md:text-menu-item">
<span className="overflow-hidden overflow-ellipsis whitespace-nowrap">{longTitle}</span> <span className="overflow-hidden overflow-ellipsis whitespace-nowrap">{longTitle}</span>
<button <button
onClick={handleNoteTagRemove} onClick={handleNoteTagRemove}
@@ -150,7 +150,7 @@ const NoteTagsPanel = ({
onClick={async () => { onClick={async () => {
await noteTagsController.createAndAddNewTag() await noteTagsController.createAndAddNewTag()
}} }}
className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop" className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
> >
<span>Create new tag:</span> <span>Create new tag:</span>
<span className="ml-2 flex items-center rounded bg-contrast py-1 pl-1 pr-2 text-xs text-text"> <span className="ml-2 flex items-center rounded bg-contrast py-1 pl-1 pr-2 text-xs text-text">

4
packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
View File

@@ -33,7 +33,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
} }
}} }}
ref={buttonRef} ref={buttonRef}
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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"
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="hashtag" className="mr-2 text-neutral" /> <Icon type="hashtag" className="mr-2 text-neutral" />
@@ -52,7 +52,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
{navigationController.tags.map((tag) => ( {navigationController.tags.map((tag) => (
<button <button
key={tag.uuid} key={tag.uuid}
className="max-w-80 flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="max-w-80 flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 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={() => {
notesController.isTagInSelectedNotes(tag) notesController.isTagInSelectedNotes(tag)
? notesController.removeTagFromSelectedNotes(tag).catch(console.error) ? notesController.removeTagFromSelectedNotes(tag).catch(console.error)

2
packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
View File

@@ -30,7 +30,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
} }
}} }}
ref={buttonRef} ref={buttonRef}
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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"
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="dashboard" className="mr-2 text-neutral" /> <Icon type="dashboard" className="mr-2 text-neutral" />

2
packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
View File

@@ -31,7 +31,7 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
} }
}} }}
ref={buttonRef} ref={buttonRef}
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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"
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="listed" className="mr-2 text-neutral" /> <Icon type="listed" className="mr-2 text-neutral" />

32
packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
View File

@@ -25,7 +25,7 @@ type DeletePermanentlyButtonProps = {
const DeletePermanentlyButton = ({ onClick }: DeletePermanentlyButtonProps) => ( const DeletePermanentlyButton = ({ onClick }: DeletePermanentlyButtonProps) => (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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} onClick={onClick}
> >
<Icon type="close" className="mr-2 text-danger" /> <Icon type="close" className="mr-2 text-danger" />
@@ -137,7 +137,7 @@ const SpellcheckOptions: FunctionComponent<{
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1 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={() => {
notesController.toggleGlobalSpellcheckForNote(note).catch(console.error) notesController.toggleGlobalSpellcheckForNote(note).catch(console.error)
}} }}
@@ -271,7 +271,7 @@ const NotesOptions = ({
{notes.length === 1 && ( {notes.length === 1 && (
<> <>
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={openRevisionHistoryModal} onClick={openRevisionHistoryModal}
> >
<Icon type="history" className={iconClass} /> <Icon type="history" className={iconClass} />
@@ -281,7 +281,7 @@ const NotesOptions = ({
</> </>
)} )}
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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={() => {
notesController.setLockSelectedNotes(!locked) notesController.setLockSelectedNotes(!locked)
}} }}
@@ -293,7 +293,7 @@ const NotesOptions = ({
<Switch className="px-0" checked={locked} /> <Switch className="px-0" checked={locked} />
</button> </button>
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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={() => {
notesController.setHideSelectedNotePreviews(!hidePreviews) notesController.setHideSelectedNotePreviews(!hidePreviews)
}} }}
@@ -305,7 +305,7 @@ const NotesOptions = ({
<Switch className="px-0" checked={!hidePreviews} /> <Switch className="px-0" checked={!hidePreviews} />
</button> </button>
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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={() => {
notesController.setProtectSelectedNotes(!protect).catch(console.error) notesController.setProtectSelectedNotes(!protect).catch(console.error)
}} }}
@@ -332,7 +332,7 @@ const NotesOptions = ({
)} )}
{unpinned && ( {unpinned && (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={() => {
notesController.setPinSelectedNotes(true) notesController.setPinSelectedNotes(true)
}} }}
@@ -343,7 +343,7 @@ const NotesOptions = ({
)} )}
{pinned && ( {pinned && (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={() => {
notesController.setPinSelectedNotes(false) notesController.setPinSelectedNotes(false)
}} }}
@@ -353,7 +353,7 @@ const NotesOptions = ({
</button> </button>
)} )}
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={() => {
application.isNativeMobileWeb() ? shareSelectedNotes(application, notes) : downloadSelectedItems() application.isNativeMobileWeb() ? shareSelectedNotes(application, notes) : downloadSelectedItems()
}} }}
@@ -363,7 +363,7 @@ const NotesOptions = ({
</button> </button>
{application.platform === Platform.Android && ( {application.platform === Platform.Android && (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={() => downloadSelectedNotesOnAndroid(application, notes)} onClick={() => downloadSelectedNotesOnAndroid(application, notes)}
> >
<Icon type="download" className={iconClass} /> <Icon type="download" className={iconClass} />
@@ -371,7 +371,7 @@ const NotesOptions = ({
</button> </button>
)} )}
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={duplicateSelectedItems} onClick={duplicateSelectedItems}
> >
<Icon type="copy" className={iconClass} /> <Icon type="copy" className={iconClass} />
@@ -379,7 +379,7 @@ const NotesOptions = ({
</button> </button>
{unarchived && ( {unarchived && (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={async () => { onClick={async () => {
await notesController.setArchiveSelectedNotes(true).catch(console.error) await notesController.setArchiveSelectedNotes(true).catch(console.error)
closeMenuAndToggleNotesList() closeMenuAndToggleNotesList()
@@ -391,7 +391,7 @@ const NotesOptions = ({
)} )}
{archived && ( {archived && (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={async () => { onClick={async () => {
await notesController.setArchiveSelectedNotes(false).catch(console.error) await notesController.setArchiveSelectedNotes(false).catch(console.error)
closeMenuAndToggleNotesList() closeMenuAndToggleNotesList()
@@ -411,7 +411,7 @@ const NotesOptions = ({
/> />
) : ( ) : (
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={async () => { onClick={async () => {
await notesController.setTrashSelectedNotes(true) await notesController.setTrashSelectedNotes(true)
closeMenuAndToggleNotesList() closeMenuAndToggleNotesList()
@@ -424,7 +424,7 @@ const NotesOptions = ({
{trashed && ( {trashed && (
<> <>
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={async () => { onClick={async () => {
await notesController.setTrashSelectedNotes(false) await notesController.setTrashSelectedNotes(false)
closeMenuAndToggleNotesList() closeMenuAndToggleNotesList()
@@ -440,7 +440,7 @@ const NotesOptions = ({
}} }}
/> />
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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={async () => { onClick={async () => {
await notesController.emptyTrash() await notesController.emptyTrash()
closeMenuAndToggleNotesList() closeMenuAndToggleNotesList()

4
packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
View File

@@ -142,7 +142,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
<div ref={mainRef}> <div ref={mainRef}>
<div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div> <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
<button <button
className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="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-sm"
onClick={toggleDefaultTheme} onClick={toggleDefaultTheme}
ref={defaultThemeButtonRef} ref={defaultThemeButtonRef}
> >
@@ -156,7 +156,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
<div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div> <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
{toggleableComponents.map((component) => ( {toggleableComponents.map((component) => (
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between 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-sm"
onClick={() => { onClick={() => {
toggleComponent(component) toggleComponent(component)
}} }}

2
packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
View File

@@ -49,7 +49,7 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
return ( return (
<button <button
className={ className={
'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2' 'group flex w-full cursor-pointer items-center justify-between 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 disabled:bg-default disabled:text-passive-2 md:text-sm'
} }
disabled={item.identifier === FeatureIdentifier.DynamicTheme && isMobile} disabled={item.identifier === FeatureIdentifier.DynamicTheme && isMobile}
onClick={toggleTheme} onClick={toggleTheme}

1
packages/web/tailwind.config.js
View File

@@ -83,6 +83,7 @@ module.exports = {
}, },
fontSize: { fontSize: {
'menu-item': '0.813rem', 'menu-item': '0.813rem',
'mobile-menu-item': '0.9rem',
editor: 'var(--sn-stylekit-font-size-editor)', editor: 'var(--sn-stylekit-font-size-editor)',
}, },
screens: { screens: {