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

chore: fix mobile menu colors [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2023-10-26 23:39:05 +05:30
parent 54a4c86a81
commit aa31fe483a
5 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@ const MenuItem = forwardRef(
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.5 text-left md:py-1.5',
'text-mobile-menu-item text-text enabled:hover:bg-contrast enabled:hover:text-foreground',
'text-mobile-menu-item text-text enabled:hover:bg-passive-3 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',
className,

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

@@ -75,7 +75,7 @@ const MenuRadioButtonItem = forwardRef(
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.5 text-left md:py-1.5',
'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
'text-mobile-menu-item text-text hover:bg-passive-3 hover:text-foreground',
'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
className,
className?.includes('items-') ? '' : 'items-center',

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

@@ -18,7 +18,7 @@ const MenuSection = ({
)}
>
{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 overflow-hidden rounded-md bg-passive-4 md:divide-none md:rounded-none md:bg-transparent">
<div className="divide-y divide-passive-3 overflow-hidden rounded-md bg-default md:divide-none md:rounded-none md:bg-transparent">
{children}
</div>
</div>

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

@@ -37,7 +37,7 @@ const MenuSwitchButtonItem = forwardRef(
ref={ref}
className={classNames(
'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-left text-text focus:bg-info-backdrop focus:shadow-none enabled:hover:bg-passive-3 enabled:hover:text-foreground',
'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
'disabled:cursor-not-allowed disabled:opacity-60',
className,

16
packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
View File

@@ -171,22 +171,30 @@ const MobilePopoverContent = ({
<div
ref={mergeRefs([setPopoverElement, addCloseMethod])}
className={classNames(
'z-1 absolute bottom-0 flex max-h-[calc(100%_-_max(var(--safe-area-inset-top),2rem))] min-h-[40%] w-full flex-col rounded-t-xl bg-default pb-safe-bottom',
'z-1 absolute bottom-0 flex max-h-[calc(100%_-_max(var(--safe-area-inset-top),2rem))] min-h-[40%] w-full flex-col rounded-t-xl bg-passive-5 pb-safe-bottom',
forceFullHeightOnMobile && 'h-full',
)}
style={{
boxShadow: '0px -4px 8px rgba(0, 0, 0, 0.075)',
}}
id={'popover/' + id}
data-popover={id}
data-mobile-popover
>
<div className="mx-auto mt-2 min-h-[0.3rem] w-12 rounded-full bg-passive-2" />
<MobileModalHeader className="border-b border-border px-2 py-1.5 text-lg">
<div className="w-full rounded-t-xl bg-default">
<div className="mx-auto mt-2 min-h-[0.3rem] w-12 rounded-full bg-passive-2" />
</div>
<MobileModalHeader className="border-b border-border bg-default px-2 py-1.5 text-lg">
<div />
<div className="flex items-center justify-center font-semibold">{title}</div>
<MobileModalAction type="primary" slot="right" action={requestClose}>
Done
</MobileModalAction>
</MobileModalHeader>
<div className={classNames('h-full overflow-y-auto overscroll-none', className)} ref={scrollContainerRef}>
<div
className={classNames('h-full overflow-y-auto overscroll-none bg-passive-5', className)}
ref={scrollContainerRef}
>
{children}
</div>
</div>