A1 sign in UI #28
A1 sign in UI #28
Conversation
app/(auth)/signin/page.tsx
Outdated
| }} | ||
| color="black" | ||
| > | ||
| <AbsoluteCenter> |
There was a problem hiding this comment.
For PC, it is center, but for SP it is not the center. For example, the iPhone 12 Pro is too below (because it is center). Could you adjust with padding for SP? Padding-top should be 40px.
There was a problem hiding this comment.
Added top 40px on mobile size!
app/(auth)/signin/page.tsx
Outdated
| > | ||
| <AbsoluteCenter> | ||
| <Card | ||
| bg="#F8F8F8" |
There was a problem hiding this comment.
Use variable theme colour?
There was a problem hiding this comment.
I changed to theme color variable 'white' !
app/(auth)/signin/page.tsx
Outdated
| </Flex> | ||
| </Box> | ||
| </> | ||
| <Box |
There was a problem hiding this comment.
I personally think it's better to make a component for Fom because page.tsx's main job is routing. I usually don't put lots of jsx in page files for easier maintenance.
There was a problem hiding this comment.
True. I actually made three components and imported them into the page.tsx like this below. Let me know what you think.
<Card
position="absolute"
top={{ base: '0%', md: '50%' }}
left="50%"
transform={{
base: 'translate(-50%, 0%)',
md: 'translate(-50%, -50%)'
}}
bg="white"
boxShadow={{ base: '0', md: '0 4px 16px rgba(0, 0, 0, 0.1)' }}
maxW={{ base: '100%', md: '542px' }}
py="40px"
px={{ base: '16px', md: '80px' }}
>
<SignInHeader />
<SignInForm />
<SignInFooter />
</Card>
app/(auth)/signin/page.tsx
Outdated
| </FormControl> | ||
| <FormControl isInvalid={!!errors.password}> | ||
| <FormLabel>Password</FormLabel> | ||
| <InputForm type="password" {...register('password')} /> |
There was a problem hiding this comment.
Can you add the icon to show or hide the password like the Figma?
app/(auth)/signin/page.tsx
Outdated
| } from '@chakra-ui/react' | ||
| import Link from 'next/link' | ||
|
|
app/(auth)/signin/page.tsx
Outdated
|
|
||
| import { InputForm } from '@/components/input' | ||
| import { Link } from '@/components/link' | ||
| import logo from 'public/logo/logo.png' |
app/(auth)/signin/page.tsx
Outdated
| <FormControl isInvalid={!!errors.email}> | ||
| <FormLabel>Email</FormLabel> | ||
| <InputForm | ||
| {...register('email')} | ||
| minW={{ base: '300px', md: '380px' }} | ||
| /> | ||
| {errors.email && ( | ||
| <FormErrorMessage>{errors.email.message}</FormErrorMessage> | ||
| )} | ||
| </FormControl> |
There was a problem hiding this comment.
If you use darkmode in this app, you see like this. Could you fix this? This auth page does not care dark mode or light mode and same style!
There was a problem hiding this comment.
Thank you for catching that!
I fixed it and now it looks the same whether you selected dark mode or light mode :)
All I had to do was to wrap the component in Tag! I had to override background and text color for autofill but it looks good now.
const signInInputStyle = {
'input:-webkit-autofill, input:-webkit-autofill:focus': {
boxShadow: '0 0 0 1000px #E8F0FE inset',
textFillColor: 'black'
}
}
Description
Added styling to the sign-in page.
In the Figma design, there is a 'Forgot your password?' link, but since we haven't got the functionality done, I didn't include that link on the page.
Fixes # (issue)
Type of change
Check List
URL
http://localhost:3000/signin
Screenshot