Fix issue with Google auth button occasionally dissapearing

packages/web/components/templates/LoginLayout.tsx

@@ -8,10 +8,8 @@ import {
 import { LoginForm } from './LoginForm'
 import type { LoginFormProps } from './LoginForm'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
-import { theme } from '../tokens/stitches.config'
 
 import featureFullWidthImage from '../../public/static/images/login/login-feature-image-full.png'
-import featureHalfWidthImage from '../../public/static/images/login/login-feature-image-half.png'
 
 export function LoginLayout(props: LoginFormProps): JSX.Element {
   return (
@@ -37,10 +35,7 @@ export function LoginLayout(props: LoginFormProps): JSX.Element {
           width: '100%',
         }}
       >
-        <OmnivoreNameLogo
-          color={theme.colors.omnivoreGray.toString()}
-          href="/login"
-        />
+        <OmnivoreNameLogo color="#898989" href="/login" />
       </Box>
     </>
   )
@@ -53,9 +48,10 @@ function MobileLoginLayout(props: LoginFormProps) {
         alignment="center"
         distribution="center"
         css={{
-          bg: '$omnivoreYellow',
           width: '100%',
           flexGrow: 1,
+          color: '#898989',
+          background: '#2A2A2A',
         }}
       >
         <LoginForm {...props} />
@@ -72,8 +68,9 @@ function MediumLoginLayout(props: LoginFormProps) {
       css={{
         width: '100vw',
         height: '100vh',
-        bg: '$omnivoreYellow',
         overflowY: 'clip',
+        color: '#898989',
+        background: '#2A2A2A',
       }}
     >
       <Box
@@ -104,11 +101,6 @@ const srcSetToImageSet = (srcFallback: string, srcSet?: string): string => {
 }
 
 function OmnivoreIllustration() {
-  const { props: halfWidthImgProps } = getImgProps({
-    src: featureHalfWidthImage,
-    alt: '',
-  })
-
   const { props: fullWidthImgProps } = getImgProps({
     src: featureFullWidthImage,
     alt: '',
@@ -123,11 +115,10 @@ function OmnivoreIllustration() {
         backgroundSize: 'cover',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'left',
-        backgroundImage: srcSetToImageSet(halfWidthImgProps.src, halfWidthImgProps.srcSet),
-
-        '@media (min-aspect-ratio: 2/1)': {
-          backgroundImage: srcSetToImageSet(fullWidthImgProps.src, fullWidthImgProps.srcSet),
-        },
+        backgroundImage: srcSetToImageSet(
+          fullWidthImgProps.src,
+          fullWidthImgProps.srcSet
+        ),
       }}
     />
   )

packages/web/pages/login.tsx

@@ -8,8 +8,9 @@ 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
@@ -30,10 +31,6 @@ export default function Login(): JSX.Element {
 
   return (
     <>
-      <Script
-        src="https://accounts.google.com/gsi/client"
-        strategy="afterInteractive"
-      />
       <PageMetaData
         title="Welcome to Omnivore"
         path="/login"