chore(release): publish

- @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].2

packages/desktop/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.23.81](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-26)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.80](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-25)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
 ## [3.23.79](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-20)
 
 **Note:** Version bump only for package @standardnotes/desktop

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/desktop",
   "main": "./app/dist/index.js",
-  "version": "3.23.79",
+  "version": "3.23.81",
   "license": "AGPL-3.0-or-later",
   "author": "Standard Notes.",
   "private": true,

packages/mobile/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.30.37](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-26)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.30.36](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-25)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
 ## [3.30.35](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-20)
 
 **Note:** Version bump only for package @standardnotes/mobile

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/mobile",
-  "version": "3.30.35",
+  "version": "3.30.37",
   "author": "Standard Notes.",
   "private": true,
   "license": "AGPL-3.0-or-later",

packages/releases/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-26)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-25)
+
+**Note:** Version bump only for package @standardnotes/releases
+
 ## [1.3.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-20)
 
 **Note:** Version bump only for package @standardnotes/releases

packages/releases/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/releases",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "license": "AGPL-3.0-or-later",
   "main": "dist/releases.json",
   "types": "dist/index.d.ts",

packages/web-server/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.104](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-26)
+
+**Note:** Version bump only for package @standardnotes/web-server
+
+## [1.2.103](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-25)
+
+**Note:** Version bump only for package @standardnotes/web-server
+
 ## [1.2.102](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-20)
 
 **Note:** Version bump only for package @standardnotes/web-server

packages/web-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web-server",
-  "version": "1.2.102",
+  "version": "1.2.104",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "author": "Standard Notes.",

