feat: Preferences view layout on mobile has been updated, and can be dismissed by swiping from the right

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

@@ -110,7 +110,7 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
       <PreferencesSegment>
         <Title>Email</Title>
         <div>
-          <div className="flex items-center justify-between">
+          <div className="flex items-start justify-between gap-2 md:items-center">
             <div className="flex flex-col">
               <Subtitle>Mute sign-in notification emails</Subtitle>
               {isMuteSignInEmailsFeatureAvailable ? (
@@ -132,7 +132,7 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
               )}
             </div>
             {isLoading ? (
-              <Spinner className="ml-2 flex-shrink-0" />
+              <Spinner className="h-5 w-5 flex-shrink-0" />
             ) : (
               isMuteSignInEmailsFeatureAvailable && (
                 <Switch
@@ -143,13 +143,13 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
             )}
           </div>
           <HorizontalSeparator classes="my-4" />
-          <div className="flex items-center justify-between">
+          <div className="flex items-start justify-between gap-2 md:items-center">
             <div className="flex flex-col">
               <Subtitle>Mute marketing notification emails</Subtitle>
               <Text>Disables email notifications with special deals and promotions.</Text>
             </div>
             {isLoading ? (
-              <Spinner className="ml-2 flex-shrink-0" />
+              <Spinner className="h-5 w-5 flex-shrink-0" />
             ) : (
               <Switch
                 onChange={toggleMuteMarketingEmails}

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -116,7 +116,7 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
         <PreferencesSegment>
           <Title>Themes</Title>
           <div className="mt-2">
-            <div className="flex items-center justify-between">
+            <div className="flex justify-between gap-2 md:items-center">
               <div className="flex flex-col">
                 <Subtitle>Use system color scheme</Subtitle>
                 <Text>Automatically change active theme based on your system settings.</Text>

packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx

@@ -80,7 +80,7 @@ const EditorDefaults = ({ application }: Props) => {
       <PreferencesSegment>
         <Title>Editor appearance</Title>
         <div className="mt-2">
-          <div className="flex items-center justify-between">
+          <div className="flex justify-between gap-2 md:items-center">
             <div className="flex flex-col">
               <Subtitle>Monospace Font</Subtitle>
               <Text>Toggles the font style in plaintext and Super notes</Text>

packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx

@@ -122,7 +122,7 @@ const EmailBackups = ({ application }: Props) => {
           <Text>How often to receive backups.</Text>
           <div className="mt-2">
             {isLoading ? (
-              <Spinner className="h-4 w-4" />
+              <Spinner className="h-5 w-5 flex-shrink-0" />
             ) : (
               <Dropdown
                 label="Select email frequency"
@@ -134,12 +134,12 @@ const EmailBackups = ({ application }: Props) => {
           </div>
           <HorizontalSeparator classes="my-4" />
           <Subtitle>Email preferences</Subtitle>
-          <div className="flex items-center justify-between">
+          <div className="flex justify-between gap-2 md:items-center">
             <div className="flex flex-col">
               <Text>Receive a notification email if an email backup fails.</Text>
             </div>
             {isLoading ? (
-              <Spinner className="h-4 w-4" />
+              <Spinner className="h-5 w-5 flex-shrink-0" />
             ) : (
               <Switch onChange={toggleMuteFailedBackupEmails} checked={!isFailedBackupEmailMuted} />
             )}

packages/web/src/javascripts/Components/Preferences/Panes/General/Defaults.tsx

@@ -44,7 +44,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
         <Title>Defaults</Title>
         {application.platform === Platform.Android && (
           <>
-            <div className="flex items-center justify-between">
+            <div className="flex justify-between gap-2 md:items-center">
               <div className="flex flex-col">
                 <Subtitle>Always ask before closing app (Android)</Subtitle>
                 <Text>Whether a confirmation dialog should be shown before closing the app.</Text>
@@ -54,7 +54,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
             <HorizontalSeparator classes="my-4" />
           </>
         )}
-        <div className="flex items-center justify-between">
+        <div className="flex justify-between gap-2 md:items-center">
           <div className="flex flex-col">
             <Subtitle>Spellcheck</Subtitle>
             <Text>
@@ -65,7 +65,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
           <Switch onChange={toggleSpellcheck} checked={spellcheck} />
         </div>
         <HorizontalSeparator classes="my-4" />
-        <div className="flex items-center justify-between">
+        <div className="flex justify-between gap-2 md:items-center">
           <div className="flex flex-col">
             <Subtitle>Add all parent tags when adding a nested tag to a note</Subtitle>
             <Text>When enabled, adding a nested tag to a note will automatically add all associated parent tags.</Text>

packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx

@@ -62,13 +62,14 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
   const premiumModal = usePremiumModal()
 
   const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+  const canShowPaneGesturesOption = isMobileScreen && typeof isPaneGesturesEnabled === 'boolean'
 
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Labs</Title>
         <div>
-          {isMobileScreen && (
+          {canShowPaneGesturesOption && (
             <LabsFeature
               name="Pane switch gestures"
               description="Allows using gestures to navigate"
@@ -103,7 +104,7 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
               </Fragment>
             )
           })}
-          {(experimentalFeatures.length === 0 || typeof isPaneGesturesEnabled === 'boolean') && (
+          {experimentalFeatures.length === 0 && !canShowPaneGesturesOption && (
             <div className="flex items-center justify-between">
               <div className="flex flex-col">
                 <Text>No experimental features available.</Text>

packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/LabsFeature.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const LabsFeature = ({ name, description, toggleFeature, isEnabled }: Props) => {
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex justify-between gap-2 md:items-center">
       <div className="flex flex-col">
         <Subtitle>{name}</Subtitle>
         <Text>{description}</Text>

packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx

@@ -27,7 +27,7 @@ const Tools: FunctionComponent<Props> = ({ application }: Props) => {
       <PreferencesSegment>
         <Title>Tools</Title>
         <div>
-          <div className="flex items-center justify-between">
+          <div className="flex justify-between gap-2 md:items-center">
             <div className="flex flex-col">
               <Subtitle>Show note saving status while editing</Subtitle>
               <Text>

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

@@ -77,7 +77,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
       <PreferencesSegment>
         <Title>Privacy</Title>
         <div>
-          <div className="flex items-center justify-between">
+          <div className="flex justify-between gap-2 md:items-center">
             <div className="flex flex-col">
               <Subtitle>Session user agent logging</Subtitle>
               <Text>
@@ -87,7 +87,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
               </Text>
             </div>
             {isLoading ? (
-              <Spinner className="ml-2 flex-shrink-0" />
+              <Spinner className="h-5 w-5 flex-shrink-0" />
             ) : (
               <Switch
                 onChange={toggleSessionLogging}

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx

@@ -91,14 +91,12 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth, application }) => {
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row gap-2 md:items-center">
             <div className="flex flex-grow flex-col">
               <TwoFactorTitle auth={auth} />
               <TwoFactorDescription auth={auth} />
             </div>
-            <div className="flex min-w-15 flex-col items-center justify-center">
-              <TwoFactorSwitch auth={auth} />
-            </div>
+            <TwoFactorSwitch auth={auth} />
           </div>
         </PreferencesSegment>
 

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-col-reverse md:flex-row md:justify-between">
+  <div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
     <PreferencesMenuView menu={props.menu} />
     <div className="min-h-0 flex-grow overflow-auto bg-contrast">
       <PaneSelector {...props} />

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

@@ -30,7 +30,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   return (
     <div
       className={classNames(
-        'border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0',
+        'border-b border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0',
         hasBottomInset ? 'pb-safe-bottom' : 'pb-2 md:pb-0',
       )}
     >
@@ -60,7 +60,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
             wrapper: 'relative',
             button: 'focus:outline-none focus:shadow-none focus:ring-none',
           }}
-          popoverPlacement="top"
+          popoverPlacement="bottom"
         />
       </div>
     </div>

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

@@ -47,7 +47,11 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
   })
 
   return (
-    <ModalOverlay isOpen={viewControllerManager.preferencesController.isOpen} ref={setElement}>
+    <ModalOverlay
+      isOpen={viewControllerManager.preferencesController.isOpen}
+      ref={setElement}
+      animationVariant="horizontal"
+    >
       <PreferencesView
         closePreferences={viewControllerManager.preferencesController.closePreferences}
         application={application}