From 579bc45237d5f1efbba04f45ac94420d13739822 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 31 Mar 2023 15:44:07 +0800
Subject: [PATCH] Formatting on highlight notes

---
 .../components/patterns/HighlightNotes.tsx    | 27 +++++++++++++++----
 .../web/components/patterns/HighlightView.tsx |  4 +--
 .../web/components/tokens/stitches.config.ts  |  2 ++
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/patterns/HighlightNotes.tsx b/packages/web/components/patterns/HighlightNotes.tsx
index c307a74ee..69376f0d9 100644
--- a/packages/web/components/patterns/HighlightNotes.tsx
+++ b/packages/web/components/patterns/HighlightNotes.tsx
@@ -55,6 +55,7 @@ export function HighlightNoteBox(props: NoteSectionProps): JSX.Element {
       text={props.text}
       saveText={saveText}
       lastSaved={lastSaved}
+      fillBackground={false}
     />
   )
 }
@@ -101,6 +102,7 @@ export function HighlightViewNote(props: HighlightViewNoteProps): JSX.Element {
       text={props.text}
       saveText={saveText}
       lastSaved={lastSaved}
+      fillBackground={true}
     />
   )
 }
@@ -113,6 +115,7 @@ type MarkdownNote = {
   setEditMode: (set: 'edit' | 'preview') => void
 
   text: string | undefined
+  fillBackground: boolean | undefined
 
   lastSaved: Date | undefined
   saveText: (text: string, updateTime: Date) => void
@@ -286,14 +289,28 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
         <>
           <SpanBox
             css={{
-              borderRadius: '3px',
               p: '5px',
               width: '100%',
-              marginTop: '15px',
-              color: '#898989',
-              fontSize: '13px',
-              border: '1px solid $thBorderColor',
+              fontSize: '15px',
+              borderRadius: '2px',
+              marginTop: props.fillBackground || !props.text ? '10px' : '0px',
 
+              paddingLeft:
+                props.fillBackground && props.text
+                  ? '10px'
+                  : props.fillBackground
+                  ? '5px'
+                  : '0px',
+              paddingRight:
+                props.fillBackground && props.text
+                  ? '10px'
+                  : props.fillBackground
+                  ? '5px'
+                  : '0px',
+              color: props.text ? '$thHighContrast' : '#898989',
+              border: props.text ? 'unset' : '1px solid $thBorderColor',
+              background:
+                props.text && props.fillBackground ? '$thBackground5' : 'unset',
               '> *': {
                 m: '0px',
               },
diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index c421bbb24..510a7df3d 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -98,7 +98,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
           ))}
         </Box>
         <HStack
-          css={{ width: '100%', height: '100%' }}
+          css={{ width: '100%', height: '100%', pt: '15px' }}
           alignment="start"
           distribution="start"
         >
@@ -115,7 +115,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             css={{
               lineHeight: '1',
               marginLeft: '20px',
-              marginTop: '20px',
+              marginTop: '15px',
               cursor: 'pointer',
               borderRadius: '1000px',
               '&:hover': {
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 95c696e04..74c378191 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -168,6 +168,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thBackground2: '#F3F3F3',
         thBackground3: '#FFFFFF',
         thBackground4: '#EBEBEB',
+        thBackground5: '#F5F5F5',
         thBackgroundActive: '#F9F9F9',
         thBackgroundContrast: '#FFFFFF',
 
@@ -254,6 +255,7 @@ const darkThemeSpec = {
     thBackground2: '#3D3D3D',
     thBackground3: '#242424',
     thBackground4: '#3D3D3D',
+    thBackground5: '#3D3D3D',
     thBackgroundActive: '#2E2E2E',
     thBackgroundContrast: '#000000',