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

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

@@ -19,7 +19,7 @@ import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
import { useApplication } from '../ApplicationProvider'
import { GetAllThemesUseCase } from '@standardnotes/ui-services'
import MenuItemSeparator from '../Menu/MenuItemSeparator'
import MenuSection from '../Menu/MenuSection'
type MenuProps = {
closeMenu: () => void
@@ -117,8 +117,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
return (
<Menu a11yLabel="Quick settings menu" isOpen>
{editorStackComponents.length > 0 && (
<>
<div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
<MenuSection title="Tools">
{editorStackComponents.map((component) => (
<MenuSwitchButtonItem
onChange={() => {
@@ -131,17 +130,17 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
{component.displayName}
</MenuSwitchButtonItem>
))}
<MenuItemSeparator />
</>
</MenuSection>
)}
<div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
<MenuRadioButtonItem checked={defaultThemeOn} onClick={toggleDefaultTheme} ref={defaultThemeButtonRef}>
Default
</MenuRadioButtonItem>
{themes.map((theme) => (
<ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier.value} />
))}
<MenuItemSeparator />
<MenuSection title="Appearance">
<MenuRadioButtonItem checked={defaultThemeOn} onClick={toggleDefaultTheme} ref={defaultThemeButtonRef}>
Default
</MenuRadioButtonItem>
{themes.map((theme) => (
<ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier.value} />
))}
</MenuSection>
<FocusModeSwitch
application={application}
onToggle={setFocusModeEnabled}