Improve styling of highlight view items

packages/web/components/patterns/HighlightView.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-children-prop */
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import type { Highlight } from '../../lib/networking/fragments/highlightFragment'
 import { LabelChip } from '../elements/LabelChip'
 import {
@@ -14,7 +14,6 @@ import { HighlightViewNote } from './HighlightNotes'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { isDarkTheme } from '../../lib/themeUpdater'
-import { HighlightsMenu } from '../templates/homeFeed/HighlightItem'
 import { ReadableItem } from '../../lib/networking/queries/useGetLibraryItemsQuery'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import {
@@ -25,7 +24,6 @@ import {
   useHover,
   useInteractions,
 } from '@floating-ui/react'
-import { LibraryHoverActions } from './LibraryCards/LibraryHoverActions'
 import { HighlightHoverActions } from './HighlightHoverActions'
 
 type HighlightViewProps = {
@@ -54,7 +52,6 @@ const StyledQuote = styled(Blockquote, {
 export function HighlightView(props: HighlightViewProps): JSX.Element {
   const isDark = isDarkTheme()
   const [noteMode, setNoteMode] = useState<'preview' | 'edit'>('preview')
-  const [isHovered, setIsHovered] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
 
   const { refs, floatingStyles, context } = useFloating({
@@ -73,7 +70,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
   const hover = useHover(context)
 
   const { getReferenceProps, getFloatingProps } = useInteractions([hover])
-  const highlightAlpha = isDark ? 1.0 : 0.35
+  const highlightAlpha = isDark ? 0.5 : 0.35
 
   return (
     <VStack
@@ -112,13 +109,25 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
         <StyledQuote>
           <SpanBox
             css={{
-              '*': {
-                m: '0px',
+              '> *': {
+                display: 'inline',
+                padding: '2px',
                 backgroundColor: `rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
                 boxShadow: `3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha}), -3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
                 boxDecorationBreak: 'clone',
                 borderRadius: '2px',
               },
+              '> ul': {
+                display: 'block',
+                boxShadow: 'unset',
+                backgroundColor: 'unset',
+              },
+              // '> ul li span': {
+              //   backgroundColor: `rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
+              //   boxShadow: `3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha}), -3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
+              //   boxDecorationBreak: 'clone',
+              //   borderRadius: '2px',
+              // },
               fontSize: '15px',
               lineHeight: 1.5,
               color: '$thTextSubtle2',
@@ -130,10 +139,37 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
               },
             }}
           >
-            <ReactMarkdown
+            <p>
+              Expertise Laptops, desktops and computer and PC gaming accessories
+              including keyboards, mice and controllers, cameras, action cameras
+              and drones Credentials
+            </p>
+            <ul>
+              <li>
+                <span>
+                  More than two decades experience writing about PCs and
+                  accessories, and 15 years writing about cameras of all kinds.
+                </span>
+              </li>
+            </ul>
+            <p>
+              Apple's MacBook Air is the company's lightest, thinnest and most
+              affordable laptop. The Air is regularly{' '}
+              <a href="https://www.cnet.com/tech/computing/best-laptop/">
+                our top recommendation
+              </a>{' '}
+              for anyone in need of a solid, reliable everyday laptop. And when
+              Apple released the{' '}
+              <a href="https://www.cnet.com/tech/computing/macbook-air-m1-hands-on-big-changes-from-apple-silicon-and-big-sur/">
+                2020 MacBook Air with its first-gen M1
+              </a>{' '}
+              system-on-chip, the performance was as impressive as its design
+              for the $999 price.
+            </p>
+            {/* <ReactMarkdown
               children={props.highlight.quote ?? ''}
               remarkPlugins={[remarkGfm]}
-            />
+            /> */}
           </SpanBox>
         </StyledQuote>
         <Box css={{ display: 'block', pt: '5px' }}>

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

@@ -3,7 +3,6 @@ import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { CaretDown, CaretRight } from 'phosphor-react'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { diff_match_patch } from 'diff-match-patch'
@@ -382,47 +381,3 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
     </VStack>
   )
 }
-
-type SectionTitleProps = {
-  title: string
-  selected: boolean
-  setSelected: (set: boolean) => void
-}
-
-function SectionTitle(props: SectionTitleProps): JSX.Element {
-  return (
-    <>
-      <Button
-        style="plainIcon"
-        css={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '5px',
-          color: props.selected ? '$thTextContrast' : '$thTextSubtle',
-          borderBottom: props.selected
-            ? '1px solid $thTextContrast'
-            : '1px solid transparent',
-        }}
-        onClick={(event) => {
-          props.setSelected(true)
-          event.stopPropagation()
-        }}
-      >
-        <StyledText
-          css={{
-            m: '0px',
-            pt: '2px',
-            pb: '2px',
-            px: '5px',
-            fontFamily: '$inter',
-            fontWeight: '500',
-            fontSize: '13px',
-            color: '$thNotebookSubtle',
-          }}
-        >
-          {props.title}
-        </StyledText>
-      </Button>
-    </>
-  )
-}

packages/web/components/tokens/stitches.config.ts

@@ -280,8 +280,8 @@ const darkThemeSpec = {
     thLibrarySelectionColor: '#3D3D3D',
 
     thNotebookSubtle: '#898989',
-    thNotebookBorder: '#898989',
-    thNotebookBackground: '#3B3938',
+    thNotebookBorder: '#3D3D3D',
+    thNotebookBackground: '#2F2F2F',
     thNotebookTextBackground: '#3D3D3D',
     thNotebookHighContrast: '#2A2A2A',