Fix notebook layout to match design, remove unused file

packages/web/components/elements/HighlightNoteTextEditArea.tsx

@@ -1,91 +0,0 @@
-import { useCallback, useState } from 'react'
-import { Highlight } from '../../lib/networking/fragments/highlightFragment'
-import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
-import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
-import { Button } from './Button'
-import { HStack, VStack } from './LayoutPrimitives'
-import { StyledTextArea } from './StyledTextArea'
-
-type HighlightNoteTextEditAreaProps = {
-  setIsEditing: (editing: boolean) => void
-  highlight: Highlight
-  updateHighlight: (highlight: Highlight) => void
-}
-
-export const HighlightNoteTextEditArea = (
-  props: HighlightNoteTextEditAreaProps
-): JSX.Element => {
-  const [noteContent, setNoteContent] = useState(
-    props.highlight.annotation ?? ''
-  )
-
-  const handleNoteContentChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
-      setNoteContent(event.target.value)
-    },
-    [setNoteContent]
-  )
-
-  return (
-    <VStack css={{ width: '100%' }} key="textEditor">
-      <StyledTextArea
-        css={{
-          my: '10px',
-          minHeight: '200px',
-          borderRadius: '5px',
-          p: '10px',
-          width: '100%',
-          marginTop: '16px',
-          resize: 'vertical',
-          bg: '#EBEBEB',
-          color: '#3D3D3D',
-        }}
-        autoFocus
-        maxLength={4000}
-        value={noteContent}
-        placeholder={'Add notes to this highlight...'}
-        onChange={handleNoteContentChange}
-      />
-      <HStack alignment="center" distribution="end" css={{ width: '100%' }}>
-        <Button
-          style="cancelGeneric"
-          css={{ mr: '$2' }}
-          onClick={() => {
-            props.setIsEditing(false)
-            setNoteContent(props.highlight.annotation ?? '')
-          }}
-        >
-          Cancel
-        </Button>
-        <Button
-          style="ctaDarkYellow"
-          onClick={async (e) => {
-            e.preventDefault()
-            try {
-              const result = await updateHighlightMutation({
-                highlightId: props.highlight.id,
-                annotation: noteContent,
-              })
-              console.log('result: ' + result)
-
-              if (!result) {
-                showErrorToast('There was an error updating your highlight.')
-              } else {
-                showSuccessToast('Note saved')
-                props.highlight.annotation = noteContent
-                props.updateHighlight(props.highlight)
-              }
-            } catch (err) {
-              console.log('error updating annoation', err)
-              showErrorToast('There was an error updating your highlight.')
-            }
-
-            props.setIsEditing(false)
-          }}
-        >
-          Save
-        </Button>
-      </HStack>
-    </VStack>
-  )
-}

packages/web/components/patterns/HighlightNotes.tsx

@@ -286,12 +286,14 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
         <>
           <SpanBox
             css={{
-              borderRadius: '5px',
-              p: '10px',
+              borderRadius: '3px',
+              p: '5px',
               width: '100%',
               marginTop: '15px',
-              color: '#3D3D3D',
-              bg: '#F5F5F5',
+              color: '#898989',
+              fontSize: '11px',
+              border: '1px solid #D9D9D9',
+
               '> *': {
                 m: '0px',
               },

packages/web/components/patterns/HighlightView.tsx

@@ -41,7 +41,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
       <VStack css={{ minHeight: '100%', width: '10px' }}>
         <Box
           css={{
-            mt: '8px',
+            mt: '5px',
             width: '10px',
             height: '10px',
             background: '#FFD234',
@@ -55,7 +55,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             background: '#FFD234',
             marginLeft: '4px',
             flex: '1',
-            marginBottom: '32px',
+            marginBottom: '10px',
           }}
         />
       </VStack>
@@ -78,6 +78,8 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
               '> *': {
                 m: '0px',
               },
+              fontSize: '15px',
+              lineHeight: 1.5,
               color: '$grayText',
               img: {
                 display: 'block',

packages/web/components/templates/article/NotebookModal.tsx

@@ -3,7 +3,7 @@ import {
   ModalOverlay,
   ModalContent,
 } from '../../elements/ModalPrimitives'
-import { Box, HStack } from '../../elements/LayoutPrimitives'
+import { HStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
@@ -114,7 +114,7 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
             css={{
               ml: 'auto',
               cursor: 'pointer',
-              gap: '5px',
+              gap: '15px',
               mr: '-5px',
             }}
             distribution="center"