From 267b47e9592eaeeb9c3e6d2d6493b4572751f222 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 8 Aug 2023 16:46:41 +0800 Subject: [PATCH] Improve styling of highlight view items --- .../web/components/patterns/HighlightView.tsx | 54 +++++++++++++++---- .../components/templates/article/Notebook.tsx | 45 ---------------- .../web/components/tokens/stitches.config.ts | 4 +- 3 files changed, 47 insertions(+), 56 deletions(-) diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx index 361f6c131..01b90cf92 100644 --- a/packages/web/components/patterns/HighlightView.tsx +++ b/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 ( *': { + 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 { }, }} > - + Expertise Laptops, desktops and computer and PC gaming accessories + including keyboards, mice and controllers, cameras, action cameras + and drones Credentials +

+
    +
  • + + More than two decades experience writing about PCs and + accessories, and 15 years writing about cameras of all kinds. + +
    • +
+

+ Apple's MacBook Air is the company's lightest, thinnest and most + affordable laptop. The Air is regularly{' '} + + our top recommendation + {' '} + for anyone in need of a solid, reliable everyday laptop. And when + Apple released the{' '} + + 2020 MacBook Air with its first-gen M1 + {' '} + system-on-chip, the performance was as impressive as its design + for the $999 price. +

+ {/* + /> */} diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index a4c1c0011..21ae2abdb 100644 --- a/packages/web/components/templates/article/Notebook.tsx +++ b/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 { ) } - -type SectionTitleProps = { - title: string - selected: boolean - setSelected: (set: boolean) => void -} - -function SectionTitle(props: SectionTitleProps): JSX.Element { - return ( - <> - - - ) -} diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 6e57310c7..74a105863 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/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',