From 4ba54222a874ff6b69e1ac0ff6fcc467ae5ba346 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 10 Aug 2022 14:28:39 +0800
Subject: [PATCH] Enable email login on web

---
 packages/web/components/elements/StyledText.tsx      | 12 ++++++++++++
 packages/web/components/templates/LoginForm.tsx      |  5 +++++
 .../web/components/templates/auth/EmailLogin.tsx     |  8 ++++----
 .../web/components/templates/auth/EmailSignup.tsx    |  4 ++--
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index d0c079641..bf62d2630 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -100,6 +100,18 @@ const textVariants = {
       lineHeight: '1.5',
       cursor: 'pointer',
     },
+    action: {
+      fontSize: '16px',
+      fontWeight: '500',
+      lineHeight: '1.5',
+    },
+    actionLink: {
+      fontSize: '16px',
+      fontWeight: '500',
+      lineHeight: '1.5',
+      textDecoration: 'underline',
+      cursor: 'pointer',
+    },
     highlightTitleAndAuthor: {
       fontSize: '18px',
       fontStyle: 'italic',
diff --git a/packages/web/components/templates/LoginForm.tsx b/packages/web/components/templates/LoginForm.tsx
index 9af721277..db1aff1c8 100644
--- a/packages/web/components/templates/LoginForm.tsx
+++ b/packages/web/components/templates/LoginForm.tsx
@@ -106,6 +106,11 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
           />
         </Box>
       )}
+        <Link href="/auth/email-login" passHref>
+          <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray', pt: '12px' }}>
+            Continue with Email
+          </StyledTextSpan>
+        </Link>
       </VStack>
       <TermAndConditionsFooter />
     </VStack>
diff --git a/packages/web/components/templates/auth/EmailLogin.tsx b/packages/web/components/templates/auth/EmailLogin.tsx
index cca01788c..45ed3b4bc 100644
--- a/packages/web/components/templates/auth/EmailLogin.tsx
+++ b/packages/web/components/templates/auth/EmailLogin.tsx
@@ -101,7 +101,7 @@ export function EmailLogin(): JSX.Element {
           <Button type="submit" style={'ctaDarkYellow'}>Login</Button>
         </HStack>
         <StyledText
-          style="caption"
+          style="action"
           css={{
             m: '0px',
             pt: '16px',
@@ -112,11 +112,11 @@ export function EmailLogin(): JSX.Element {
         >
           Don&apos;t have an account? {' '}
           <Link href="/auth/email-signup" passHref>
-            <StyledTextSpan style="captionLink" css={{ color: '$omnivoreGray' }}>Sign up</StyledTextSpan>
+            <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>Sign up</StyledTextSpan>
           </Link>
         </StyledText>
         <StyledText
-          style="caption"
+          style="action"
           css={{
             mt: '0px',
             pt: '4px',
@@ -127,7 +127,7 @@ export function EmailLogin(): JSX.Element {
         >
           Forgot your password? {' '}
           <Link href="/auth/forgot-password" passHref>
-            <StyledTextSpan style="captionLink" css={{ color: '$omnivoreGray' }}>Click here</StyledTextSpan>
+            <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>Click here</StyledTextSpan>
           </Link>
         </StyledText>
       </VStack>
diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index dc4948100..840aea7eb 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -165,7 +165,7 @@ export function EmailSignup(): JSX.Element {
         </HStack>
 
         <StyledText
-          style="caption"
+          style="action"
           css={{
             pt: '16px',
             color: '$omnivoreLightGray',
@@ -174,7 +174,7 @@ export function EmailSignup(): JSX.Element {
         >
           Already have an account? {' '}
           <Link href="/auth/email-login" passHref>
-            <StyledTextSpan style="captionLink" css={{ color: '$omnivoreGray' }}>Login instead</StyledTextSpan>
+            <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>Login instead</StyledTextSpan>
           </Link>
         </StyledText>
         <TermAndConditionsFooter />