Merge pull request #1656 from omnivore-app/feat/update-landing-feature-graphic

Update the feature graphic on landing page and login page

packages/web/components/patterns/PageMetaData.tsx

@@ -1,6 +1,7 @@
 import { DetailedHTMLProps, MetaHTMLAttributes } from 'react'
 import Head from 'next/head'
 import { useDarkModeListener } from '../../lib/hooks/useDarkModeListener'
+import { webBaseURL } from '../../lib/appConfig'
 
 type MetaTag = DetailedHTMLProps<
   MetaHTMLAttributes<HTMLMetaElement>,
@@ -35,11 +36,24 @@ export function PageMetaData(props: PageMetaDataProps): JSX.Element {
         href={`/static/icons/favicon-${isDarkMode ? 'dark' : 'light'}.ico`}
       />
 
+      <meta property="fb:app_id" content="3584400838451823" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:creator:id" content="1372981426199564288" />
+      <meta name="twitter:site:id" content="1372981426199564288" />
+
       <meta property="og:type" content="website" />
       <meta property="og:site_name" content="Omnivore" />
 
+      <meta name="twitter:domain" content="omnivore.app" />
+
       {props.ogImage && (
-        <meta property="og:image" content={props.ogImage} key="og-image" />
+        <>
+          <meta property="og:image" content={props.ogImage} key="og-image" />
+          <meta
+            name="twitter:image"
+            content={`${webBaseURL}${props.ogImage}`}
+          />
+        </>
       )}
       {props.ogImage && (
         <meta property="og:image:width" content="" key="og-image-width" />
@@ -55,15 +69,21 @@ export function PageMetaData(props: PageMetaDataProps): JSX.Element {
         />
       )}
       {props.title && (
-        <meta property="og:title" content={props.title} key="og-title" />
+        <>
+          <meta property="og:title" content={props.title} key="og-title" />
+          <meta name="twitter:title" content={props.title} />
+        </>
       )}
       {props.title && <title key="title">{props.title}</title>}
       {props.description && (
-        <meta
-          property="og:description"
-          content={props.description}
-          key="og-description"
-        />
+        <>
+          <meta
+            property="og:description"
+            content={props.description}
+            key="og-description"
+          />
+          <meta name="twitter:description" content={props.description} />
+        </>
       )}
       {props.path && (
         <meta
@@ -80,12 +100,6 @@ export function PageMetaData(props: PageMetaDataProps): JSX.Element {
       {props.metaTags?.map((metatag, i) => (
         <meta key={i} {...metatag} />
       ))}
-
-      <meta property="fb:app_id" content="3584400838451823" />
-
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:creator:id" content="1372981426199564288" />
-      <meta name="twitter:site:id" content="1372981426199564288" />
     </Head>
   )
 }

packages/web/components/templates/LoginLayout.tsx

@@ -2,7 +2,6 @@ import {
   Box,
   HStack,
   MediumBreakpointBox,
-  SpanBox,
   VStack,
 } from '../elements/LayoutPrimitives'
 import { LoginForm } from './LoginForm'
@@ -97,18 +96,17 @@ function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) {
       css={{
         width: '100%',
         height: '100%',
-        marginRight: '57px',
+        marginLeft: 'auto',
         backgroundSize: 'cover',
         backgroundRepeat: 'no-repeat',
-        backgroundPositionY: '70px',
         backgroundImage: `-webkit-image-set(
-        url('/static/images/landing-illustration.png') 1x,
-        url('/static/images/landing-illustration@2x.png') 2x
-      )`,
+          url('/static/images/landingPage-feature@1x.png') 1x,
+          url('/static/landing/landingPage-feature@2x.png') 2x
+        )`,
         'background-image': `image-set(
-        url('/static/images/landing-illustration.png') 1x,
-        url('/static/images/landing-illustration@2x.png') 2x
-      )`,
+          url('/static/images/landingPage-feature@1x.png') 1x,
+          url('/static/landing/landingPage-feature@2x.png') 2x
+        )`,
       }}
     />
   )

packages/web/components/templates/landing/LandingHeader.tsx

@@ -1,57 +1,56 @@
-import Link from 'next/link'
-import { Box, SpanBox } from '../../elements/LayoutPrimitives'
+import { Box } from '../../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
+import { Button } from '../../elements/Button'
 
-const containerStyles = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  p: '0px 15px 0px 15px',
-  height: '68px',
-  minHeight: '68px',
-  display: 'flex',
-  alignItems: 'center',
-  '@md': { width: '50%' },
-  '@xsDown': { height: '48px' },
-  justifyContent: 'space-between',
-  width: '100%',
-}
-
-const linkStyles = {
-  marginLeft: 'auto',
-  verticalAlign: 'middle',
-  cursor: 'pointer',
-  lineHeight: '100%',
-}
-
-const textStyles = {
-  pt: '5px',
-  pr: '6px',
-  fontSize: 24,
-  lineHeight: '24px',
-  fontWeight: 'normal',
+const LoginButton = (): JSX.Element => {
+  return (
+    <Button
+      style="ctaDarkYellow"
+      css={{
+        display: 'flex',
+        marginLeft: 'auto',
+        borderRadius: 4,
+        border: 'unset',
+        background: 'unset',
+        color: '#3D3D3D',
+        width: '62px',
+        height: '42px',
+        fontSize: 24,
+        lineHeight: '24px',
+        fontWeight: 'normal',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      onClick={(e) => {
+        document.location.href = '/login'
+        e.preventDefault()
+      }}
+    >
+      Login
+    </Button>
+  )
 }
 
 export function LandingHeader(): JSX.Element {
   return (
-    <Box css={containerStyles}>
+    <Box
+      css={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        p: '0px 15px 0px 15px',
+        height: '68px',
+        minHeight: '68px',
+        display: 'flex',
+        alignItems: 'center',
+        '@md': { width: '50%' },
+        '@xsDown': { height: '48px' },
+        justifyContent: 'space-between',
+        width: '100%',
+      }}
+    >
       <OmnivoreNameLogo color={'#3D3D3D'} href="/login" />
-      <Box css={linkStyles}>
-        <Box>
-          <Link passHref href="/login">
-            <a
-              style={{
-                textDecoration: 'none',
-                color: '#3D3D3D',
-                fontFamily: 'Inter',
-                fontWeight: 500,
-              }}
-            >
-              <SpanBox css={textStyles}>Log in</SpanBox>
-            </a>
-          </Link>
-        </Box>
-      </Box>
+      <LoginButton />
     </Box>
   )
 }

packages/web/components/templates/landing/LandingSectionsContainer.tsx

@@ -1,38 +1,28 @@
-import Link from 'next/link'
 import { VStack, Box } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
-import { ArrowRight } from 'phosphor-react'
 import { LandingSection } from './LandingSection'
 
-const buttonStyles = {
-  display: 'flex',
-  borderRadius: 4,
-  px: 30,
-  background: 'rgb(255, 210, 52)',
-  color: '#3D3D3D',
-}
-
-const arrowStyles = {
-  marginLeft: 10,
-  padding: 2,
-}
-
 export function GetStartedButton(): JSX.Element {
   return (
-    <Button style="ctaDarkYellow" css={buttonStyles}>
-      <Link passHref href="/login">
-        <a style={{ textDecoration: 'none', color: '#3D3D3D' }}>
-          Sign Up for Free
-        </a>
-      </Link>
-      <ArrowRight
-        size={18}
-        width={18}
-        height={18}
-        style={arrowStyles}
-        color="black"
-        fontWeight="800"
-      />
+    <Button
+      style="ctaDarkYellow"
+      css={{
+        display: 'flex',
+        borderRadius: 4,
+        background: 'rgb(255, 210, 52)',
+        color: '#3D3D3D',
+        width: '172px',
+        height: '42px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: '600',
+      }}
+      onClick={(e) => {
+        document.location.href = '/login'
+        e.preventDefault()
+      }}
+    >
+      Sign Up for Free
     </Button>
   )
 }
@@ -94,7 +84,6 @@ const callToActionText = {
 }
 
 export function LandingSectionsContainer(): JSX.Element {
-  // const iconColor = 'rgb(255, 210, 52)'
   return (
     <VStack alignment="center" distribution="start" css={containerStyles}>
       <Box
@@ -108,13 +97,15 @@ export function LandingSectionsContainer(): JSX.Element {
         }}
       >
         <img
-          srcSet="/static/landing/landingPage-1.png,
-                  /static/landing/landingPage-1@2x.png 2x,
-                  /static/landing/landingPage-1@3x.png 3x"
+          height="647"
+          width="1015"
+          srcSet="/static/landing/landingPage-feature@1x.png,
+                  /static/landing/landingPage-feature@2x.png 2x,
+                  /static/landing/landingPage-feature@3x.png 3x"
           alt="landingHero-1"
           style={{
-            width: '70%',
-            maxWidth: '70%',
+            width: '85%',
+            height: 'auto',
           }}
         />
       </Box>

packages/web/pages/about.tsx

@@ -7,7 +7,7 @@ import { LandingHeader } from '../components/templates/landing/LandingHeader'
 import { LandingFooter } from '../components/templates/landing/LandingFooter'
 import { PageMetaData } from '../components/patterns/PageMetaData'
 
-const mobileContainerStyles = {
+const containerStyles = {
   alignSelf: 'center',
   marginTop: 80,
   maxWidth: 960,
@@ -44,7 +44,7 @@ export default function LandingPage(): JSX.Element {
       <PageMetaData
         title="Omnivore"
         path="/about"
-        ogImage="/static/images/og-homepage-02.png"
+        ogImage="/static/images/og-homepage-03.png"
         description="Omnivore is the free, open source, read-it-later app for serious readers."
       />
 
@@ -53,7 +53,7 @@ export default function LandingPage(): JSX.Element {
         alignment="center"
         css={{ background: '#FEFCF5', color: '#3D3D3D' }}
       >
-        <VStack css={mobileContainerStyles}>
+        <VStack css={containerStyles}>
           <Box css={headingStyles}>
             Omnivore is the free, open source, read-it-later app for serious
             readers.

packages/web/pages/index.tsx

@@ -10,7 +10,7 @@ import { useRouter } from 'next/router'
 import { PageMetaData } from '../components/patterns/PageMetaData'
 import { LoadingView } from '../components/patterns/LoadingView'
 
-const mobileContainerStyles = {
+const containerStyles = {
   alignSelf: 'center',
   marginTop: 80,
   maxWidth: 960,
@@ -54,7 +54,7 @@ export default function LandingPage(): JSX.Element {
         <PageMetaData
           title="Omnivore"
           path="/"
-          ogImage="/static/images/og-homepage-02.png"
+          ogImage="/static/images/og-homepage-03.png"
           description="Omnivore is the free, open source, read-it-later app for serious readers."
         />
         <LoadingView bgColor="#FEFCF5" />
@@ -67,7 +67,7 @@ export default function LandingPage(): JSX.Element {
       <PageMetaData
         title="Omnivore"
         path="/"
-        ogImage="/static/images/og-homepage-02.png"
+        ogImage="/static/images/og-homepage-03.png"
         description="Omnivore is the free, open source, read-it-later app for serious readers."
       />
 
@@ -76,7 +76,7 @@ export default function LandingPage(): JSX.Element {
         alignment="center"
         css={{ background: '#FEFCF5', color: '#3D3D3D' }}
       >
-        <VStack css={mobileContainerStyles}>
+        <VStack css={containerStyles}>
           <Box css={headingStyles}>
             Omnivore is the free, open source, read-it-later app for serious
             readers.

packages/web/pages/login.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from 'next/router'
 import Script from 'next/script'
-import Head from 'next/head'
 import { useState, useEffect } from 'react'
 import { LoginLayout } from './../components/templates/LoginLayout'
 import { parseErrorCodes } from '../lib/queryParamParser'
@@ -9,9 +8,8 @@ import { formatMessage } from '../locales/en/messages'
 
 export default function Login(): JSX.Element {
   const router = useRouter()
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
 
   useEffect(() => {
     if (!router.isReady) return
@@ -39,7 +37,7 @@ export default function Login(): JSX.Element {
       <PageMetaData
         title="Welcome to Omnivore"
         path="/login"
-        ogImage="/static/images/og-homepage-02.png"
+        ogImage="/static/images/og-homepage-03.png"
       />
       <LoginLayout {...loginFormProps} />
       <div data-testid="login-page-tag" />

packages/web/pages/tools/import/matter-archive.tsx

@@ -1,14 +1,7 @@
-import { ChangeEvent, useCallback, useMemo, useState } from 'react'
-import { Toaster } from 'react-hot-toast'
-
-import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { useState } from 'react'
 import { applyStoredTheme } from '../../../lib/themeUpdater'
 
-import {
-  Box,
-  HStack,
-  VStack,
-} from '../../../components/elements/LayoutPrimitives'
+import { Box, VStack } from '../../../components/elements/LayoutPrimitives'
 
 import 'antd/dist/antd.compact.css'
 import { StyledText } from '../../../components/elements/StyledText'
@@ -18,7 +11,7 @@ import {
   UploadImportFileType,
 } from '../../../lib/networking/mutations/uploadImportFileMutation'
 import { Button } from '../../../components/elements/Button'
-import Dropzone, { useDropzone } from 'react-dropzone'
+import Dropzone from 'react-dropzone'
 
 import { SyncLoader } from 'react-spinners'
 import { theme } from '../../../components/tokens/stitches.config'
@@ -30,10 +23,7 @@ export default function ImportUploader(): JSX.Element {
   applyStoredTheme(false)
 
   const [errorMessage, setErrorMessage] = useState<string | undefined>()
-  const [file, setFile] = useState<File>()
-  const [type, setType] = useState<UploadImportFileType>()
   const [uploadState, setUploadState] = useState<UploadState>('none')
-  const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
 
   const onDropAccepted = async (acceptedFiles: File[]) => {
     const contentType = 'application/zip'