From b445c7ebfe7ea18b19156dcfe3be9f36fa2fbbb8 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 9 Mar 2023 10:23:02 +0800
Subject: [PATCH] Padding, margin, font size tweaks on highlight editors

---
 .../elements/HighlightNoteTextEditArea.tsx    |  8 ++++----
 .../web/components/patterns/HighlightView.tsx | 10 +++++-----
 .../templates/homeFeed/HighlightItem.tsx      | 19 ++++++++++---------
 .../templates/homeFeed/HighlightsLayout.tsx   |  1 +
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/web/components/elements/HighlightNoteTextEditArea.tsx b/packages/web/components/elements/HighlightNoteTextEditArea.tsx
index 4aff3b3c3..7de604a19 100644
--- a/packages/web/components/elements/HighlightNoteTextEditArea.tsx
+++ b/packages/web/components/elements/HighlightNoteTextEditArea.tsx
@@ -30,10 +30,10 @@ export const HighlightNoteTextEditArea = (
     <VStack css={{ width: '100%' }} key="textEditor">
       <StyledTextArea
         css={{
-          my: '$3',
-          minHeight: '$6',
+          my: '10px',
+          minHeight: '200px',
           borderRadius: '5px',
-          p: '16px',
+          p: '10px',
           width: '100%',
           marginTop: '16px',
           resize: 'vertical',
@@ -48,7 +48,7 @@ export const HighlightNoteTextEditArea = (
       />
       <HStack alignment="center" distribution="end" css={{ width: '100%' }}>
         <Button
-          style="ctaPill"
+          style="cancelGeneric"
           css={{ mr: '$2' }}
           onClick={() => {
             props.setIsEditing(false)
diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index 011362db2..6141e6962 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -49,12 +49,12 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             </Fragment>
           ))}
         </SpanBox>
-        <Box css={{ display: 'block', pt: '16px' }}>
-          {props.highlight.labels?.map(({ name, color }, index) => (
-            <LabelChip key={index} text={name || ''} color={color} />
-          ))}
-        </Box>
       </StyledQuote>
+      <Box css={{ display: 'block', pt: '16px' }}>
+        {props.highlight.labels?.map(({ name, color }, index) => (
+          <LabelChip key={index} text={name || ''} color={color} />
+        ))}
+      </Box>
     </VStack>
   )
 }
diff --git a/packages/web/components/templates/homeFeed/HighlightItem.tsx b/packages/web/components/templates/homeFeed/HighlightItem.tsx
index fd1874974..dd2e3841d 100644
--- a/packages/web/components/templates/homeFeed/HighlightItem.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightItem.tsx
@@ -98,17 +98,18 @@ export function HighlightItem(props: HighlightItemProps): JSX.Element {
                 </Fragment>
               ))}
             </SpanBox>
-            <Box css={{ display: 'block', pt: '16px' }}>
-              {props.highlight.labels?.map((label: Label, index: number) => (
-                <LabelChip
-                  key={index}
-                  text={label.name || ''}
-                  color={label.color}
-                />
-              ))}
-            </Box>
           </StyledQuote>
 
+          <Box css={{ display: 'block' }}>
+            {props.highlight.labels?.map((label: Label, index: number) => (
+              <LabelChip
+                key={index}
+                text={label.name || ''}
+                color={label.color}
+              />
+            ))}
+          </Box>
+
           {!isEditing && (
             <StyledText
               css={{
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index 75d98e19f..0d0c72d76 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -255,6 +255,7 @@ function HighlightList(props: HighlightListProps): JSX.Element {
   return (
     <HStack
       css={{
+        m: '20px',
         height: '100%',
         flexGrow: '1',
       }}