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

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

Browse Source
This commit is contained in:
Aman Harwara
2023-10-18 21:31:28 +05:30
committed by GitHub
parent 6a40f611f6
commit 2e3ac3ce57
32 changed files with 615 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/Menu/Menu.tsx
View File

@@ -68,7 +68,7 @@ const Menu = forwardRef(
return (
<menu
className={`m-0 list-none pl-0 focus:shadow-none ${className}`}
className={`m-0 list-none px-4 focus:shadow-none md:px-0 ${className}`}
onKeyDown={handleKeyDown}
ref={mergeRefs([menuElementRef, forwardedRef])}
style={style}

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

@@ -40,7 +40,7 @@ const MenuItem = forwardRef(
role="menuitem"
tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
className={classNames(
'flex w-full cursor-pointer select-none border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
'flex w-full cursor-pointer select-none border-0 bg-transparent px-3 py-2.5 text-left md:py-1.5',
'text-mobile-menu-item text-text enabled:hover:bg-contrast enabled:hover:text-foreground',
'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
'disabled:cursor-not-allowed disabled:opacity-60',

2
packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
View File

@@ -74,7 +74,7 @@ const MenuRadioButtonItem = forwardRef(
role="menuitemradio"
tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
className={classNames(
'flex w-full cursor-pointer gap-2 border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
'flex w-full cursor-pointer gap-2 border-0 bg-transparent px-3 py-2.5 text-left md:py-1.5',
'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
className,

26
packages/web/src/javascripts/Components/Menu/MenuSection.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { classNames } from '@standardnotes/snjs'
import { ReactNode } from 'react'
const MenuSection = ({
title,
className,
children,
}: {
title?: ReactNode
className?: string
children: ReactNode
}) => {
return (
<div
className={classNames(
'my-4 md:my-2 md:border-b md:border-border md:pb-2 md:last:mb-0 md:last:border-b-0 md:last:pb-0 md:translucent-ui:border-[--popover-border-color]',
className,
)}
>
{title && <div className="px-3 py-1 text-sm font-semibold uppercase text-text lg:text-xs">{title}</div>}
<div className="divide-y divide-passive-3 rounded bg-passive-4 md:divide-none md:bg-transparent">{children}</div>
</div>
)
}
export default MenuSection

2
packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
View File

@@ -36,7 +36,7 @@ const MenuSwitchButtonItem = forwardRef(
disabled={disabled}
ref={ref}
className={classNames(
'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5',
'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 md:py-1.5',
'text-left text-text focus:bg-info-backdrop focus:shadow-none enabled:hover:bg-contrast enabled:hover:text-foreground',
'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
'disabled:cursor-not-allowed disabled:opacity-60',