From d0f3c2eb91ba99bc17a9f42d37ddf173f5700084 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Aug 2024 14:13:30 +0800
Subject: [PATCH] Layout improvements for auth pages

---
 packages/web/components/elements/StyledText.tsx            | 2 +-
 .../web/components/templates/auth/EmailForgotPassword.tsx  | 7 +++----
 packages/web/components/templates/auth/EmailLogin.tsx      | 7 +++----
 packages/web/components/templates/auth/EmailSignup.tsx     | 2 +-
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 6c2fd86cb..057b785a4 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -4,7 +4,7 @@ const textVariants = {
   style: {
     body: {
       fontSize: '$2',
-      lineHeight: '1.25',
+      lineHeight: '1.50',
     },
     logoTitle: {
       fontFamily: 'Inter',
diff --git a/packages/web/components/templates/auth/EmailForgotPassword.tsx b/packages/web/components/templates/auth/EmailForgotPassword.tsx
index 760c43c43..6de0ed443 100644
--- a/packages/web/components/templates/auth/EmailForgotPassword.tsx
+++ b/packages/web/components/templates/auth/EmailForgotPassword.tsx
@@ -40,9 +40,8 @@ const ForgotPasswordForm = (): JSX.Element => {
 export function EmailForgotPassword(): JSX.Element {
   const router = useRouter()
   const [email, setEmail] = useState<string>('')
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
   const recaptchaTokenRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -59,7 +58,7 @@ export function EmailForgotPassword(): JSX.Element {
       <VStack
         alignment="center"
         css={{
-          padding: '16px',
+          padding: '20px',
           minWidth: '340px',
           width: '70vw',
           maxWidth: '576px',
diff --git a/packages/web/components/templates/auth/EmailLogin.tsx b/packages/web/components/templates/auth/EmailLogin.tsx
index 67cd5d3c9..aff6b65a7 100644
--- a/packages/web/components/templates/auth/EmailLogin.tsx
+++ b/packages/web/components/templates/auth/EmailLogin.tsx
@@ -52,9 +52,8 @@ const LoginForm = (): JSX.Element => {
 
 export function EmailLogin(): JSX.Element {
   const router = useRouter()
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
   const recaptchaTokenRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -71,7 +70,7 @@ export function EmailLogin(): JSX.Element {
       <VStack
         alignment="center"
         css={{
-          padding: '16px',
+          padding: '20px',
           minWidth: '340px',
           width: '70vw',
           maxWidth: '576px',
diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index 8fa43db10..db4f4550a 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -150,7 +150,7 @@ export function EmailSignup(): JSX.Element {
         <VStack
           alignment="center"
           css={{
-            padding: '16px',
+            padding: '20px',
             minWidth: '340px',
             width: '70vw',
             maxWidth: '576px',