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}) { @media (min-width: ${({theme}) => theme.overMobile}) {
justify-content: space-around; justify-content: space-around;
width: 400px;
height: 80px;
} }
h1 { h1 {
@ -31,6 +33,11 @@ const AuthHeaderStyle = styled(FlexRow)`
line-height: 22px; line-height: 22px;
color: ${({theme}) => theme.colors.dark}; color: ${({theme}) => theme.colors.dark};
text-decoration: none; text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 24px; 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}; border: 1px solid ${({theme}) => theme.colors.dark03};
box-shadow: ${({theme}) => theme.shadow}; box-shadow: ${({theme}) => theme.shadow};
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease-in-out;
* { * {
cursor: pointer; 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) => { const AuthOption = (props) => {

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

@ -55,7 +55,7 @@ const NavBar = () => {
Register Register
</Menu> </Menu>
</FlexRow> </FlexRow>
<FlexRow as={Link} to='/' gap='16px'> <FlexRow as={Link} to='/login' gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/> <Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'> <Menu as='li'>
Sign in 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 AuthHeader from '../components/elements/AuthHeader';
import {Body, Medium} from '../utils/fonts'; import {Body, Medium} from '../utils/fonts';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import theme from '../utils/theme';
import styled from 'styled-components'; import styled from 'styled-components';
import AuthOption from '../components/elements/AuthOption'; import AuthOption from '../components/elements/AuthOption';
import githubIco from '../assets/github_ico.svg'; import githubIco from '../assets/github_ico.svg';
@ -25,6 +24,25 @@ const OptionsContainerStyle = styled(FlexColumn)`
gap: 32px; gap: 32px;
padding: 32px; padding: 32px;
box-shadow: ${({theme}) => theme.shadow}; 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 = () => { const Register = () => {
@ -54,10 +72,9 @@ const Register = () => {
</FlexColumn> </FlexColumn>
<Body> <Body>
Have an account?&nbsp; Have an account?&nbsp;
<Medium as={Link} color={theme.colors.green} cursor='pointer' <LinkStyle as={Link} to='/login'>
display='inline-block' to='/login'>
Sign in. Sign in.
</Medium> </LinkStyle>
</Body> </Body>
</OptionsContainerStyle> </OptionsContainerStyle>
</MainContainerStyle> </MainContainerStyle>