reverted OmnivoreNameLogo icon and change icon sizes

packages/web/components/elements/Button.tsx

@@ -87,6 +87,19 @@ export const Button = styled('button', {
         cursor: 'pointer',
         '&:focus': { outline: 'none' },
       },
+      ctaModal: {
+        height: '32px',
+        verticalAlign: 'middle',
+        color: '$textDefault',
+        backgroundColor: '$grayBase',
+        fontWeight: '600',
+        padding: '0px 12px',
+        fontSize: '16px',
+        border: '1px solid $grayBorder',
+        cursor: 'pointer',
+        borderRadius: '8px',
+        '&:focus': { outline: 'none' },
+      },
       ctaSecondary: {
         color: '$grayText',
         border: 'none',

packages/web/components/elements/ModalPrimitives.tsx

@@ -10,6 +10,8 @@ const overlayShow = keyframes({
 
 export const ModalOverlay = styled(Overlay, {
   backgroundColor: '$overlay',
+  width: '100vw',
+  height: '100vh',
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -37,7 +39,6 @@ export const ModalContent = styled(Modal, {
   width: '90vw',
   maxWidth: '600px',
   maxHeight: '85vh',
-  p: '$1',
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
     willChange: 'transform',

packages/web/components/elements/StyledText.tsx

@@ -50,6 +50,24 @@ const textVariants = {
       color: '$grayText',
       margin: 0,
     },
+    modalTitle: {
+      fontSize: '29px',
+      lineHeight: '37.7px',
+      color: '$textDefault',
+      margin: 0,
+    },
+    boldText: {
+      fontWeight: '600',
+      fontSize: '16px',
+      lineHeight: '1',
+      color: '$textDefault',
+    },
+    shareHighlightModalAnnotation: {
+      fontSize: '18px',
+      lineHeight: '23.4px',
+      color: '$textSubtle',
+      m: 0,
+    },
     footnote: {
       fontSize: '$1',
     },
@@ -81,12 +99,13 @@ const textVariants = {
       lineHeight: '1.5',
       cursor: 'pointer',
     },
-    highlightAuthor: {
-      fontSize: '14px',
-      fontWeight: '600',
-      lineHeight: '1.5',
+    highlightTitleAndAuthor: {
+      fontSize: '18px',
+      fontStyle: 'italic',
+      lineHeight: '22.5px',
+      letterSpacing: '0.01em',
       margin: '0px',
-      color: '$omnivoreGray',
+      color: '$textSubtle',
     },
     highlightTitle: {
       fontSize: '14px',

packages/web/components/elements/images/CloseIcon.tsx

@@ -0,0 +1,19 @@
+type CloseIconProps = {
+  size: number
+  strokeColor: string
+}
+
+export function CloseIcon(props: CloseIconProps): JSX.Element {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox={`0 0 ${props.size} ${props.size}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M18.75 5.75L5.25 19.25" stroke={props.strokeColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M18.75 19.25L5.25 5.75" stroke={props.strokeColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  )
+}