From 38db6c67cf8c8cbadc731cc2a370cf0f5576d672 Mon Sep 17 00:00:00 2001
From: gitstart-omnivore <gitstart@users.noreply.github.com>
Date: Mon, 11 Apr 2022 19:52:30 +0000
Subject: [PATCH] Fixed lint issues

---
 .../templates/landing/LandingFooter.tsx       | 63 +++++++++++++------
 .../templates/landing/LandingHeader.tsx       |  9 ++-
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/packages/web/components/templates/landing/LandingFooter.tsx b/packages/web/components/templates/landing/LandingFooter.tsx
index 332efe5df..512d999b4 100644
--- a/packages/web/components/templates/landing/LandingFooter.tsx
+++ b/packages/web/components/templates/landing/LandingFooter.tsx
@@ -1,4 +1,6 @@
 import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo';
+import Link from 'next/link'
+import Image from 'next/image'
 import { Box, HStack } from '../../elements/LayoutPrimitives';
 
 const containerStyles = {
@@ -67,10 +69,15 @@ const supportStyles = {
 }
 
 const imageStyles = {
-  maxWidth: 180,
+  maxWidth: 190,
   width: '100%',
 }
 
+const socialIconContainerStyles = {
+  maxWidth: 32,
+  maxHeight: 32,
+}
+
 export function LandingFooter(): JSX.Element {
   return (
     <HStack css={containerStyles}>
@@ -78,30 +85,46 @@ export function LandingFooter(): JSX.Element {
         <OmnivoreNameLogo color='white' />
         <Box css={titleStyles}>Everything you read. Safe, organized, and easy to share.</Box>
         <HStack distribution='between' css={socialsContainerStyles}>
-          <a href='#'>
-            <img src='/static/media/twitter.png' alt='twitter'/>
-          </a>
-          <a href='#'>
-            <img src='/static/media/github.png' alt='github'/>
-          </a>
-          <a href='#'>
-            <img src='/static/media/discord.png' alt='discord'/>
-          </a>
+          <Box style={socialIconContainerStyles}>
+            <Link passHref href="#">
+              <a>
+                <Image src='/static/media/twitter.png' width={32} height={32} alt='twitter'/>
+              </a>
+            </Link>
+          </Box>
+          <Box style={socialIconContainerStyles}>
+            <Link passHref href="#">
+              <a>
+                <Image src='/static/media/github.png' width={32} height={32} alt='github'/>
+              </a>
+            </Link>
+          </Box>
+          <Box style={socialIconContainerStyles}>
+            <Link passHref href="#">
+              <a>
+                <Image src='/static/media/discord.png' width={32} height={32} alt='discord'/>
+              </a>
+            </Link>
+          </Box>
         </HStack>
         <Box css={copyrightStyles}>© 2022 Omnivore</Box>
       </Box>
       <Box css={sectionTwo}>
         <Box css={{height: 215}}>
-          <a href='#'>
-            <img src='/static/media/appStoreBadge.png' alt='app-store' style={{
-              marginBottom: 24,
-              ...imageStyles,
-            }} />
-          </a>
-          <br />
-          <a href='#'>
-            <img src='/static/media/googlePlayBadge.png' alt='play-store' style={imageStyles} />
-          </a>
+          <Box style={{marginBottom: 5, ...imageStyles}}>
+            <Link passHref href="#">
+              <a>
+                <Image src='/static/media/appStoreBadge.png' alt='app-store' width={190} height={60} layout='intrinsic'/>
+              </a>
+            </Link>
+          </Box>
+          <Box style={imageStyles}>
+            <Link passHref href="#">
+              <a>
+                <Image src='/static/media/googlePlayBadge.png' alt='app-store' width={190} height={60} layout='intrinsic'/>
+              </a>
+            </Link>
+          </Box>
         </Box>
         <Box css={contactStyles}>
           Contact
diff --git a/packages/web/components/templates/landing/LandingHeader.tsx b/packages/web/components/templates/landing/LandingHeader.tsx
index 5c7bef4e8..6eeaaa0ec 100644
--- a/packages/web/components/templates/landing/LandingHeader.tsx
+++ b/packages/web/components/templates/landing/LandingHeader.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import { Box, SpanBox } from '../../elements/LayoutPrimitives'
 import { theme } from '../../tokens/stitches.config'
 import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
@@ -38,9 +39,11 @@ export function LandingHeader(): JSX.Element {
       <OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} href='/login' />
       <Box css={linkStyles}>
         <Box>
-          <a href="/login" style={{textDecoration: 'none', color: 'black'}}>
-            <SpanBox css={textStyles}>Log in</SpanBox>
-          </a>
+          <Link passHref href="/login">
+            <a style={{textDecoration: 'none', color: 'black'}}>
+              <SpanBox css={textStyles}>Log in</SpanBox>
+            </a>
+          </Link>
         </Box>
       </Box>
     </Box>