sign in with email design on desktop
This commit is contained in:
parent
9d186b66f1
commit
f7bbc7e13c
@ -8,6 +8,12 @@ const AuthInputStyle = styled(Medium)`
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border: 1px solid ${({theme}) => theme.colors.dark05};
|
border: 1px solid ${({theme}) => theme.colors.dark05};
|
||||||
|
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
width: 310px;
|
||||||
|
height: 52px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AuthLabel = styled(FlexRow)`
|
const AuthLabel = styled(FlexRow)`
|
||||||
@ -20,6 +26,11 @@ const AuthLabel = styled(FlexRow)`
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
font-size: 16px;
|
||||||
|
top: -14px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AuthInput = (props) => {
|
const AuthInput = (props) => {
|
||||||
|
@ -9,6 +9,7 @@ import LinkStyle from './styles/LinkStyle';
|
|||||||
import {Link} from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
import {Body} from '../../utils/fonts';
|
import {Body} from '../../utils/fonts';
|
||||||
import theme from '../../utils/theme';
|
import theme from '../../utils/theme';
|
||||||
|
import Media from 'react-media';
|
||||||
|
|
||||||
const LoginWithEmail = () => {
|
const LoginWithEmail = () => {
|
||||||
return (
|
return (
|
||||||
@ -17,11 +18,18 @@ const LoginWithEmail = () => {
|
|||||||
<OptionsContainerStyle>
|
<OptionsContainerStyle>
|
||||||
<AuthInput label='Email / Username'/>
|
<AuthInput label='Email / Username'/>
|
||||||
<AuthInput label='Password'/>
|
<AuthInput label='Password'/>
|
||||||
|
<Media query={theme.mobile}>
|
||||||
<FlexRow width='100%' alignmentX='flex-end'>
|
<FlexRow width='100%' alignmentX='flex-end'>
|
||||||
<Button>
|
<Button>
|
||||||
Sign in
|
Sign in
|
||||||
</Button>
|
</Button>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
|
</Media>
|
||||||
|
<Media query={theme.desktop}>
|
||||||
|
<Button width='112px' height='36px'>
|
||||||
|
Sign in
|
||||||
|
</Button>
|
||||||
|
</Media>
|
||||||
</OptionsContainerStyle>
|
</OptionsContainerStyle>
|
||||||
<Body margin='32px 0 0 0'>
|
<Body margin='32px 0 0 0'>
|
||||||
Forgot
|
Forgot
|
||||||
|
Loading…
Reference in New Issue
Block a user