From f5792cfc3ab77f909794ef85f3b9408ff4d8cae7 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Jun 2023 12:24:52 +0800
Subject: [PATCH] Add padding on bottom of notebooks, add cancel button to note
 editor

---
 packages/web/components/patterns/HighlightNotes.tsx    | 10 ++++++++++
 packages/web/components/patterns/HighlightView.tsx     |  6 ------
 packages/web/components/templates/article/Notebook.tsx |  9 ++++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/patterns/HighlightNotes.tsx b/packages/web/components/patterns/HighlightNotes.tsx
index c24df1193..19daf58d1 100644
--- a/packages/web/components/patterns/HighlightNotes.tsx
+++ b/packages/web/components/patterns/HighlightNotes.tsx
@@ -232,6 +232,16 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
                 marginLeft: 'auto',
               }}
             >
+              <Button
+                css={{ marginRight: '10px' }}
+                style="ctaOutlineYellow"
+                onClick={(event) => {
+                  props.setEditMode('preview')
+                  event.preventDefault()
+                }}
+              >
+                Cancel
+              </Button>
               <Button
                 style="ctaDarkYellow"
                 onClick={(event) => {
diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index 13d4757ef..6d7bc5777 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -74,12 +74,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([hover])
 
-  console.log(
-    'ref={refs.setFloating, style={floatingStyles}',
-    refs.setFloating,
-    floatingStyles
-  )
-
   return (
     <VStack
       ref={refs.setReference}
diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx
index 86cf96573..c7dcb4c8e 100644
--- a/packages/web/components/templates/article/Notebook.tsx
+++ b/packages/web/components/templates/article/Notebook.tsx
@@ -290,9 +290,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
           ) : null}
         </HStack>
       </>
-      {/* )} */}
 
-      {/* {tabSelected == 'highlights' && ( */}
       <VStack css={{ mt: '20px', gap: '30px' }}>
         {sortedHighlights.map((highlight) => (
           <HighlightViewItem
@@ -327,8 +325,13 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
             You have not added any highlights to this document.
           </Box>
         )}
+        <Box
+          css={{
+            width: '100%',
+            height: '320px',
+          }}
+        ></Box>
       </VStack>
-      {/* )} */}
 
       {showConfirmDeleteHighlightId && (
         <ConfirmationModal