From 9e3b19250630df83e61445fad744bde2c7846b8b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 11 Jul 2022 18:14:19 -0700
Subject: [PATCH 1/5] Clean up the design of FormModals

---
 packages/web/components/elements/Button.tsx   | 17 ++++++-
 .../web/components/elements/FormElements.tsx  |  3 +-
 .../components/elements/ModalPrimitives.tsx   |  2 +-
 .../web/components/elements/StyledText.tsx    | 11 ++---
 .../web/components/patterns/FormModal.tsx     | 47 ++++++++++---------
 .../templates/homeFeed/AddLinkModal.tsx       |  3 +-
 .../web/components/tokens/stitches.config.ts  | 11 +++--
 7 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 8e6d2f57b..2d0fe45d3 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -20,7 +20,7 @@ export const Button = styled('button', {
       },
       ctaDarkYellow: {
         border: 0,
-        fontSize: '14px',
+        fontSize: '16px',
         fontWeight: 500,
         fontStyle: 'normal',
         fontFamily: 'Inter',
@@ -30,6 +30,21 @@ export const Button = styled('button', {
         bg: '$omnivoreCtaYellow',
         p: '10px 12px',
       },
+      ctaOutlineYellow: {
+        boxSizing: 'border-box',
+        '-moz-box-sizing': 'border-box',
+        '-webkit-box-sizing': 'border-box',
+        border: '1px solid $omnivoreCtaYellow',
+        fontSize: '16px',
+        fontWeight: 500,
+        fontStyle: 'normal',
+        fontFamily: 'Inter',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        color: '$utilityTextDefault',
+        bg: 'transparent',
+        p: '9px 12px',
+      },
       ctaLightGray: {
         border: 0,
         fontSize: '14px',
diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index 2c26ec6b5..67062c2e7 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/packages/web/components/elements/FormElements.tsx
@@ -73,7 +73,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
     )
   } else if (props.type === 'select') {
     return (
-      <select onChange={input.onChange}>
+      <select onChange={input.onChange} style={{ padding: '8px', height: '38px', borderRadius: '6px', minWidth: '196px' }}>
         {input.options?.map((label, index) => (
           <option key={index} value={label}>{label}</option>
         ))}
@@ -103,6 +103,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
           fontSize: '16px',
           textIndent: '8px',
           marginBottom: '2px',
+          height: '38px',
           color: '$grayTextContrast',
           '&:focus': {
             outline: 'none',
diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index b1e9083de..c3478ec46 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -37,7 +37,7 @@ export const ModalContent = styled(Modal, {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: '90vw',
-  maxWidth: '600px',
+  maxWidth: '450px',
   maxHeight: '85vh',
   '@smDown': {
     maxWidth: '95%',
diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index a7674cf39..938f174ab 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -45,7 +45,7 @@ const textVariants = {
     },
     modalHeadline: {
       fontWeight: '500',
-      fontSize: '16px',
+      fontSize: '24px',
       lineHeight: '1',
       color: '$grayText',
       margin: 0,
@@ -65,7 +65,7 @@ const textVariants = {
     shareHighlightModalAnnotation: {
       fontSize: '18px',
       lineHeight: '23.4px',
-      color: '$textSubtle',
+      color: '$utilityTextSubtle',
       m: 0,
     },
     footnote: {
@@ -105,7 +105,7 @@ const textVariants = {
       lineHeight: '22.5px',
       letterSpacing: '0.01em',
       margin: '0px',
-      color: '$textSubtle',
+      color: '$utilityTextSubtle',
     },
     highlightTitle: {
       fontSize: '14px',
@@ -133,9 +133,8 @@ const textVariants = {
     menuTitle: {
       pt: '0px',
       m: '0px',
-      cursor: 'default',
-      color: '$grayText',
-      fontSize: 16,
+      color: '$utilityTextSubtle',
+      fontSize: 14,
       fontFamily: 'inter',
       fontWeight: '500',
       lineHeight: 'unset',
diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
index e9d56ac4a..5f00d2765 100644
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -8,8 +8,8 @@ import { Button } from '../elements/Button'
 import { StyledText } from '../elements/StyledText'
 import { useState } from 'react'
 import { FormInputProps, GeneralFormInput } from '../elements/FormElements'
-import { CrossIcon } from '../elements/images/CrossIcon'
 import { theme } from '../tokens/stitches.config'
+import { X } from 'phosphor-react'
 
 export interface FormModalProps {
   inputs?: FormInputProps[]
@@ -30,30 +30,31 @@ export function FormModal(props: FormModalProps): JSX.Element {
           event.preventDefault()
           props.onOpenChange(false)
         }}
-        css={{ overflow: 'auto', p: '0' }}
+        css={{ overflow: 'auto', px: '24px' }}
       >
         <VStack>
           <HStack
             distribution="between"
             alignment="center"
-            css={{ width: '100%' }}
+            css={{ height: '68px', width: '100%' }}
           >
-            <StyledText style="modalHeadline" css={{ p: '16px' }}>
+            <StyledText style="modalHeadline" css={{  }}>
               {props.title}
             </StyledText>
             <Button
-              css={{ pt: '16px', pr: '16px' }}
+              css={{ ml: 'auto' }}
               style="ghost"
               onClick={() => {
                 props.onOpenChange(false)
               }}
             >
-              <CrossIcon
-                size={20}
-                strokeColor={theme.colors.grayText.toString()}
+              <X
+                size={24}
+                color={theme.colors.textNonessential.toString()}
               />
             </Button>
           </HStack>
+
           <Box css={{ width: '100%' }}>
             <form
               onSubmit={(event) => {
@@ -63,32 +64,32 @@ export function FormModal(props: FormModalProps): JSX.Element {
               }}
             >
               {inputs.map((input, index) => (
-                <HStack key={index} css={{ padding: '10px 0 0 10px' }}>
-                  <Box
-                    css={{
-                      p: '0',
-                      width: '25%',
-                      paddingLeft: '16px',
-                      paddingTop: '5px',
-                    }}
-                  >
-                    <StyledText style={'menuTitle'}>
+                <VStack key={index}>
+                  <StyledText style={'menuTitle'} css={{ pt: index > 0 ? '10px' : 'unset' }}>
                       {input.label}
                     </StyledText>
-                  </Box>
-                  <Box css={{ width: '100%', marginRight: '20px' }}>
+                  <Box css={{ width: '100%' }}>
                     <GeneralFormInput {...input} />
                   </Box>
-                </HStack>
+                </VStack>
               ))}
               <HStack
-                alignment="end"
+                alignment="center"
                 distribution="end"
                 css={{
+                  gap: '10px',
                   width: '100%',
-                  padding: '32px 22px 20px 0',
+                  height: '80px',
                 }}
               >
+                <Button style={'ctaOutlineYellow'} type="button" onClick={(event) => {
+                  console.log('cancelinmg')
+                    event.preventDefault()
+                    props.onOpenChange(false)
+                  }}
+                >
+                  {'Cancel'}
+                </Button>
                 <Button style={'ctaDarkYellow'}>
                   {props.acceptButtonLabel || 'Submit'}
                 </Button>
diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index 02b4105ef..bba8f2d75 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -63,7 +63,7 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
       <ModalContent
-        css={{ bg: '$grayBg', maxWidth: '20em', pt: '0px' }}
+        css={{ bg: '$grayBg', height: '218px' }}
         onInteractOutside={() => {
           // remove focus from modal
           ;(document.activeElement as HTMLElement).blur()
@@ -89,7 +89,6 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
               />
             </Button>
           </HStack>
-          <SpanBox css={{ width: '100%', height: '1px', opacity: '0.2', backgroundColor: theme.colors.grayText.toString() }} />          
           <Box css={{ width: '100%',  px: '16px', pt: '42px', pb: '24px' }}>
             <form
               onSubmit={(event) => {
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 0e74af7e6..cb8746211 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -114,7 +114,10 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayBorder: '#F0F0F0',
         grayTextContrast: '#3A3939',
         graySolid: '#9C9B9A',
+        textDefault: 'rgba(255, 255, 255, 0.8)',
         utilityTextDefault: '#3B3938',
+        utilityTextSubtle: 'rgba(255, 255, 255, 0.65)',
+        textNonessential: 'rgba(10, 8, 6, 0.4)',
 
         grayBgSubtle: 'hsl(0 0% 97.3%)',
         grayBgHover: 'hsl(0 0% 93.0%)',
@@ -153,8 +156,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         tooltipIcons: '#FDFAEC',
 
         //utility
-        textDefault: 'rgba(10, 8, 6, 0.8)',
-        textSubtle: 'rgba(10, 8, 6, 0.65)',
+        utilityTextSubtle: 'rgba(10, 8, 6, 0.65)',
         textNonEssential: 'rgba(10, 8, 6, 0.4)',
         overlay: 'rgba(63, 62, 60, 0.2)',
       },
@@ -179,7 +181,9 @@ const darkThemeSpec = {
     grayTextContrast: '#D8D7D7',
     grayBorder: '#323232',
     graySolid: '#9C9B9A',
+    textDefault: 'rgba(10, 8, 6, 0.8)',
     utilityTextDefault: '#CDCDCD',
+    textNonessential: 'rgba(97, 97, 97, 1)',
 
     grayBgSubtle: 'hsl(0 0% 9.8%)',
     grayBgHover: 'hsl(0 0% 13.8%)',
@@ -205,8 +209,7 @@ const darkThemeSpec = {
     avatarFont: 'rgba(255, 255, 255, 0.8)',
 
     //utility
-    textDefault: 'rgba(255, 255, 255, 0.8)',
-    textSubtle: 'rgba(255, 255, 255, 0.65)',
+    utilityTextSubtle: 'rgba(255, 255, 255, 0.65)',
     textNonEssential: 'rgba(10, 8, 6, 0.4)',
     overlay: 'rgba(10, 8, 6, 0.65)',
 

From 156c4cf2cf99fbf873085097043859c1131de3e5 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 11 Jul 2022 19:25:25 -0700
Subject: [PATCH 2/5] Update design on Add Link, and notes modals

---
 .../web/components/elements/FormElements.tsx  |  2 +-
 .../components/elements/ModalPrimitives.tsx   | 66 +++++++++++++++++++
 .../web/components/patterns/FormModal.tsx     | 49 ++------------
 .../templates/article/HighlightNoteModal.tsx  | 53 ++++-----------
 .../templates/homeFeed/AddLinkModal.tsx       | 37 +++--------
 .../networking/queries/useGetApiKeysQuery.tsx |  1 -
 6 files changed, 94 insertions(+), 114 deletions(-)

diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index 67062c2e7..c94389250 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/packages/web/components/elements/FormElements.tsx
@@ -96,7 +96,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
         hidden={input.hidden}
         required={input.required}
         css={{
-          border: '1px solid $grayBorder',
+          border: '1px solid $textNonessential',
           borderRadius: '8px',
           width: '100%',
           bg: 'transparent',
diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index c3478ec46..a8e6db4d2 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -1,5 +1,9 @@
 import { Root, Overlay, Content } from '@radix-ui/react-dialog'
+import { X } from 'phosphor-react'
 import { styled, keyframes, theme } from '../tokens/stitches.config'
+import { Button } from './Button'
+import { HStack } from './LayoutPrimitives'
+import { StyledText } from './StyledText'
 
 export const ModalRoot = styled(Root, {})
 
@@ -44,3 +48,65 @@ export const ModalContent = styled(Modal, {
     width: '95%',
   },
 })
+
+export type ModalTitleBarProps = {
+  title: string
+  onOpenChange: (open: boolean) => void
+}
+
+export const ModalTitleBar = (props: ModalTitleBarProps) => {
+  return (
+    <HStack
+      distribution="between"
+      alignment="center"
+      css={{ height: '68px', width: '100%' }}
+    >
+      <StyledText style="modalHeadline" css={{  }}>
+        {props.title}
+      </StyledText>
+      <Button
+        css={{ ml: 'auto' }}
+        style="ghost"
+        onClick={() => {
+          props.onOpenChange(false)
+        }}
+      >
+        <X
+          size={24}
+          color={theme.colors.textNonessential.toString()}
+        />
+      </Button>
+    </HStack>
+  )
+}
+
+type ModalButtonBarProps = {
+  acceptButtonLabel?: string
+  onOpenChange: (open: boolean) => void
+}
+
+export const ModalButtonBar = (props: ModalButtonBarProps) => {
+  return (
+    <HStack
+      alignment="center"
+      distribution="end"
+      css={{
+        gap: '10px',
+        width: '100%',
+        height: '80px',
+      }}
+    >
+      <Button style={'ctaOutlineYellow'} type="button" onClick={(event) => {
+        console.log('cancelinmg')
+          event.preventDefault()
+          props.onOpenChange(false)
+        }}
+      >
+        {'Cancel'}
+      </Button>
+      <Button style={'ctaDarkYellow'}>
+        {props.acceptButtonLabel || 'Submit'}
+      </Button>
+    </HStack>
+  )
+}
\ No newline at end of file
diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
index 5f00d2765..14a6235e2 100644
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -1,7 +1,9 @@
 import {
+  ModalButtonBar,
   ModalContent,
   ModalOverlay,
   ModalRoot,
+  ModalTitleBar,
 } from '../elements/ModalPrimitives'
 import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
@@ -33,28 +35,7 @@ export function FormModal(props: FormModalProps): JSX.Element {
         css={{ overflow: 'auto', px: '24px' }}
       >
         <VStack>
-          <HStack
-            distribution="between"
-            alignment="center"
-            css={{ height: '68px', width: '100%' }}
-          >
-            <StyledText style="modalHeadline" css={{  }}>
-              {props.title}
-            </StyledText>
-            <Button
-              css={{ ml: 'auto' }}
-              style="ghost"
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-            >
-              <X
-                size={24}
-                color={theme.colors.textNonessential.toString()}
-              />
-            </Button>
-          </HStack>
-
+          <ModalTitleBar title={props.title} onOpenChange={props.onOpenChange} />
           <Box css={{ width: '100%' }}>
             <form
               onSubmit={(event) => {
@@ -66,34 +47,14 @@ export function FormModal(props: FormModalProps): JSX.Element {
               {inputs.map((input, index) => (
                 <VStack key={index}>
                   <StyledText style={'menuTitle'} css={{ pt: index > 0 ? '10px' : 'unset' }}>
-                      {input.label}
+                    {input.label}
                     </StyledText>
                   <Box css={{ width: '100%' }}>
                     <GeneralFormInput {...input} />
                   </Box>
                 </VStack>
               ))}
-              <HStack
-                alignment="center"
-                distribution="end"
-                css={{
-                  gap: '10px',
-                  width: '100%',
-                  height: '80px',
-                }}
-              >
-                <Button style={'ctaOutlineYellow'} type="button" onClick={(event) => {
-                  console.log('cancelinmg')
-                    event.preventDefault()
-                    props.onOpenChange(false)
-                  }}
-                >
-                  {'Cancel'}
-                </Button>
-                <Button style={'ctaDarkYellow'}>
-                  {props.acceptButtonLabel || 'Submit'}
-                </Button>
-              </HStack>
+              <ModalButtonBar onOpenChange={props.onOpenChange} acceptButtonLabel={props.acceptButtonLabel} />
             </form>
           </Box>
         </VStack>
diff --git a/packages/web/components/templates/article/HighlightNoteModal.tsx b/packages/web/components/templates/article/HighlightNoteModal.tsx
index 66cf1959c..cece1ecb5 100644
--- a/packages/web/components/templates/article/HighlightNoteModal.tsx
+++ b/packages/web/components/templates/article/HighlightNoteModal.tsx
@@ -2,6 +2,8 @@ import {
   ModalRoot,
   ModalContent,
   ModalOverlay,
+  ModalTitleBar,
+  ModalButtonBar,
 } from './../../elements/ModalPrimitives'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
@@ -75,41 +77,22 @@ export function HighlightNoteModal(
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
       <ModalContent
-        css={{ overflow: 'auto' }}
+        css={{ bg: '$grayBg', px: '24px' }}
         onPointerDownOutside={(event) => {
           event.preventDefault()
         }}
       >
         <VStack>
-          <HStack
-            distribution="between"
-            alignment="center"
-            css={{ width: '100%' }}
-          >
-            <StyledText style="modalHeadline" css={{ p: '16px' }}>
-              Notes
-            </StyledText>
-            <Button
-              css={{ pt: '16px', pr: '16px' }}
-              style="ghost"
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-            >
-              <CrossIcon
-                size={20}
-                strokeColor={theme.colors.grayText.toString()}
-              />
-            </Button>
-          </HStack>
-          <SpanBox css={{ width: '100%', height: '1px', opacity: '0.2', backgroundColor: theme.colors.grayText.toString() }} />
+          <ModalTitleBar title="Notes" onOpenChange={props.onOpenChange} />
           <StyledTextArea
             css={{
-              mt: '$2',
-              width: '95%',
-              p: '0px',
-              height: '$6',
-              marginLeft: '16px',
+              mt: '16px',
+              p: '6px',
+              width: '100%',
+              height: '248px',
+              fontSize: '14px',
+              border: '1px solid $textNonessential',
+              borderRadius: '6px'
             }}
             autoFocus
             placeholder={'Add your note here'}
@@ -117,19 +100,7 @@ export function HighlightNoteModal(
             onChange={handleNoteContentChange}
             maxLength={4000}
           />
-            <SpanBox css={{ width: '100%', height: '1px', opacity: '0.2', backgroundColor: theme.colors.grayText.toString() }} />
-          <HStack
-            alignment="end"
-            distribution="end"
-            css={{
-              width: '100%',
-              padding: '22px 22px 20px 0',
-            }}
-          >
-            <Button style={'ctaDarkYellow'} onClick={saveNoteChanges}>
-              Save
-            </Button>
-          </HStack>
+          <ModalButtonBar onOpenChange={props.onOpenChange} acceptButtonLabel="Save" />
         </VStack>
       </ModalContent>
     </ModalRoot>
diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index bba8f2d75..a13426985 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -2,6 +2,8 @@ import {
   ModalRoot,
   ModalContent,
   ModalOverlay,
+  ModalTitleBar,
+  ModalButtonBar,
 } from '../../elements/ModalPrimitives'
 import { VStack, HStack, Box, SpanBox } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
@@ -63,33 +65,15 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
       <ModalContent
-        css={{ bg: '$grayBg', height: '218px' }}
+        css={{ bg: '$grayBg', px: '24px' }}
         onInteractOutside={() => {
           // remove focus from modal
           ;(document.activeElement as HTMLElement).blur()
         }}
       >
         <VStack distribution="start">
-          <HStack
-            distribution="between"
-            alignment="center"
-            css={{ width: '100%', mt: '4px', px: '16px', py: '16px' }}
-          >
-            <StyledText style="modalHeadline">Add a Link</StyledText>
-            <Button
-              css={{ cursor: 'pointer',  }}
-              style="ghost"
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-            >
-              <CrossIcon
-                size={11}
-                strokeColor={theme.colors.grayTextContrast.toString()}
-              />
-            </Button>
-          </HStack>
-          <Box css={{ width: '100%',  px: '16px', pt: '42px', pb: '24px' }}>
+          <ModalTitleBar title="Add Link" onOpenChange={props.onOpenChange} />
+          <Box css={{ width: '100%', py: '16px' }}>
             <form
               onSubmit={(event) => {
                 event.preventDefault()
@@ -118,16 +102,15 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
                 onChange={(event) => setLink(event.target.value)}
                 css={{
                   borderRadius: '8px',
-                  border: '1px solid $grayTextContrast',
+                  border: '1px solid $textNonessential',
                   width: '100%',
+                  height: '38px',
                   p: '6px',
+                  mb: '13px',
+                  fontSize: '14px',
                 }}
               />
-              <HStack distribution="end" css={{ mt: '16px', width: '100%' }}>
-                <Button style="ctaDarkYellow" css={{ mb: '0px' }}>
-                  Add Link
-                </Button>
-              </HStack>
+              <ModalButtonBar onOpenChange={props.onOpenChange} acceptButtonLabel="Add Link" />
             </form>
           </Box>
         </VStack>
diff --git a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
index b13422427..9b3c9e79c 100644
--- a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
@@ -49,7 +49,6 @@ export function useGetApiKeysQuery(): ApiKeysQueryResponse {
   `
 
   const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
-  console.log('api keys data', data)
 
   try {
     if (data) {

From aba2e7892e66692532a7849d07d519f779606fd6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 11 Jul 2022 19:40:00 -0700
Subject: [PATCH 3/5] Update the all highlights modal

---
 .../web/components/patterns/HighlightView.tsx | 10 ++-----
 .../templates/article/HighlightsModal.tsx     | 29 ++++---------------
 2 files changed, 8 insertions(+), 31 deletions(-)

diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index e6c5d631d..5ada52dd4 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -16,23 +16,17 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
     () => props.highlight.quote.split('\n'),
     [props.highlight.quote]
   )
-  const annotation = props.highlight.annotation ?? '';
 
   const StyledQuote = styled(Blockquote, {
-    margin: '0px 24px 16px 24px',
+    margin: '0px 0px 0px 0px',
     fontSize: '18px',
     lineHeight: '27px',
-    color: '$textDefault',
+    color: '$utilityTextDefault',
     cursor: 'pointer',
   })
 
   return (
     <VStack css={{ width: '100%', boxSizing: 'border-box' }}>
-      {annotation && (
-        <Box css={{p:'16px', m:'16px', ml:'24px', mr:'24px', borderRadius: '6px', bg: '$grayBase'}}>
-          <StyledText style='shareHighlightModalAnnotation'>{annotation}</StyledText>
-        </Box>)
-      }
       <StyledQuote onClick={() => {
         if (props.scrollToHighlight) {
           props.scrollToHighlight(props.highlight.id)
diff --git a/packages/web/components/templates/article/HighlightsModal.tsx b/packages/web/components/templates/article/HighlightsModal.tsx
index 9f3ffde6c..f8f7569fd 100644
--- a/packages/web/components/templates/article/HighlightsModal.tsx
+++ b/packages/web/components/templates/article/HighlightsModal.tsx
@@ -2,6 +2,7 @@ import {
   ModalRoot,
   ModalOverlay,
   ModalContent,
+  ModalTitleBar,
 } from '../../elements/ModalPrimitives'
 import { Box, HStack, VStack, Separator, SpanBox } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
@@ -33,29 +34,11 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element {
           event.preventDefault()
           props.onOpenChange(false)
         }}
-        css={{ overflow: 'auto', p: '0' }}
+        css={{ overflow: 'auto', px: '24px' }}
       >
         <VStack distribution="start" css={{ height: '100%' }}>
-          <HStack
-            distribution="between"
-            alignment="center"
-            css={{ width: '100%' }}
-          >
-            <StyledText style="modalHeadline" css={{ p: '16px' }}>All your highlights and notes</StyledText>
-            <Button
-              css={{ pt: '16px', pr: '16px' }}
-              style="ghost"
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-            >
-              <CrossIcon
-                size={20}
-                strokeColor={theme.colors.grayText.toString()}
-              />
-            </Button>
-          </HStack>
-          <Box css={{ overflow: 'auto', mt: '$2', width: '100%' }}>
+          <ModalTitleBar title="All your highlights and notes" onOpenChange={props.onOpenChange} />
+          <Box css={{ overflow: 'auto', mt: '24px', width: '100%' }}>
             {props.highlights.map((highlight) => (
               <ModalHighlightView
                 key={highlight.id}
@@ -161,10 +144,10 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
       <VStack>
         <HighlightView scrollToHighlight={props.scrollToHighlight} highlight={props.highlight} />
         {props.highlight.annotation && !isEditing ? (
-          <StyledText css={{ px: '24px' }}>{props.highlight.annotation}</StyledText>
+          <StyledText css={{ borderRadius: '6px', bg: '$grayBase', p: '16px', width: '100%' }}>{props.highlight.annotation}</StyledText>
         ) : null}
         {isEditing ? <TextEditArea /> : <ButtonStack />}
-        <Separator css={{ mt: '$2', mb: '$4' }} />
+        <Separator css={{ mt: '$2', mb: '$4', background: '$grayTextContrast' }} />
         {showDeleteConfirmation ? (
           <ConfirmationModal
             message={'Are you sure you want to delete this highlight?'}

From 6471e67fa8cc60ba683bd36f040d437d43be987f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 11 Jul 2022 19:44:43 -0700
Subject: [PATCH 4/5] Use update colour name

---
 .../web/components/templates/article/FontFamiliesOptions.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/article/FontFamiliesOptions.tsx b/packages/web/components/templates/article/FontFamiliesOptions.tsx
index 74d8be422..ab0070916 100644
--- a/packages/web/components/templates/article/FontFamiliesOptions.tsx
+++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx
@@ -55,7 +55,7 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
             css={{ cursor: 'pointer', py: '4px', width: '100%' }}
             onClick={() => props.setShowFontFamilies(false)}
           >
-            <CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
+            <CaretLeft color={theme.colors.utilityTextSubtle.toString()} size={15} />
             <StyledText css={{ textAlign: 'center', m: 0, fontSize: 14, fontWeight: 'bold', width: '100%', wordWrap: 'revert' }}>Choose Font</StyledText>
           </HStack>
         </HStack>

From 0f745fdc8de3dbd8828b3e172099798ef70f1c64 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 11 Jul 2022 19:55:53 -0700
Subject: [PATCH 5/5] Remove duplicate color

---
 packages/web/components/tokens/stitches.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index cb8746211..bca8ade05 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -156,7 +156,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         tooltipIcons: '#FDFAEC',
 
         //utility
-        utilityTextSubtle: 'rgba(10, 8, 6, 0.65)',
         textNonEssential: 'rgba(10, 8, 6, 0.4)',
         overlay: 'rgba(63, 62, 60, 0.2)',
       },