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

packages/web/src/javascripts/Components/Dropdown/StyledListboxButton.tsx

@@ -1,7 +1,9 @@
 import { ListboxButton } from '@reach/listbox'
 import styled from 'styled-components'
 
-const StyledListboxButton = styled(ListboxButton)`
+const StyledListboxButton = styled(ListboxButton).attrs(() => ({
+  className: 'w-full md:w-fit',
+}))`
   &[data-reach-listbox-button] {
     background-color: var(--sn-stylekit-background-color);
     border-radius: 0.25rem;
@@ -14,7 +16,6 @@ const StyledListboxButton = styled(ListboxButton)`
     padding-left: 0.875rem;
     padding-right: 0.875rem;
     padding-top: 0.375rem;
-    width: fit-content;
   }
 `
 

packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx

@@ -30,7 +30,7 @@ const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) =>
   return (
     <PreferencesGroup>
       <PreferencesSegment>
-        <div className="flex flex-col items-center px-12">
+        <div className="flex flex-col items-center px-4 md:px-12">
           <AccountIllustration className="mb-3" />
           <Title>You're not signed in</Title>
           <Text className="mb-3 text-center">

packages/web/src/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx

@@ -23,9 +23,8 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, viewContr
           <Title>Sign out</Title>
           <Subtitle>Other devices</Subtitle>
           <Text>Want to sign out on all devices except this one?</Text>
-          <div className="mt-3 flex flex-row">
+          <div className="mt-3 flex flex-row flex-wrap gap-3">
             <Button
-              className="mr-3"
               label="Sign out other sessions"
               onClick={() => {
                 viewControllerManager.accountMenuController.setOtherSessionsSignOut(true)

packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionEnabled.tsx

@@ -20,14 +20,15 @@ const EncryptionEnabled: FunctionComponent<Props> = ({ viewControllerManager })
   const tagIcon = <Icon type="hashtag" className="min-h-5 min-w-5" />
   const archiveIcon = <Icon type="archive" className="min-h-5 min-w-5" />
   const trashIcon = <Icon type="trash" className="min-h-5 min-w-5" />
+
   return (
     <>
-      <div className="flex flex-row items-start pb-1 pt-1.5">
+      <div className="flex flex-row flex-wrap items-start pt-1.5 md:pb-1">
         <EncryptionStatusItem status={notes} icon={noteIcon} />
         <div className="min-w-3" />
         <EncryptionStatusItem status={tags} icon={tagIcon} />
       </div>
-      <div className="flex flex-row items-start">
+      <div className="flex flex-row flex-wrap items-start">
         <EncryptionStatusItem status={archived} icon={archiveIcon} />
         <div className="min-w-3" />
         <EncryptionStatusItem status={deleted} icon={trashIcon} />

packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx

@@ -6,7 +6,7 @@ import PaneSelector from './PaneSelector'
 import { PreferencesProps } from './PreferencesProps'
 
 const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = (props) => (
-  <div className="flex min-h-0 flex-grow flex-row justify-between">
+  <div className="flex min-h-0 flex-grow flex-col-reverse md:flex-row md:justify-between">
     <PreferencesMenuView menu={props.menu} />
     <PaneSelector {...props} />
   </div>

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx

@@ -2,8 +2,7 @@ import { FunctionComponent } from 'react'
 
 export const Title: FunctionComponent = ({ children }) => (
   <>
-    <h2 className="m-0 mb-1 text-base font-bold text-info">{children}</h2>
-    <div className="min-h-2" />
+    <h2 className="m-0 mb-1 text-lg font-bold text-info md:text-base">{children}</h2>
   </>
 )
 
@@ -16,7 +15,7 @@ export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ child
 )
 
 export const Text: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
-  <p className={`${className} text-xs`}>{children}</p>
+  <p className={`${className} text-sm md:text-xs`}>{children}</p>
 )
 
 const buttonClasses =

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react'
 
 const PreferencesPane: FunctionComponent = ({ children }) => (
-  <div className="flex min-h-0 flex-grow flex-row overflow-y-auto text-foreground">
-    <div className="flex flex-grow flex-col items-center py-6">
-      <div className="flex w-125 max-w-125 flex-col">
+  <div className="flex min-h-0 flex-grow flex-col overflow-y-auto text-foreground md:flex-row">
+    <div className="flex flex-grow flex-col items-center px-3 py-6 md:px-0">
+      <div className="flex flex-col md:w-125 md:max-w-125">
         {children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
       </div>
     </div>

packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts

@@ -117,7 +117,7 @@ export class PreferencesMenu {
     return 'account'
   }
 
-  selectPane(key: PreferenceId): void {
+  selectPane = (key: PreferenceId) => {
     this._selectedPane = key
   }
 

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -1,25 +1,54 @@
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, useMemo } from 'react'
+import Dropdown from '../Dropdown/Dropdown'
+import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
-import { PreferencesMenu } from './PreferencesMenu'
+import { PreferenceId, PreferencesMenu } from './PreferencesMenu'
 
 type Props = {
   menu: PreferencesMenu
 }
 
-const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => (
-  <div className="flex min-w-55 flex-col overflow-y-auto px-3 py-6">
-    {menu.menuItems.map((pref) => (
-      <PreferencesMenuItem
-        key={pref.id}
-        iconType={pref.icon}
-        label={pref.label}
-        selected={pref.selected}
-        hasBubble={pref.hasBubble}
-        onClick={() => menu.selectPane(pref.id)}
-      />
-    ))}
-  </div>
-)
+const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
+  const { selectedPaneId, selectPane, menuItems } = menu
+
+  const dropdownMenuItems: DropdownItem[] = useMemo(
+    () =>
+      menuItems.map((menuItem) => ({
+        icon: menuItem.icon,
+        label: menuItem.label,
+        value: menuItem.id,
+      })),
+    [menuItems],
+  )
+
+  return (
+    <div className="px-3 py-2 md:px-0">
+      <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
+        {menuItems.map((pref) => (
+          <PreferencesMenuItem
+            key={pref.id}
+            iconType={pref.icon}
+            label={pref.label}
+            selected={pref.selected}
+            hasBubble={pref.hasBubble}
+            onClick={() => selectPane(pref.id)}
+          />
+        ))}
+      </div>
+      <div className="md:hidden">
+        <Dropdown
+          id="preferences-menu"
+          items={dropdownMenuItems}
+          label="Preferences Menu"
+          value={selectedPaneId}
+          onChange={(paneId) => {
+            selectPane(paneId as PreferenceId)
+          }}
+        />
+      </div>
+    </div>
+  )
+}
 
 export default observer(PreferencesMenuView)

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -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>
   )

packages/web/src/javascripts/Components/TitleBar/Title.tsx

@@ -1,11 +0,0 @@
-import { FunctionComponent } from 'react'
-
-type Props = {
-  className?: string
-}
-
-const Title: FunctionComponent<Props> = ({ children, className }) => {
-  return <div className={`font-bold ${className ?? ''}`}>{children}</div>
-}
-
-export default Title

packages/web/src/javascripts/Components/TitleBar/TitleBar.tsx

@@ -1,13 +0,0 @@
-import { FunctionComponent } from 'react'
-
-type Props = {
-  className?: string
-}
-
-const TitleBar: FunctionComponent<Props> = ({ children, className }) => (
-  <div className={`flex h-14 w-full flex-row border-b border-solid border-border bg-default p-3 ${className ?? ''}`}>
-    {children}
-  </div>
-)
-
-export default TitleBar