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

start new How to on desktop and create CodeShell component

Browse Source
This commit is contained in:
mattyl006 2022-09-22 12:40:11 +02:00
parent dd0f36404d
commit acca12b53f
5 changed files with 67 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/copy_ico.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.7063 2.20719L13.7922 0.293125C13.6063 0.105344 13.3501 0 13.0844 0H7.97203C6.86737 0 5.97207 0.895625 5.97207 2L5.97268 10C6.0002 11.1062 6.89705 12 8.00016 12H14C15.1 12 16 11.1 16 10V2.91406C16 2.64906 15.8938 2.39469 15.7063 2.20719ZM14.5 10C14.5 10.2761 14.2762 10.5 14 10.5H7.97203C7.69585 10.5 7.47204 10.2761 7.47204 10V2.00406C7.47204 1.72794 7.69591 1.50406 7.97203 1.50406H11.972L12.0001 3C12.0001 3.55219 12.4479 4 13.0001 4H14.4719V10H14.5ZM8.50015 14C8.50015 14.2761 8.27628 14.5 8.00016 14.5H1.97215C1.69597 14.5 1.47216 14.2761 1.47216 14L1.49966 6.00313C1.49966 5.727 1.72353 5.50313 1.99965 5.50313H5.00021V4H1.99996C0.895295 4 0 4.89531 0 6L0.000306244 14C0.000374993 15.1031 0.89592 16 2.00027 16H8.00016C9.10013 16 10.0001 15.1 10.0001 14V13H8.52827L8.50015 14Z" fill="#FCFCFC"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 916 B

28
src/components/elements/CodeShell.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import {FlexColumn, Svg} from '../../utils/containers';
import styled from 'styled-components';
import theme from '../../utils/theme';
import copyIco from '../../assets/copy_ico.svg';
const CodeShellStyle = styled(FlexColumn)`
position: relative;
padding: 40px 32px 32px;
gap: 12px;
background-color: ${({theme}) => theme.colors.dark07};
border: 1px solid ${({theme}) => theme.colors.dark};
border-radius: 4px;
width: 100%;
align-items: flex-start;
`;
const CodeShell = (props) => {
return (
<CodeShellStyle>
<Svg position='absolute' top='12px' right='12px'
backgroundColor={theme.colors.white} src={copyIco}/>
{props.children}
</CodeShellStyle>
);
};
export default CodeShell;

37
src/components/sections/HowTo.js
View File

@ -1,13 +1,38 @@
import React from 'react';
import {FlexColumn} from '../../utils/containers';
import {H2} from '../../utils/fonts';
import {FlexColumn, FlexRow} from '../../utils/containers';
import {Body, H2, Medium} from '../../utils/fonts';
import CircleNumber from '../elements/CircleNumber';
import CodeShell from '../elements/CodeShell';
const HowTo = () => {
return (
<FlexColumn padding='24px' as='section'>
<H2 as='h2'>
How to
</H2>
<FlexColumn padding='64px' gap='48px' alignmentX='flex-start' maxWidth='668px'>
<FlexColumn as='article' gap='24px' alignmentX='flex-start'>
<H2 as='h2' margin='0 0 8px 0'>
Get challenge repo
</H2>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
<CircleNumber number='1'/>
<Body as='p'>
You need to create empty repo with name:
<Medium>
yourID/challengeName
</Medium>
</Body>
</FlexRow>
<CodeShell>
siema
</CodeShell>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
<CircleNumber number='2'/>
<Body as='p'>
Pull gonito challenge repo
</Body>
</FlexRow>
<Body as='p'>
Make sure Gonito.net has access to your repo (e.g. by making it public).
</Body>
</FlexColumn>
</FlexColumn>
);
};

1
src/utils/colors.js
View File

@ -8,6 +8,7 @@ const colors = {
dark03: 'rgba(52, 52, 52, 0.3)',
dark04: 'rgba(52, 52, 52, 0.4)',
dark05: 'rgba(52, 52, 52, 0.5)',
dark07: 'rgba(52, 52, 52, 0.7)',
dark08: 'rgba(52, 52, 52, 0.8)',
};

6
src/utils/containers.js
View File

@ -2,6 +2,10 @@ import styled from 'styled-components';
const Container = styled.div`
position: ${({position}) => position ? position : 'static'};
top: ${({top}) => top ? top : 'auto'};
left: ${({left}) => left ? left : 'auto'};
right: ${({right}) => right ? right : 'auto'};
bottom: ${({bottom}) => bottom ? bottom : 'auto'};
padding: ${({padding}) => padding ? padding : '0'};
margin: ${({margin}) => margin ? margin : '0'};
width: ${({width}) => width ? width : 'auto'};
@ -58,8 +62,6 @@ const Svg = styled(Container)`
const TransBack = styled(FlexRow)`
position: fixed;
top: ${({top}) => top ? top : '0'};
left: ${({left}) => left ? left : '0'};
width: 100%;
height: 100vh;
transition: ${({transition}) => transition ? transition : 'opacity'} ${({animTime}) => animTime ? animTime : '0.3s'} ease-in-out;