packages/web/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.41.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-26)
+
+### Bug Fixes
+
+* preview modal keyboard handling ([#1345](https://github.com/standardnotes/app/issues/1345)) ([9bc7533](https://github.com/standardnotes/app/commit/9bc7533010662732d671fd1a93e2fb498e9d14dc))
+
+## [3.41.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-25)
+
+### Bug Fixes
+
+* make modals mobile-friendly ([#1337](https://github.com/standardnotes/app/issues/1337)) ([7b6b2bc](https://github.com/standardnotes/app/commit/7b6b2bc5b168e2262c32a65b03e7c214d9671be1))
+
 # [3.41.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-07-20)
 
 ### Features

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web",
-  "version": "3.41.0",
+  "version": "3.41.2",
   "license": "AGPL-3.0-or-later",
   "main": "dist/app.js",
   "author": "Standard Notes.",

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -27,9 +27,9 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
 
   const keyDownHandler: KeyboardEventHandler = useCallback(
     (event) => {
-      const hasNotPressedLeftOrRightKeys = event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right
+      const KeysToHandle: string[] = [KeyboardKey.Left, KeyboardKey.Right, KeyboardKey.Escape]
 
-      if (hasNotPressedLeftOrRightKeys) {
+      if (!KeysToHandle.includes(event.key)) {
         return
       }
 
@@ -54,9 +54,12 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
           }
           break
         }
+        case KeyboardKey.Escape:
+          dismiss()
+          break
       }
     },
-    [currentFile.uuid, otherFiles, setCurrentFile],
+    [currentFile.uuid, dismiss, otherFiles, setCurrentFile],
   )
 
   const IconComponent = useMemo(
@@ -81,37 +84,39 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
         className="flex min-h-[90%] min-w-[90%] flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main "
       >
         <div
-          className="min-h-6 flex flex-shrink-0 items-center justify-between border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none"
+          className="flex h-full w-full flex-col focus:shadow-none focus:outline-none"
           tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
           onKeyDown={keyDownHandler}
         >
-          <div className="flex items-center">
-            <div className="h-6 w-6">{IconComponent}</div>
-            <span className="ml-3 font-medium">{currentFile.name}</span>
+          <div className="min-h-6 flex flex-shrink-0 items-center justify-between border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none">
+            <div className="flex items-center">
+              <div className="h-6 w-6">{IconComponent}</div>
+              <span className="ml-3 font-medium">{currentFile.name}</span>
+            </div>
+            <div className="flex items-center">
+              <button
+                className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
+                onClick={() => setShowFileInfoPanel((show) => !show)}
+              >
+                <Icon type="info" className="text-neutral" />
+              </button>
+              <button
+                ref={closeButtonRef}
+                onClick={dismiss}
+                aria-label="Close modal"
+                className="flex cursor-pointer rounded border-0 bg-transparent p-1 hover:bg-contrast"
+              >
+                <Icon type="close" className="text-neutral" />
+              </button>
+            </div>
           </div>
-          <div className="flex items-center">
-            <button
-              className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
-              onClick={() => setShowFileInfoPanel((show) => !show)}
-            >
-              <Icon type="info" className="text-neutral" />
-            </button>
-            <button
-              ref={closeButtonRef}
-              onClick={dismiss}
-              aria-label="Close modal"
-              className="flex cursor-pointer rounded border-0 bg-transparent p-1 hover:bg-contrast"
-            >
-              <Icon type="close" className="text-neutral" />
-            </button>
+          <div className="flex min-h-0 flex-grow">
+            <div className="relative flex max-w-full flex-grow items-center justify-center">
+              <FilePreview file={currentFile} application={application} key={currentFile.uuid} />
+            </div>
+            {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
           </div>
         </div>
-        <div className="flex min-h-0 flex-grow">
-          <div className="relative flex max-w-full flex-grow items-center justify-center">
-            <FilePreview file={currentFile} application={application} key={currentFile.uuid} />
-          </div>
-          {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
-        </div>
       </DialogContent>
     </DialogOverlay>
   )

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

@@ -25,7 +25,7 @@ const PermissionsModal = ({ callback, component, dismiss, permissionsString }: P
   }, [callback, dismiss])
 
   return (
-    <ModalDialog className="!w-[350px]">
+    <ModalDialog className="w-full md:!w-[350px]">
       <ModalDialogLabel closeDialog={deny}>Activate Component</ModalDialogLabel>
       <ModalDialogDescription>
         <div className="text-base">
@@ -33,7 +33,7 @@ const PermissionsModal = ({ callback, component, dismiss, permissionsString }: P
           {' would like to interact with your '}
           {permissionsString}
         </div>
-        <div className="sk-panel-row">
+        <div className="sk-panel-row [word-break:break-word]">
           <p className="sk-p">
             Components use an offline messaging system to communicate. Learn more at{' '}
             <a href="https://standardnotes.com/permissions" rel="noopener" target="_blank" className="sk-a info">

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

@@ -5,7 +5,7 @@ type Props = {
 }
 
 const Bullet: FunctionComponent<Props> = ({ className = '' }) => (
-  <div className={`min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
+  <div className={`inline-block min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
 )
 
 export default Bullet

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

@@ -39,9 +39,8 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
       </ModalDialogLabel>
       <ModalDialogDescription className="h-33 flex flex-row items-center">
         <div className="flex flex-grow flex-col">
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row flex-wrap items-center gap-1">
             <Bullet />
-            <div className="min-w-1" />
             <div className="text-sm">
               <b>Save your secret key</b>{' '}
               <a
@@ -52,11 +51,11 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
               </a>
               :
             </div>
-            <div className="min-w-2" />
             <DecoratedInput
               disabled={true}
               right={[<CopyButton copyValue={act.secretKey} />, download]}
               value={act.secretKey}
+              className={{ container: 'ml-2' }}
             />
           </div>
           <div className="h-2" />

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

@@ -20,11 +20,10 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
   return (
     <ModalDialog>
       <ModalDialogLabel closeDialog={act.cancelActivation}>Step 1 of 3 - Scan QR code</ModalDialogLabel>
-      <ModalDialogDescription className="h-33 flex flex-row items-center">
+      <ModalDialogDescription className="h-33 flex flex-col items-center gap-5 md:flex-row">
         <div className="w-25 h-25 flex items-center justify-center bg-info">
           <QRCode className="border-neutral-contrast-bg border-2 border-solid" value={act.qrCode} size={100} />
         </div>
-        <div className="min-w-5" />
         <div className="flex flex-grow flex-col gap-2">
           <div className="flex flex-row items-center">
             <Bullet />

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

@@ -20,24 +20,30 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
     <ModalDialog>
       <ModalDialogLabel closeDialog={act.cancelActivation}>Step 3 of 3 - Verification</ModalDialogLabel>
       <ModalDialogDescription className="h-33 flex flex-row items-center">
-        <div className="flex flex-grow flex-col">
-          <div className="mb-4 flex flex-row items-center">
-            <Bullet />
-            <div className="min-w-1" />
+        <div className="flex flex-grow flex-col gap-4">
+          <div className="flex flex-row flex-wrap items-center gap-1">
             <div className="text-sm">
-              Enter your <b>secret key</b>:
+              <Bullet className="align-middle" />
+              <span className="align-middle">
+                Enter your <b>secret key</b>:
+              </span>
             </div>
-            <div className="min-w-2" />
-            <DecoratedInput className={{ container: `w-92 ${secretKeyClass}` }} onChange={act.setInputSecretKey} />
+            <DecoratedInput
+              className={{ container: `ml-2 w-full md:w-96 ${secretKeyClass}` }}
+              onChange={act.setInputSecretKey}
+            />
           </div>
-          <div className="flex flex-row items-center">
-            <Bullet />
-            <div className="min-w-1" />
+          <div className="flex flex-row flex-wrap items-center gap-1">
             <div className="text-sm">
-              Verify the <b>authentication code</b> generated by your authenticator app:
+              <Bullet className="align-middle" />
+              <span className="align-middle">
+                Verify the <b>authentication code</b> generated by your authenticator app:
+              </span>
             </div>
-            <div className="min-w-2" />
-            <DecoratedInput className={{ container: `w-30 ${authTokenClass}` }} onChange={act.setInputOtpToken} />
+            <DecoratedInput
+              className={{ container: `ml-2 w-full md:w-30 ${authTokenClass}` }}
+              onChange={act.setInputOtpToken}
+            />
           </div>
         </div>
       </ModalDialogDescription>

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx

@@ -46,7 +46,7 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
   }
 
   return (
-    <div className={'flex h-full min-w-60 flex-col overflow-auto border-r border-solid border-border'}>
+    <div className={'flex h-full flex-grow flex-col overflow-auto border-r border-solid border-border'}>
       <div className="flex border-b border-solid border-border">
         <TabButton type={RevisionType.Remote} />
         <TabButton type={RevisionType.Session} />

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,20 +1,12 @@
 import { getPlatformString } from '@/Utils'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { ReactNode } from 'react'
-import styled from 'styled-components'
 
 type Props = {
   children: ReactNode
   onDismiss: () => void
 }
 
-const StyledDialogContent = styled(DialogContent)`
-  width: 90%;
-  max-width: 90%;
-  min-height: 90%;
-  background: var(--modal-background-color);
-`
-
 const HistoryModalDialog = ({ children, onDismiss }: Props) => {
   return (
     <DialogOverlay
@@ -22,9 +14,12 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
       onDismiss={onDismiss}
       aria-label="Note revision history"
     >
-      <StyledDialogContent aria-label="Note revision history" className="rounded-md p-0 shadow-lg">
+      <DialogContent
+        aria-label="Note revision history"
+        className="my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)] p-0 shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]"
+      >
         <div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
-      </StyledDialogContent>
+      </DialogContent>
     </DialogOverlay>
   )
 }

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx

@@ -5,6 +5,8 @@ import { RevisionHistoryModalContentProps } from './RevisionHistoryModalProps'
 import HistoryModalFooter from './HistoryModalFooter'
 import HistoryModalContentPane from './HistoryModalContentPane'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
+import Icon from '../Icon/Icon'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 const HistoryModalDialogContent = ({
   application,
@@ -16,11 +18,52 @@ const HistoryModalDialogContent = ({
 }: RevisionHistoryModalContentProps) => {
   const [noteHistoryController] = useState(() => new NoteHistoryController(application, note, selectionController))
 
+  const [selectedMobileTab, setSelectedMobileTab] = useState<'List' | 'Content'>('Content')
+
   return (
     <>
+      <div className="flex items-center border-b border-border md:hidden">
+        <button
+          className={classNames(
+            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            selectedMobileTab === 'List' ? 'font-medium text-info shadow-bottom' : 'text-text',
+          )}
+          onClick={() => {
+            setSelectedMobileTab('List')
+          }}
+        >
+          List
+        </button>
+        <button
+          className={classNames(
+            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            selectedMobileTab === 'Content' ? 'font-medium text-info shadow-bottom' : 'text-text',
+          )}
+          onClick={() => {
+            setSelectedMobileTab('Content')
+          }}
+        >
+          Content
+        </button>
+        <button className="ml-auto mr-2 rounded-full border border-border p-1.5" onClick={dismissModal}>
+          <Icon type="close" className="h-4 w-4" />
+        </button>
+      </div>
       <div className="flex min-h-0 flex-grow">
-        <HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
-        <div className="relative flex flex-grow flex-col">
+        <div
+          className={classNames(
+            'w-full md:flex md:w-auto md:min-w-60',
+            selectedMobileTab === 'List' ? 'flex' : 'hidden',
+          )}
+        >
+          <HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
+        </div>
+        <div
+          className={classNames(
+            'relative flex-grow flex-col md:flex',
+            selectedMobileTab === 'Content' ? 'flex' : 'hidden',
+          )}
+        >
           <HistoryModalContentPane
             application={application}
             noteHistoryController={noteHistoryController}

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx

@@ -41,20 +41,22 @@ const HistoryModalFooter = ({ dismissModal, noteHistoryController }: Props) => {
   }, [deleteRemoteRevision, selectedEntry])
 
   return (
-    <div className="min-h-6 flex flex-shrink-0 items-center justify-between border-t border-solid border-border px-2.5 py-2">
-      <div>
-        <Button className="py-1.35" label="Close" onClick={dismissModal} />
-      </div>
+    <div className="min-h-6 flex flex-shrink-0 flex-wrap items-center gap-2.5 border-t border-solid border-border px-2.5 py-2 md:justify-between">
+      <Button className="py-1.35" label="Close" onClick={dismissModal} />
       {selectedRevision && (
-        <div className="flex items-center">
+        <>
           {(selectedEntry as RevisionListEntry).uuid && (
-            <Button className="mr-2.5" onClick={deleteSelectedRevision}>
+            <Button className="md:ml-auto" onClick={deleteSelectedRevision}>
               {isDeletingRevision ? <Spinner className="my-1 h-3 w-3" /> : 'Delete this revision'}
             </Button>
           )}
-          <Button className="mr-2.5" label="Restore as a copy" onClick={restoreAsCopy} />
+          <Button
+            className={!(selectedEntry as RevisionListEntry).uuid ? 'md:ml-auto' : ''}
+            label="Restore as a copy"
+            onClick={restoreAsCopy}
+          />
           <Button className="" label="Restore version" onClick={restoreSelectedRevision} primary />
-        </div>
+        </>
       )}
     </div>
   )

packages/web/src/javascripts/Components/Shared/ModalDialog.tsx

@@ -12,11 +12,11 @@ const ModalDialog = ({ children, onDismiss, className }: Props) => {
   const ldRef = useRef<HTMLButtonElement>(null)
 
   return (
-    <AlertDialogOverlay leastDestructiveRef={ldRef} onDismiss={onDismiss}>
+    <AlertDialogOverlay className="px-4 md:px-0" leastDestructiveRef={ldRef} onDismiss={onDismiss}>
       <AlertDialogContent
         tabIndex={0}
         className={classNames(
-          'flex w-160 flex-col rounded border border-solid border-border bg-default p-0 shadow-main',
+          'flex w-full flex-col rounded border border-solid border-border bg-default p-0 shadow-main md:w-160',
           className,
         )}
       >

packages/web/src/stylesheets/_modals.scss

@@ -47,6 +47,9 @@
   width: 100%;
   height: 100%;
 
+  padding-left: 1rem;
+  padding-right: 1rem;
+
   background-color: transparent;
   display: flex;
   align-items: center;