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] 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) {