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