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

Improve CSS on MD boxes

Browse source
This commit is contained in:
Jackson Harper 2023-03-31 13:23:01 +08:00
parent e3675295f0
commit d77ce3c46d
1 changed files with 20 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,17 +25,11 @@ const StyledQuote = styled(Blockquote, {
margin: '0px 0px 0px 0px',
fontSize: '18px',
lineHeight: '27px',
color: '$grayText',
})
export function HighlightView(props: HighlightViewProps): JSX.Element {
const [noteMode, setNoteMode] = useState<'preview' | 'edit'>('preview')
const lines = useMemo(
() => (props.highlight.quote || '').split('\n'),
[props.highlight.quote]
)
return (
<HStack
css={{
@ -65,7 +59,13 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
}}
/>
</VStack>
<VStack css={{ width: '100%', padding: '0px', paddingLeft: '15px' }}>
<VStack
css={{
width: '100%',
padding: '0px',
paddingLeft: '15px',
}}
>
<StyledQuote
onClick={() => {
if (props.scrollToHighlight) {
@ -73,25 +73,22 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
}
}}
>
<ReactMarkdown children={props.highlight.quote ?? ''} />
{/* <SpanBox
<SpanBox
css={{
p: '1px',
borderRadius: '2px',
'> *': {
m: '0px',
},
color: '$grayText',
img: {
display: 'block',
margin: '0.5em auto !important',
maxWidth: '100% !important',
height: 'auto',
},
}}
>
{lines.map((line: string, index: number) => (
<Fragment key={index}>
{line}
{index !== lines.length - 1 && (
<>
<br />
<br />
</>
)}
</Fragment>
))}
</SpanBox> */}
<ReactMarkdown children={props.highlight.quote ?? ''} />
</SpanBox>
</StyledQuote>
<Box css={{ display: 'block', pt: '5px' }}>
{props.highlight.labels?.map(({ name, color }, index) => (