Merge pull request #948 from omnivore-app/modals-design-cleanup

modals design cleanup
2022-07-12 09:11:12 -07:00
parent f7a023939d 0f745fdc8d
commit 4ebcc763c8
12 changed files with 139 additions and 165 deletions
--- 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',
--- 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>
        ))}
@ -96,13 +96,14 @@ 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',
          fontSize: '16px',
          textIndent: '8px',
          marginBottom: '2px',
+          height: '38px',
          color: '$grayTextContrast',
          '&:focus': {
            outline: 'none',
--- 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, {})

@ -37,10 +41,72 @@ export const ModalContent = styled(Modal, {
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '90vw',
-  maxWidth: '600px',
+  maxWidth: '450px',
  maxHeight: '85vh',
  '@smDown': {
    maxWidth: '95%',
    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/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',
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@ -1,15 +1,17 @@
 import {
+  ModalButtonBar,
  ModalContent,
  ModalOverlay,
  ModalRoot,
+  ModalTitleBar,
 } from '../elements/ModalPrimitives'
 import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
 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 +32,10 @@ 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%' }}
-          >
-            <StyledText style="modalHeadline" css={{ p: '16px' }}>
-              {props.title}
-            </StyledText>
-            <Button
-              css={{ pt: '16px', pr: '16px' }}
-              style="ghost"
-              onClick={() => {
-                props.onOpenChange(false)
-              }}
-            >
-              <CrossIcon
-                size={20}
-                strokeColor={theme.colors.grayText.toString()}
-              />
-            </Button>
-          </HStack>
+          <ModalTitleBar title={props.title} onOpenChange={props.onOpenChange} />
          <Box css={{ width: '100%' }}>
            <form
              onSubmit={(event) => {
@ -63,36 +45,16 @@ 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'}>
-                      {input.label}
+                <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"
-                distribution="end"
-                css={{
-                  width: '100%',
-                  padding: '32px 22px 20px 0',
-                }}
-              >
-                <Button style={'ctaDarkYellow'}>
-                  {props.acceptButtonLabel || 'Submit'}
-                </Button>
-              </HStack>
+              <ModalButtonBar onOpenChange={props.onOpenChange} acceptButtonLabel={props.acceptButtonLabel} />
            </form>
          </Box>
        </VStack>
--- 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)
--- 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>
--- 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/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?'}
--- 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,34 +65,15 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
      <ModalOverlay />
      <ModalContent
-        css={{ bg: '$grayBg', maxWidth: '20em', pt: '0px' }}
+        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>
-          <SpanBox css={{ width: '100%', height: '1px', opacity: '0.2', backgroundColor: theme.colors.grayText.toString() }} />          
-          <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()
@ -119,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/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,6 @@ 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)',
        textNonEssential: 'rgba(10, 8, 6, 0.4)',
        overlay: 'rgba(63, 62, 60, 0.2)',
      },
@ -179,7 +180,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 +208,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)',

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