Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login and auth styling

Browse Source
This commit is contained in:
Jackson Harper
2024-05-07 10:58:52 +08:00
parent c830e8ce4e
commit 9fa6683675
7 changed files with 54 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/components/templates/ProfileLayout.tsx
View File

@ -14,7 +14,6 @@ export function ProfileLayout(props: ProfileLayoutProps): JSX.Element {
alignment="center"
distribution="center"
css={{
// bg: '$omnivoreYellow',
height: '100vh',
bg: '$omnivoreYellow',
}}

22
packages/web/components/templates/auth/EmailForgotPassword.tsx
View File

@ -15,8 +15,10 @@ const ForgotPasswordForm = (): JSX.Element => {
return (
<VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
<SpanBox css={{ width: '100%' }}>
<FormLabel>Email</FormLabel>
<VStack css={{ width: '100%', gap: '5px' }}>
<FormLabel className="required" css={{ color: '#D9D9D9' }}>
Email
</FormLabel>
<BorderedFormInput
key="email"
type="email"
@ -24,13 +26,13 @@ const ForgotPasswordForm = (): JSX.Element => {
value={email}
placeholder="Email"
autoFocus={true}
css={{ bg: 'white', color: 'black' }}
css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
onChange={(e) => {
e.preventDefault()
setEmail(e.target.value)
}}
/>
</SpanBox>
</VStack>
</VStack>
)
}
@ -58,16 +60,16 @@ export function EmailForgotPassword(): JSX.Element {
alignment="center"
css={{
padding: '16px',
background: 'white',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',
borderRadius: '8px',
border: '1px solid #3D3D3D',
boxShadow: '#B1B1B1 9px 9px 9px -9px',
background: '#343434',
border: '1px solid #6A6968',
boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
}}
>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
<StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
Reset your password
</StyledText>
@ -93,7 +95,7 @@ export function EmailForgotPassword(): JSX.Element {
)}
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
<Button type="submit" style="ctaBlue" css={{ my: '20px' }}>
Reset Password
</Button>
<Button
@ -112,7 +114,7 @@ export function EmailForgotPassword(): JSX.Element {
>
<StyledText
css={{
color: '$omnivoreRed',
color: '$omnivoreLightGray',
textDecoration: 'underline',
cursor: 'pointer',
}}

11
packages/web/components/templates/auth/EmailLogin.tsx
View File

@ -1,4 +1,4 @@
import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { HStack, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText, StyledTextSpan } from '../../elements/StyledText'
import { useEffect, useRef, useState } from 'react'
@ -17,7 +17,7 @@ const LoginForm = (): JSX.Element => {
return (
<VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
<SpanBox css={{ width: '100%' }}>
<VStack css={{ width: '100%', gap: '5px' }}>
<FormLabel css={{ color: '#D9D9D9' }}>Email</FormLabel>
<BorderedFormInput
autoFocus={true}
@ -32,9 +32,9 @@ const LoginForm = (): JSX.Element => {
setEmail(e.target.value)
}}
/>
</SpanBox>
</VStack>
<SpanBox css={{ width: '100%' }}>
<VStack css={{ width: '100%', gap: '5px' }}>
<FormLabel css={{ color: '#D9D9D9' }}>Password</FormLabel>
<BorderedFormInput
key="password"
@ -45,7 +45,7 @@ const LoginForm = (): JSX.Element => {
css={{ bg: '#2A2A2A', color: 'white', border: 'unset' }}
onChange={(e) => setPassword(e.target.value)}
/>
</SpanBox>
</VStack>
</VStack>
)
}
@ -119,7 +119,6 @@ export function EmailLogin(): JSX.Element {
>
<Button
style={'cancelAuth'}
css={{}}
type="button"
onClick={async (event) => {
window.localStorage.removeItem('authVerified')

51
packages/web/components/templates/auth/EmailSignup.tsx
View File

@ -39,7 +39,9 @@ const SignUpForm = (): JSX.Element => {
return (
<VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
<SpanBox css={{ width: '100%' }}>
<FormLabel className="required">Email</FormLabel>
<FormLabel className="required" css={{ color: '#D9D9D9' }}>
Email
</FormLabel>
<BorderedFormInput
autoFocus={true}
key="email"
@ -47,7 +49,7 @@ const SignUpForm = (): JSX.Element => {
name="email"
defaultValue={email}
placeholder="Email"
css={{ backgroundColor: 'white', color: 'black' }}
css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
onChange={(e) => {
e.preventDefault()
setEmail(e.target.value)
@ -56,40 +58,46 @@ const SignUpForm = (): JSX.Element => {
/>
</SpanBox>
<SpanBox css={{ width: '100%' }}>
<FormLabel className="required">Password</FormLabel>
<FormLabel className="required" css={{ color: '#D9D9D9' }}>
Password
</FormLabel>
<BorderedFormInput
key="password"
type="password"
name="password"
defaultValue={password}
placeholder="Password"
css={{ bg: 'white', color: 'black' }}
css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
onChange={(e) => setPassword(e.target.value)}
required
/>
</SpanBox>
<SpanBox css={{ width: '100%' }}>
<FormLabel className="required">Full Name</FormLabel>
<FormLabel className="required" css={{ color: '#D9D9D9' }}>
Full Name
</FormLabel>
<BorderedFormInput
key="fullname"
type="text"
name="name"
defaultValue={fullname}
placeholder="Full Name"
css={{ bg: 'white', color: 'black' }}
css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
onChange={(e) => setFullname(e.target.value)}
required
/>
</SpanBox>
<SpanBox css={{ width: '100%' }}>
<FormLabel className="required">Username</FormLabel>
<FormLabel className="required" css={{ color: '#D9D9D9' }}>
Username
</FormLabel>
<BorderedFormInput
key="username"
type="text"
name="username"
defaultValue={username}
placeholder="Username"
css={{ bg: 'white', color: 'black' }}
css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
onChange={handleUsernameChange}
required
/>
@ -145,16 +153,16 @@ export function EmailSignup(): JSX.Element {
alignment="center"
css={{
padding: '16px',
background: 'white',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',
borderRadius: '8px',
border: '1px solid #3D3D3D',
boxShadow: '#B1B1B1 9px 9px 9px -9px',
background: '#343434',
border: '1px solid #6A6968',
boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
}}
>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
<StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
Sign Up
</StyledText>
@ -204,11 +212,7 @@ export function EmailSignup(): JSX.Element {
}}
>
<Button
style={'ctaOutlineYellow'}
css={{
color: '$omnivoreGray',
borderColor: 'rgba(0, 0, 0, 0.06)',
}}
style="cancelAuth"
type="button"
onClick={async () => {
window.localStorage.removeItem('authVerified')
@ -223,7 +227,13 @@ export function EmailSignup(): JSX.Element {
>
Cancel
</Button>
<Button type="submit" style={'ctaDarkYellow'}>
<Button
type="submit"
style="ctaBlue"
css={{
padding: '10px 50px',
}}
>
Sign Up
</Button>
</HStack>
@ -238,10 +248,7 @@ export function EmailSignup(): JSX.Element {
>
Already have an account?{' '}
<Link href="/auth/email-login" passHref legacyBehavior>
<StyledTextSpan
style="actionLink"
css={{ color: '$omnivoreGray' }}
>
<StyledTextSpan style="actionLink" css={{ color: '$ctaBlue' }}>
Login instead
</StyledTextSpan>
</Link>

7
packages/web/components/templates/auth/ResetSent.tsx
View File

@ -9,7 +9,8 @@ export function ResetSent(): JSX.Element {
css={{
width: '100vw',
height: '100vh',
bg: '$omnivoreYellow',
color: '#898989',
background: '#2A2A2A',
overflowY: 'clip',
}}
>
@ -17,11 +18,11 @@ export function ResetSent(): JSX.Element {
css={{
width: '100%',
margin: '40px',
color: '$omnivoreGray',
color: '#898989',
'@xl': { margin: '138px' },
}}
>
<h1>Reset email sent</h1>
<h1 style={{ color: 'white' }}>Reset email sent</h1>
<Box>
If there is an account associated with the email specified we sent a
password reset link. Click the link to reset your password. You may

8
packages/web/components/templates/auth/VerifyEmail.tsx
View File

@ -9,7 +9,8 @@ export function VerifyEmail(): JSX.Element {
css={{
width: '100vw',
height: '100vh',
bg: '$omnivoreYellow',
color: '#898989',
background: '#2A2A2A',
overflowY: 'clip',
}}
>
@ -17,12 +18,11 @@ export function VerifyEmail(): JSX.Element {
css={{
width: '100%',
margin: '40px',
color: '$omnivoreGray',
'@xl': { margin: '138px' },
}}
>
<h1>Verify your email address</h1>
<Box>
<h1 style={{ color: 'white' }}>Verify your email address</h1>
<Box css={{ color: '#898989' }}>
We sent a verification link to the email you provided. Click the
link to verify your email. You may need to check your spam folder.
</Box>

1
packages/web/pages/login.tsx
View File

@ -1,5 +1,4 @@
import { useRouter } from 'next/router'
import Script from 'next/script'
import { useState, useEffect } from 'react'
import { LoginLayout } from './../components/templates/LoginLayout'
import { parseErrorCodes } from '../lib/queryParamParser'