From acca12b53fab4f22984eb18c672c1edcd5edf966 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Thu, 22 Sep 2022 12:40:11 +0200 Subject: [PATCH] start new How to on desktop and create CodeShell component --- src/assets/copy_ico.svg | 3 +++ src/components/elements/CodeShell.js | 28 +++++++++++++++++++++ src/components/sections/HowTo.js | 37 +++++++++++++++++++++++----- src/utils/colors.js | 1 + src/utils/containers.js | 6 +++-- 5 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 src/assets/copy_ico.svg create mode 100644 src/components/elements/CodeShell.js diff --git a/src/assets/copy_ico.svg b/src/assets/copy_ico.svg new file mode 100644 index 0000000..c99ce18 --- /dev/null +++ b/src/assets/copy_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/elements/CodeShell.js b/src/components/elements/CodeShell.js new file mode 100644 index 0000000..319bc3d --- /dev/null +++ b/src/components/elements/CodeShell.js @@ -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 ( + + + {props.children} + + ); +}; + +export default CodeShell; \ No newline at end of file diff --git a/src/components/sections/HowTo.js b/src/components/sections/HowTo.js index 5130516..41fa621 100644 --- a/src/components/sections/HowTo.js +++ b/src/components/sections/HowTo.js @@ -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 ( - -

- How to -

+ + +

+ Get challenge repo +

+ + + + You need to create empty repo with name: + + yourID/challengeName + + + + + siema + + + + + Pull gonito challenge repo + + + + Make sure Gonito.net has access to your repo (e.g. by making it public). + + ); }; diff --git a/src/utils/colors.js b/src/utils/colors.js index 5b632a8..40edebe 100644 --- a/src/utils/colors.js +++ b/src/utils/colors.js @@ -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)', }; diff --git a/src/utils/containers.js b/src/utils/containers.js index ee5d478..7702434 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -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;