Merge pull request #1288 from omnivore-app/fix/highlight-w-note-color

Display some background colour on highlighted notes

packages/web/components/patterns/HighlightBar.tsx

@@ -27,12 +27,12 @@ type HighlightBarProps = {
   anchorCoordinates: PageCoordinates
   isNewHighlight: boolean
   isSharedToFeed: boolean
-  isTouchscreenDevice: boolean
+  displayNearCursor: boolean
   handleButtonClick: (action: HighlightAction) => void
 }
 
 export function HighlightBar(props: HighlightBarProps): JSX.Element {
-  if (props.isTouchscreenDevice) {
+  if (!props.displayNearCursor) {
     return (
       <Box
         css={{
@@ -58,23 +58,22 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
     )
   } else {
     return (
-      <AnchoredPopover
-        xAnchorCoordinate={props.anchorCoordinates.pageX}
-        yAnchorCoordinate={props.anchorCoordinates.pageY}
-        preventAutoFocus={false}
+      <Box
+        css={{
+          width: '100%',
+          maxWidth: '240px',
+          height: '48px',
+          position: 'absolute',
+          background: '$grayBg',
+          borderRadius: '4px',
+          border: '1px solid $grayBorder',
+          boxShadow: theme.shadows.cardBoxShadow.toString(),
+          left: props.anchorCoordinates.pageX,
+          top: props.anchorCoordinates.pageY,
+        }}
       >
-        <Box>
-          css=
-          {{
-            width: '350px',
-            background: '$grayBg',
-            borderRadius: '4px',
-            border: '1px solid $grayBorder',
-            boxShadow: '$cardBoxShadow',
-          }}
-          <BarContent {...props} />
-        </Box>
-      </AnchoredPopover>
+        <BarContent {...props} />
+      </Box>
     )
   }
 }
@@ -94,7 +93,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
       css={{
         height: '100%',
         alignItems: 'center',
-        width: props.isTouchscreenDevice ? '100%' : 'auto',
+        width: props.displayNearCursor ? 'auto' : '100%',
       }}
     >
       {props.isNewHighlight ? (

packages/web/components/patterns/HighlightView.tsx

@@ -33,7 +33,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
         }
       }}>
         {props.highlight.prefix}
-        <SpanBox css={{ bg: '$highlightBackground', p: '1px', borderRadius: '2px', }}>
+        <SpanBox css={{ bg: 'rgb($highlightBackground)', p: '1px', borderRadius: '2px', }}>
           {lines.map((line: string, index: number) => (
             <Fragment key={index}>
               {line}

packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx

@@ -48,7 +48,7 @@ export function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
       >
         <StyledMark
           css={{
-            background: '$highlightBackground',
+            background: 'rgb($highlightBackground)',
             color: '$highlightText',
             fontSize: '14px',
           }}

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

@@ -23,6 +23,7 @@ import { HighlightsModal } from './HighlightsModal'
 import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
 import { showErrorToast } from '../../../lib/toastHelpers'
 import { ArticleMutations } from '../../../lib/articleActions'
+import { isTouchScreenDevice } from '../../../lib/deviceType'
 
 type HighlightsLayerProps = {
   highlights: Highlight[]
@@ -535,7 +536,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           isNewHighlight={!!selectionData}
           handleButtonClick={handleAction}
           isSharedToFeed={focusedHighlight?.sharedAt != undefined}
-          isTouchscreenDevice={true /* isTouchScreenDevice() */}
+          displayNearCursor={isTouchScreenDevice()}
         />
       </>
     )

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

@@ -129,7 +129,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayProgressBackground: '#FFFFFF',
 
         // Semantic Colors
-        highlightBackground: 'rgba(255, 210, 52, 0.65)',
+        highlightBackground: '250, 227, 146',
         highlight: '#FFD234',
         highlightText: '#3D3D3D',
         error: '#FA5E4A',
@@ -202,7 +202,7 @@ const darkThemeSpec = {
     grayProgressBackground: '#616161',
 
     // Semantic Colors
-    highlightBackground: '#867740',
+    highlightBackground: '134, 119, 64',
     highlight: '#FFD234',
     highlightText: 'white',
     error: '#FA5E4A',
@@ -263,7 +263,7 @@ export const globalStyles = globalCss({
   // browser prefers this loaded here vs in the article styling css
   '.article-inner-css': {
     '::selection': {
-      background: '$highlightBackground',
+      background: 'rgb($highlightBackground)',
     },
   },
 })

packages/web/styles/articleInnerStyling.css

@@ -13,13 +13,14 @@
 
 .highlight {
   color: var(--colors-highlightText);
-  background-color: var(--colors-highlightBackground);
+  background-color: rgb(var(--colors-highlightBackground));
   cursor: pointer;
 }
 
 .highlight_with_note {
   color: var(--colors-highlightText);
-  border-bottom: 2px var(--colors-highlightBackground) solid;
+  background-color: rgba(var(--colors-highlightBackground), 0.35);
+  border-bottom: 2px rgb(var(--colors-highlightBackground)) solid;
   border-radius: 2px;
   cursor: pointer;
 }