Clean up the design of FormModals

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',

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',

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%',

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',

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>

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

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)',