s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sign in with email design on desktop

Browse Source
This commit is contained in:
mattyl006 2022-08-10 14:27:40 +02:00
parent 9d186b66f1
commit f7bbc7e13c
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/elements/AuthInput.js
View File

@ -8,6 +8,12 @@ const AuthInputStyle = styled(Medium)`
height: 36px;
padding: 4px;
border: 1px solid ${({theme}) => theme.colors.dark05};
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 310px;
height: 52px;
padding: 8px;
}
`;
const AuthLabel = styled(FlexRow)`
@ -20,6 +26,11 @@ const AuthLabel = styled(FlexRow)`
font-weight: 400;
padding: 4px;
z-index: 2;
@media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 16px;
top: -14px;
}
`;
const AuthInput = (props) => {

14
src/pages/auth/LoginWithEmail.js
View File

@ -9,6 +9,7 @@ import LinkStyle from './styles/LinkStyle';
import {Link} from 'react-router-dom';
import {Body} from '../../utils/fonts';
import theme from '../../utils/theme';
import Media from 'react-media';
const LoginWithEmail = () => {
return (
@ -17,11 +18,18 @@ const LoginWithEmail = () => {
<OptionsContainerStyle>
<AuthInput label='Email / Username'/>
<AuthInput label='Password'/>
<FlexRow width='100%' alignmentX='flex-end'>
<Button>
<Media query={theme.mobile}>
<FlexRow width='100%' alignmentX='flex-end'>
<Button>
Sign in
</Button>
</FlexRow>
</Media>
<Media query={theme.desktop}>
<Button width='112px' height='36px'>
Sign in
</Button>
</FlexRow>
</Media>
</OptionsContainerStyle>
<Body margin='32px 0 0 0'>
Forgot&nbsp;