Padding, margin, font size tweaks on highlight editors

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)

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>
   )
 }

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={{

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',
       }}