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

register page on desktop

Browse Source
This commit is contained in:
mattyl006 2022-08-08 17:13:44 +02:00
parent 58ecd30417
commit bd56a99e97
4 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/elements/AuthHeader.js
View File

@ -18,6 +18,8 @@ const AuthHeaderStyle = styled(FlexRow)`
@media (min-width: ${({theme}) => theme.overMobile}) {
justify-content: space-around;
width: 400px;
height: 80px;
}
h1 {
@ -31,6 +33,11 @@ const AuthHeaderStyle = styled(FlexRow)`
line-height: 22px;
color: ${({theme}) => theme.colors.dark};
text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
@media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 24px;

12
src/components/elements/AuthOption.js
View File

@ -13,10 +13,22 @@ const AuthOptionStyle = styled(FlexRow)`
border: 1px solid ${({theme}) => theme.colors.dark03};
box-shadow: ${({theme}) => theme.shadow};
cursor: pointer;
transition: transform 0.3s ease-in-out;
* {
cursor: pointer;
}
&:hover {
transform: scale(1.05);
}
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 260px;
height: 50px;
padding: 10px 24px;
gap: 40px;
}
`;
const AuthOption = (props) => {

2
src/components/elements/NavBar/NavBar.js
View File

@ -55,7 +55,7 @@ const NavBar = () => {
Register
</Menu>
</FlexRow>
<FlexRow as={Link} to='/' gap='16px'>
<FlexRow as={Link} to='/login' gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'>
Sign in

25
src/pages/Register.js
View File

@ -3,7 +3,6 @@ import {FlexColumn} from '../utils/containers';
import AuthHeader from '../components/elements/AuthHeader';
import {Body, Medium} from '../utils/fonts';
import {Link} from 'react-router-dom';
import theme from '../utils/theme';
import styled from 'styled-components';
import AuthOption from '../components/elements/AuthOption';
import githubIco from '../assets/github_ico.svg';
@ -25,6 +24,25 @@ const OptionsContainerStyle = styled(FlexColumn)`
gap: 32px;
padding: 32px;
box-shadow: ${({theme}) => theme.shadow};
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 400px;
height: 382px;
}
`;
const LinkStyle = styled(Medium)`
cursor: pointer;
color: ${({theme}) => theme.colors.green};
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
@media (min-width: ${({theme}) => theme.overMobile}) {
color: ${({theme}) => theme.colors.dark};
}
`;
const Register = () => {
@ -54,10 +72,9 @@ const Register = () => {
</FlexColumn>
<Body>
Have an account?&nbsp;
<Medium as={Link} color={theme.colors.green} cursor='pointer'
display='inline-block' to='/login'>
<LinkStyle as={Link} to='/login'>
Sign in.
</Medium>
</LinkStyle>
</Body>
</OptionsContainerStyle>
</MainContainerStyle>