Style improvements for login

packages/web/components/elements/Button.tsx

@@ -25,12 +25,12 @@ export const Button = styled('button', {
         fontSize: '14px',
         fontWeight: '500',
         cursor: 'pointer',
-        border: '1px solid $yellow3',
+        border: '0px solid $yellow3',
         bg: '$ctaBlue',
         color: 'white',
         '&:hover': {
-          opacity: '0.6',
+          border: '0px solid #0056D2',
-          border: '0px solid $ctaBlue',
+          background: `#0056D2`,
         },
       },
       tldr: {
@@ -72,7 +72,6 @@ export const Button = styled('button', {
       landingCta: {
         borderRadius: 10,
         backgroundColor: '#1A1A1A',
-
         padding: '12px 100px',
         color: '#FFFFFF',
         font: '$inter',
@@ -80,6 +79,7 @@ export const Button = styled('button', {
         fontWeight: '500',
         textDecoration: 'none',
         transition: 'background-color ease-out 50ms',
+        boxShadow: `0px 4px 4px 0px rgba(0, 0, 0, 0.15)`,
         '&:hover': {
           backgroundColor: '#3D3D3D',
           outline: '0px solid #1A1A1A',
@@ -88,7 +88,7 @@ export const Button = styled('button', {
       landingSimple: {
         borderRadius: 10,
         backgroundColor: '#1A1A1A',
-        padding: '12px 25px',
+        padding: '10px 20px',
         color: '#FFFFFF',
         font: '$inter',
         fontSize: '20px',
@@ -98,6 +98,7 @@ export const Button = styled('button', {
         '&:hover': {
           backgroundColor: '#1A1A1A',
           outline: '0px solid #1A1A1A',
+          boxShadow: `0px 4px 4px 0px rgba(0, 0, 0, 0.15)`,
         },
       },
       cancelGeneric: {
@@ -115,6 +116,21 @@ export const Button = styled('button', {
           outline: '1px solid $omnivoreCtaYellow',
         },
       },
+      cancelAuth: {
+        fontSize: '13px',
+        fontWeight: 500,
+        fontFamily: 'Inter',
+        cursor: 'pointer',
+        color: '#6A6968',
+        borderRadius: '5px',
+        border: '1px solid transparent',
+        p: '10px 15px',
+        bg: 'transparent',
+        '&:hover': {
+          backgroundColor: '#2A2A2A',
+          outline: '0px solid #2A2A2A',
+        },
+      },
       ctaOutlineYellow: {
         boxSizing: 'border-box',
         borderColor: 'unset',

packages/web/components/elements/Recaptcha.tsx

@@ -9,6 +9,7 @@ export const Recaptcha = (props: RecaptchaProps): JSX.Element => {
     <>
       <GoogleReCaptchaCheckbox
         key="recaptcha"
+        theme="dark"
         onChange={(token) => {
           console.log('recaptcha: ', token)
           props.setRecaptchaToken(token)

packages/web/components/templates/AuthLayout.tsx

@@ -15,9 +15,9 @@ export function AuthLayout(props: ProfileLayoutProps): JSX.Element {
         alignment="center"
         distribution="center"
         css={{
-          // bg: '$omnivoreYellow',
           height: '100vh',
-          bg: '#898989',
+          color: '#898989',
+          background: '#2A2A2A',
         }}
       >
         {props.children}
@@ -46,7 +46,7 @@ export function AuthLayout(props: ProfileLayoutProps): JSX.Element {
           }}
         >
           <OmnivoreNameLogo
-            color={theme.colors.omnivoreGray.toString()}
+            color="#898989"
             href={props.logoDestination ?? '/login'}
           />
         </HStack>

packages/web/components/templates/LoginForm.tsx

@@ -8,6 +8,7 @@ import {
   appleAuthRedirectURI,
 } from '../../lib/appConfig'
 import { AppleIdButton } from './auth/AppleIdButton'
+import { useEffect, useRef } from 'react'
 
 export type LoginFormProps = {
   errorMessage?: string
@@ -19,7 +20,7 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
     fontWeight: '700',
     fontSize: '45px',
     lineHeight: '53px',
-    color: '$omnivoreGray',
+    color: '#FFFFFF',
     m: '0px',
   })
 
@@ -45,13 +46,12 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
           fontSize: '18px',
           lineHeight: '120%',
           m: '0px',
-          color: '$omnivoreGray',
+          color: '#898989',
         }}
       >
         Save articles and read them later in our distraction-free reader.
       </StyledText>
       <Link passHref href="/about" style={{ textDecoration: 'none' }}>
-
         <StyledText
           css={{
             fontStyle: 'normal',
@@ -59,12 +59,11 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
             fontSize: '18px',
             lineHeight: '120%',
             m: '0px',
-            color: '$omnivoreGray',
+            color: '#898989',
           }}
         >
           Learn More -&gt;
         </StyledText>
-
       </Link>
 
       <SpanBox css={{ height: '24px' }} />
@@ -106,7 +105,7 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
         <Link href="/auth/email-login" passHref legacyBehavior>
           <StyledTextSpan
             style="actionLink"
-            css={{ color: '$omnivoreGray', pt: '12px' }}
+            css={{ color: '#EDEDED', pt: '12px' }}
           >
             Continue with Email
           </StyledTextSpan>
@@ -114,10 +113,24 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
       </VStack>
       <TermAndConditionsFooter />
     </VStack>
-  );
+  )
 }
 
 function GoogleAuthButton() {
+  useEffect(() => {
+    const script = document.createElement('script')
+
+    script.src = 'https://accounts.google.com/gsi/client'
+    script.async = true
+    script.defer = true
+
+    document.body.appendChild(script)
+
+    return () => {
+      document.body.removeChild(script)
+    }
+  }, [])
+
   return (
     <Box css={{ overflow: 'hidden' }}>
       <div
@@ -155,16 +168,22 @@ export function TermAndConditionsFooter(): JSX.Element {
     >
       By signing up, you agree to Omnivore’s{' '}
       <Link href="/terms" passHref legacyBehavior>
-        <StyledTextSpan style="captionLink" css={{ color: '$omnivoreGray' }}>
+        <StyledTextSpan
+          style="captionLink"
+          css={{ color: '$omnivoreLightGray' }}
+        >
           Terms of Service
         </StyledTextSpan>
       </Link>{' '}
       and{' '}
       <Link href="/privacy" passHref legacyBehavior>
-        <StyledTextSpan style="captionLink" css={{ color: '$omnivoreGray' }}>
+        <StyledTextSpan
+          style="captionLink"
+          css={{ color: '$omnivoreLightGray' }}
+        >
           Privacy Policy
         </StyledTextSpan>
       </Link>
     </StyledText>
-  );
+  )
 }

packages/web/components/templates/ProfileLayout.tsx

@@ -45,7 +45,7 @@ export function ProfileLayout(props: ProfileLayoutProps): JSX.Element {
           }}
         >
           <OmnivoreNameLogo
-            color={theme.colors.omnivoreGray.toString()}
+            color="#898989"
             href={props.logoDestination ?? '/login'}
           />
         </HStack>

packages/web/components/templates/auth/EmailLogin.tsx

@@ -18,7 +18,7 @@ const LoginForm = (): JSX.Element => {
   return (
     <VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
       <SpanBox css={{ width: '100%' }}>
-        <FormLabel>Email</FormLabel>
+        <FormLabel css={{ color: '#D9D9D9' }}>Email</FormLabel>
         <BorderedFormInput
           autoFocus={true}
           key="email"
@@ -26,7 +26,7 @@ const LoginForm = (): JSX.Element => {
           name="email"
           value={email}
           placeholder="Email"
-          css={{ backgroundColor: 'white', color: 'black' }}
+          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={(e) => {
             e.preventDefault()
             setEmail(e.target.value)
@@ -35,14 +35,14 @@ const LoginForm = (): JSX.Element => {
       </SpanBox>
 
       <SpanBox css={{ width: '100%' }}>
-        <FormLabel>Password</FormLabel>
+        <FormLabel css={{ color: '#D9D9D9' }}>Password</FormLabel>
         <BorderedFormInput
           key="password"
           type="password"
           name="password"
           value={password}
           placeholder="Password"
-          css={{ bg: 'white', color: 'black' }}
+          css={{ bg: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={(e) => setPassword(e.target.value)}
         />
       </SpanBox>
@@ -72,16 +72,16 @@ export function EmailLogin(): JSX.Element {
         alignment="center"
         css={{
           padding: '16px',
-          background: 'white',
           minWidth: '340px',
           width: '70vw',
           maxWidth: '576px',
           borderRadius: '8px',
-          border: '1px solid #3D3D3D',
+          background: '#343434',
-          boxShadow: '#B1B1B1 9px 9px 9px -9px',
+          border: '1px solid #6A6968',
+          boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
         }}
       >
-        <StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
+        <StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
           Login
         </StyledText>
 
@@ -118,8 +118,8 @@ export function EmailLogin(): JSX.Element {
           }}
         >
           <Button
-            style={'ctaOutlineYellow'}
+            style={'cancelAuth'}
-            css={{ color: '$omnivoreGray', borderColor: '$omnivoreLightGray' }}
+            css={{}}
             type="button"
             onClick={async (event) => {
               window.localStorage.removeItem('authVerified')
@@ -134,7 +134,13 @@ export function EmailLogin(): JSX.Element {
           >
             Cancel
           </Button>
-          <Button type="submit" style={'ctaDarkYellow'}>
+          <Button
+            type="submit"
+            style="ctaBlue"
+            css={{
+              padding: '10px 50px',
+            }}
+          >
             Login
           </Button>
         </HStack>
@@ -151,7 +157,7 @@ export function EmailLogin(): JSX.Element {
         >
           Don&apos;t have an account?{' '}
           <Link href="/auth/email-signup" passHref legacyBehavior>
-            <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>
+            <StyledTextSpan style="actionLink" css={{ color: '$ctaBlue' }}>
               Sign up
             </StyledTextSpan>
           </Link>
@@ -169,7 +175,10 @@ export function EmailLogin(): JSX.Element {
         >
           Forgot your password?{' '}
           <Link href="/auth/forgot-password" passHref legacyBehavior>
-            <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>
+            <StyledTextSpan
+              style="actionLink"
+              css={{ color: '$omnivoreLightGray' }}
+            >
               Click here
             </StyledTextSpan>
           </Link>

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

@@ -34,7 +34,7 @@ export function LandingHeader(): JSX.Element {
         width: '100%',
       }}
     >
-      <OmnivoreNameLogo color={'#3D3D3D'} href="/login" />
+      <OmnivoreNameLogo color="#898989" href="/login" />
       <LoginButton />
     </Box>
   )

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

@@ -15,14 +15,7 @@ import Link from 'next/link'
 
 export function GetStartedButton(props: { lang: 'en' | 'zh' }): JSX.Element {
   return (
-    <Button
+    <Button as={Link} href="/login" style="landingCta">
-      as={Link}
-      href="/login"
-      style="landingCta"
-      css={{
-        boxShadow: `0px 4px 4px 0px rgba(0, 0, 0, 0.15)`,
-      }}
-    >
       {props.lang == 'zh' ? `免费注册` : `Sign Up for Free`}
     </Button>
   )