prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #116 from omnivore-app/fix/highlight-urls

Browse source 
Improve the styling of URLs in highlighted text
This commit is contained in:
Jackson Harper 2022-02-23 15:00:43 -08:00 committed by GitHub
commit 1c94070386
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/components/patterns/HighlightView.tsx
View file

@ -25,7 +25,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
})
return (
<VStack css={{ width: '100%', bg: '$highlightBackground', p: '20px' }}>
<VStack css={{ width: '100%', bg: '$omnivoreYellow', p: '20px' }}>
<StyledQuote>
{props.highlight.prefix}
<SpanBox css={{ bg: '$highlight', p: '1px', borderRadius: '2px' }}>

10
packages/web/components/tokens/stitches.config.ts
View file

@ -136,9 +136,9 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
// Semantic Colors
overlay: blackA.blackA9,
highlightBackground: 'rgb(255,234,159)',
highlightBackground: 'rgba(255, 210, 52, 0.65)',
highlight: '#FFD234',
highlightText: 'rgba(255, 210, 52, 0.65)',
highlightText: '#3D3D3D',
error: '#FA5E4A',
// Brand Colors
@ -180,7 +180,6 @@ export const darkTheme = createTheme(ThemeId.Dark, {
grayBgActive: '#4f4d4c',
grayTextContrast: '#D8D7D7',
grayBorder: 'rgba(255, 255, 255, 0.06)',
highlightText: '#867740',
graySolid: '#9C9B9A',
grayBgSubtle: grayDark.gray2,
@ -192,8 +191,9 @@ export const darkTheme = createTheme(ThemeId.Dark, {
// Semantic Colors
overlay: blackA.blackA9,
highlightBackground: 'rgb(255,234,159)',
highlightBackground: '#867740',
highlight: '#FFD234',
highlightText: 'white',
error: '#FA5E4A',
// Reader Colors
@ -296,7 +296,7 @@ export const globalStyles = globalCss({
// browser prefers this loaded here vs in the article styling css
'.article-inner-css': {
'::selection': {
background: '$highlightText',
background: '$highlightBackground',
}
}
})

14
packages/web/styles/articleInnerStyling.css
View file

@ -3,14 +3,16 @@
}
.highlight {
background-color: var(--colors-highlightText) !important;
color: var(--colors-highlightText);
background-color: var(--colors-highlightBackground);
cursor: pointer;
}
.highlight_with_note {
cursor: pointer;
border-bottom: 2px var(--colors-highlightText) solid;
color: var(--colors-highlightText);
border-bottom: 2px var(--colors-highlightBackground) solid;
border-radius: 2px;
cursor: pointer;
}
.article-inner-css .highlight_with_note .highlight_note_button {
@ -118,7 +120,11 @@ on smaller screens we display the note icon
}
.article-inner-css a {
color: #416ed2;
color: var(--font-color-readerFont);
}
.article-inner-css .highlight a {
color: var(--colors-highlightText);
}
.article-inner-css figure {