From c55db9c01831f85ba87336cb56f9a9affa589e67 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 13 Jun 2023 12:37:01 +0800
Subject: [PATCH] Increase toast interval, add missing package

---
 .../templates/KeyboardShortcutListModal.tsx   |  6 ++++
 packages/web/lib/toastHelpers.tsx             | 35 ++++++++++++-------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/web/components/templates/KeyboardShortcutListModal.tsx b/packages/web/components/templates/KeyboardShortcutListModal.tsx
index 7efb60b7f..1b0c1d685 100644
--- a/packages/web/components/templates/KeyboardShortcutListModal.tsx
+++ b/packages/web/components/templates/KeyboardShortcutListModal.tsx
@@ -76,6 +76,12 @@ const readerCommands = () => {
       shortcutKeyDescription: 'f',
       callback: () => {},
     },
+    {
+      shortcutKeys: ['escape'],
+      actionDescription: 'End multi select',
+      shortcutKeyDescription: 'Escape',
+      callback: () => {},
+    },
     {
       actionDescription: 'Return to library',
       shortcutKeys: ['u'],
diff --git a/packages/web/lib/toastHelpers.tsx b/packages/web/lib/toastHelpers.tsx
index 055d402fd..98503bccf 100644
--- a/packages/web/lib/toastHelpers.tsx
+++ b/packages/web/lib/toastHelpers.tsx
@@ -28,7 +28,7 @@ const FullWidthContainer = styled(HStack, {
   width: '100%',
 })
 
-type ToastType  = 'success' | 'error'
+type ToastType = 'success' | 'error'
 
 const showToast = (
   message: string,
@@ -38,22 +38,33 @@ const showToast = (
 ) => {
   return toast(
     ({ id }) => (
-      <FullWidthContainer alignment='center'>
-        {type === 'success' ? <CheckCircle size={24} color='white' /> : <WarningCircle size={24} color='white' />}
+      <FullWidthContainer alignment="center">
+        {type === 'success' ? (
+          <CheckCircle size={24} color="white" />
+        ) : (
+          <WarningCircle size={24} color="white" />
+        )}
         <MessageContainer>{message}</MessageContainer>
-        <HStack distribution='end' css={{marginLeft: 16}}>
-          <X size={18} style={{cursor: 'pointer'}} color='#CCEAC4' weight='bold' onClick={() => toast.dismiss(id)} />
+        <HStack distribution="end" css={{ marginLeft: 16 }}>
+          <X
+            size={18}
+            style={{ cursor: 'pointer' }}
+            color="#CCEAC4"
+            weight="bold"
+            onClick={() => toast.dismiss(id)}
+          />
         </HStack>
       </FullWidthContainer>
     ),
     {
-    style: {
-      ...toastStyles,
-      background: background,
-    },
-    duration: 2000,
-    ...options,
-  })
+      style: {
+        ...toastStyles,
+        background: background,
+      },
+      duration: 1500,
+      ...options,
+    }
+  )
 }
 
 export const showSuccessToast = (message: string, options?: ToastOptions) => {