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

Fix colours on ConfirmProfile and update naming

Browse Source
This commit is contained in:
Jackson Harper
2024-05-08 19:17:47 +08:00
parent c47e1581d4
commit 543ecd0d91
2 changed files with 112 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
packages/web/components/templates/ConfirmProfileModal.tsx → packages/web/components/templates/ConfirmProfileForm.tsx
View File

@ -1,16 +1,19 @@
import { ModalRoot, ModalContent } from '../elements/ModalPrimitives'
import { HStack, VStack } from '../elements/LayoutPrimitives'
import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
import { Button } from '../elements/Button'
import { StyledText } from '../elements/StyledText'
import { useCallback, useState } from 'react'
import { BorderedFormInput, FormInput } from '../elements/FormElements'
import { BorderedTextArea } from '../elements/StyledTextArea'
import { TermAndConditionsFooter } from '../templates/LoginForm'
import {
BorderedFormInput,
FormInput,
FormLabel,
} from '../elements/FormElements'
import { TermAndConditionsFooter } from './LoginForm'
import { fetchEndpoint } from '../../lib/appConfig'
import { useValidateUsernameQuery } from '../../lib/networking/queries/useValidateUsernameQuery'
import { logoutMutation } from '../../lib/networking/mutations/logoutMutation'
export function ConfirmProfileModal(): JSX.Element {
export function ConfirmProfileForm(): JSX.Element {
const [name, setName] = useState('')
const [username, setUsername] = useState('')
const [debouncedUsername, setDebouncedUsername] = useState('')
@ -83,99 +86,108 @@ export function ConfirmProfileModal(): JSX.Element {
}, [bio, name, username])
return (
<ModalRoot defaultOpen>
<ModalContent
onPointerDownOutside={(event) => {
event.preventDefault()
<form
onSubmit={(event) => {
event.preventDefault()
submitProfile()
}}
>
<VStack
alignment="center"
css={{
padding: '16px',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',
borderRadius: '8px',
background: '#343434',
border: '1px solid #6A6968',
boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
}}
css={{ overflow: 'auto', maxWidth: '30em' }}
>
<form
onSubmit={(event) => {
event.preventDefault()
submitProfile()
}}
>
<VStack
alignment="center"
css={{
px: '$2',
gap: '$2',
}}
>
<StyledText style="subHeadline">Create Your Profile</StyledText>
<StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
Create profile
</StyledText>
<VStack css={{ width: '100%' }}>
<HStack
<VStack
css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
>
<VStack css={{ width: '100%', gap: '5px' }}>
<FormLabel className="required" css={{ color: '#D9D9D9' }}>
Username
</FormLabel>
<BorderedFormInput
autoFocus={true}
type="text"
name="username"
value={username}
placeholder="Username"
onChange={handleUsernameChange}
css={{
backgroundColor: '#2A2A2A',
color: 'white',
border: 'unset',
}}
required
/>
{username.length > 0 && usernameErrorMessage && (
<StyledText
style="caption"
css={{
width: '100%',
borderRadius: '8px',
border: '1px solid #3D3D3D',
boxShadow: '#B1B1B1 9px 9px 9px -9px',
p: '$2',
m: 0,
pl: '$2',
color: '$error',
alignSelf: 'flex-start',
}}
>
<StyledText css={{ m: 0, p: 0 }}>@</StyledText>
<FormInput
type="text"
value={username}
placeholder="Username"
onChange={handleUsernameChange}
/>
</HStack>
{username.length > 0 && usernameErrorMessage && (
<StyledText
style="caption"
css={{
m: 0,
pl: '$2',
color: '$error',
alignSelf: 'flex-start',
}}
>
{usernameErrorMessage}
</StyledText>
)}
{isUsernameValid && (
<StyledText
style="caption"
css={{
m: 0,
pl: '$2',
alignSelf: 'flex-start',
color: '$omnivoreGray',
}}
>
Username is available.
</StyledText>
)}
</VStack>
{usernameErrorMessage}
</StyledText>
)}
{isUsernameValid && (
<StyledText
style="caption"
css={{
m: 0,
pl: '$2',
alignSelf: 'flex-start',
}}
>
Username is available.
</StyledText>
)}
</VStack>
<VStack css={{ width: '100%', gap: '5px' }}>
<FormLabel className="required" css={{ color: '#D9D9D9' }}>
Name
</FormLabel>
<BorderedFormInput
type="text"
value={name}
placeholder="Name"
onChange={handleNameChange}
css={{
backgroundColor: '#2A2A2A',
color: 'white',
border: 'unset',
}}
maxLength={30}
/>
<BorderedTextArea
css={{
mt: '$2',
width: '100%',
minHeight: '$6',
}}
placeholder={'Bio (optional)'}
value={bio}
onChange={handleBioChange}
maxLength={400}
/>
{errorMessage && (
<StyledText style="error">{errorMessage}</StyledText>
)}
<Button style="ctaDarkYellow" css={{ width: '50%', my: '$2' }}>
Sign Up
</Button>
</VStack>
{errorMessage && (
<StyledText style="error">{errorMessage}</StyledText>
)}
<HStack
alignment="center"
distribution="end"
css={{
gap: '10px',
width: '100%',
height: '80px',
}}
>
<Button
style="ghost"
style="cancelAuth"
onClick={async (e) => {
e.preventDefault()
window.localStorage.removeItem('authVerified')
@ -188,20 +200,20 @@ export function ConfirmProfileModal(): JSX.Element {
window.location.href = '/'
}}
>
<StyledText
css={{
color: '$omnivoreRed',
textDecoration: 'underline',
cursor: 'pointer',
}}
>
Cancel
</StyledText>
Cancel
</Button>
<TermAndConditionsFooter />
</VStack>
</form>
</ModalContent>
</ModalRoot>
<Button
style="ctaBlue"
css={{
padding: '10px 50px',
}}
>
Sign Up
</Button>
</HStack>
<TermAndConditionsFooter />
</VStack>
</VStack>
</form>
)
}

4
packages/web/pages/confirm-profile.tsx
View File

@ -1,13 +1,13 @@
import { PageMetaData } from '../components/patterns/PageMetaData'
import { ProfileLayout } from '../components/templates/ProfileLayout'
import { ConfirmProfileModal } from '../components/templates/ConfirmProfileModal'
import { ConfirmProfileForm } from '../components/templates/ConfirmProfileForm'
export default function ConfirmProfilePage(): JSX.Element {
return (
<>
<PageMetaData title="Create Profile - Omnivore" path="/confirm-profile" />
<ProfileLayout>
<ConfirmProfileModal />
<ConfirmProfileForm />
</ProfileLayout>
<div data-testid="confirm-profile-page-tag" />
</>