From d77ce3c46d49a9facaf50e1165226edd00227ae2 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 31 Mar 2023 13:23:01 +0800
Subject: [PATCH] Improve CSS on MD boxes

---
 .../web/components/patterns/HighlightView.tsx | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index ad75389e8..efe45e0a9 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -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) => (