feat(web): mobile-friendly (responsive) preferences UI (#1234)

This commit is contained in:
Aman Harwara
2022-07-09 00:38:44 +05:30
committed by GitHub
parent 961d1fb8d4
commit 66f97f0612
17 changed files with 89 additions and 71 deletions

View File

@@ -1,6 +1,4 @@
import RoundIconButton from '@/Components/Button/RoundIconButton'
import TitleBar from '@/Components/TitleBar/TitleBar'
import Title from '@/Components/TitleBar/Title'
import { FunctionComponent, useEffect, useMemo } from 'react'
import { observer } from 'mobx-react-lite'
import { PreferencesMenu } from './PreferencesMenu'
@@ -29,9 +27,9 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
return (
<div className="absolute top-0 left-0 z-preferences flex h-full w-full flex-col bg-contrast">
<TitleBar className="items-center justify-between">
<div className="h-8 w-8" />
<Title className="text-lg">Your preferences for Standard Notes</Title>
<div className="flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 py-2 md:p-3">
<div className="hidden h-8 w-8 md:block" />
<h1 className="text-base font-bold md:text-lg">Your preferences for Standard Notes</h1>
<RoundIconButton
onClick={() => {
props.closePreferences()
@@ -39,7 +37,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
type="normal"
icon="close"
/>
</TitleBar>
</div>
<PreferencesCanvas {...props} menu={menu} />
</div>
)