From a37e885323d838ef23bfa0274e6344fdb9523ea4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 16 Jan 2023 12:28:07 +0800
Subject: [PATCH] Improve CLS of login button on landing page

---
 .../templates/landing/LandingHeader.tsx       | 93 +++++++++----------
 .../landing/LandingSectionsContainer.tsx      | 23 +++--
 2 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/packages/web/components/templates/landing/LandingHeader.tsx b/packages/web/components/templates/landing/LandingHeader.tsx
index d50739b38..3c9866897 100644
--- a/packages/web/components/templates/landing/LandingHeader.tsx
+++ b/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>
   )
 }
diff --git a/packages/web/components/templates/landing/LandingSectionsContainer.tsx b/packages/web/components/templates/landing/LandingSectionsContainer.tsx
index 0d2f762cb..29c4e2926 100644
--- a/packages/web/components/templates/landing/LandingSectionsContainer.tsx
+++ b/packages/web/components/templates/landing/LandingSectionsContainer.tsx
@@ -2,22 +2,21 @@ import { VStack, Box } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { LandingSection } from './LandingSection'
 
-const buttonStyles = {
-  display: 'flex',
-  borderRadius: 4,
-  background: 'rgb(255, 210, 52)',
-  color: '#3D3D3D',
-  width: '172px',
-  height: '42px',
-  alignItems: 'center',
-  justifyContent: 'center',
-}
-
 export function GetStartedButton(): JSX.Element {
   return (
     <Button
       style="ctaDarkYellow"
-      css={buttonStyles}
+      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()