Update design on Add Link, and notes modals

2022-07-11 19:25:25 -07:00
parent 9e3b192506
commit 156c4cf2cf
6 changed files with 94 additions and 114 deletions
--- 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',
--- 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>
+  )
+}
--- 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>
--- 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>
--- 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>
--- 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) {