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

correct mini challenges alignment and metric icon

Browse Source
This commit is contained in:
mattyl006 2022-07-08 11:03:21 +02:00
parent 24e2c825db
commit 84972340b3
4 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/metric_ico.svg
View File

@ -1,3 +1 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M554.9 154.5c-17.62-35.25-68.12-35.38-85.87 0c-87 174.3-84.1 165.9-84.1 181.5c0 44.13 57.25 80 128 80s127.1-35.88 127.1-80C639.1 319.9 641.4 327.3 554.9 154.5zM439.1 320l71.96-144l72.17 144H439.1zM256 336c0-16.12 1.375-8.75-85.12-181.5c-17.62-35.25-68.12-35.38-85.87 0c-87 174.3-84.1 165.9-84.1 181.5c0 44.13 57.25 80 127.1 80S256 380.1 256 336zM127.9 176L200.1 320H55.96L127.9 176zM495.1 448h-143.1V153.3C375.5 143 393.1 121.8 398.4 96h113.6c17.67 0 31.1-14.33 31.1-32s-14.33-32-31.1-32h-128.4c-14.62-19.38-37.5-32-63.62-32S270.1 12.62 256.4 32H128C110.3 32 96 46.33 96 64S110.3 96 127.1 96h113.6c5.25 25.75 22.87 47 46.37 57.25V448H144c-26.51 0-48.01 21.49-48.01 48c0 8.836 7.165 16 16 16h416c8.836 0 16-7.164 16-16C544 469.5 522.5 448 495.1 448z"/></svg>
<path d="M6.27174 15.555C5.67838 16.1483 4.71376 16.1483 4.1204 15.555L1.1961 12.6294C0.601299 12.036 0.601299 11.0714 1.1961 10.4781L2.80643 8.86615L4.32982 10.3892C4.52655 10.5891 4.85021 10.5891 5.04694 10.3892C5.24684 10.1925 5.24684 9.86884 5.04694 9.67211L3.52418 8.14904L4.83751 6.83539L6.36059 8.35846C6.55732 8.55837 6.88097 8.55837 7.0777 8.35846C7.2776 8.16173 7.2776 7.83808 7.0777 7.64135L5.55463 6.11828L6.86828 4.80463L8.39135 6.3277C8.58808 6.5276 8.91173 6.5276 9.10846 6.3277C9.30836 6.13097 9.30836 5.80732 9.10846 5.61059L7.58539 4.08752L8.89904 2.77418L10.4221 4.29694C10.6188 4.49684 10.9425 4.49684 11.1392 4.29694C11.3391 4.10021 11.3391 3.77656 11.1392 3.57983L9.61615 2.05644L11.2281 0.446105C11.8214 -0.148702 12.786 -0.148702 13.3794 0.446105L16.305 3.3704C16.8983 3.96377 16.8983 4.92838 16.305 5.52174L6.27174 15.555Z" fill="#343434"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 969 B

After

Width:  |  Height:  |  Size: 996 B

3
src/components/elements/IconLabel.js
View File

@ -5,8 +5,7 @@ import {Medium} from "../../utils/fonts";
const IconLabel = (props) => { const IconLabel = (props) => {
return ( return (
<FlexRow gap={props.gap}> <FlexRow gap={props.gap}>
<Svg className='icon' <Svg width={props.size} height={props.size}
width={props.size} height={props.size}
src={props.ico}/> src={props.ico}/>
<Medium as='p'> <Medium as='p'>
{props.children} {props.children}

10
src/components/elements/MiniChallenge.js
View File

@ -30,7 +30,7 @@ const ChallengeStyle = styled(FlexColumn)`
const Line = styled(Container)` const Line = styled(Container)`
height: 1px; height: 1px;
width: 80%; width: 85%;
background-color: ${({theme}) => theme.colors.dark05}; background-color: ${({theme}) => theme.colors.dark05};
margin-bottom: 14px; margin-bottom: 14px;
`; `;
@ -49,13 +49,13 @@ const IconsGrid = styled(Grid)`
const MiniChallenge = (props) => { const MiniChallenge = (props) => {
return ( return (
<ChallengeStyle as='article' alignmentX='flex-start'> <ChallengeStyle as='article' alignmentX='flex-start'>
<FlexRow margin='0 0 14px 0' gap='12px'> <FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
<H3 as='h3' width='80%'> <H3 as='h3' width='85%'>
{props.title} {props.title}
</H3> </H3>
<Svg className='icon' src={props.ico} width='30px' height='30px'/> <Svg src={props.ico} width='30px' height='30px'/>
</FlexRow> </FlexRow>
<Line className='icon'/> <Line/>
<Body as='p' margin='0 0 14px 0'> <Body as='p' margin='0 0 14px 0'>
{props.describe} {props.describe}
</Body> </Body>

2
src/pages/Challenges.js
View File

@ -17,6 +17,7 @@ const Challenges = () => {
Challenges Challenges
</H1> </H1>
<Search/> <Search/>
<FlexColumn width='100%'>
<Grid margin='32px 0' gridGap='32px 0'> <Grid margin='32px 0' gridGap='32px 0'>
<MiniChallenge title='Challenging America geo prediction' ico={textIco} <MiniChallenge title='Challenging America geo prediction' ico={textIco}
describe={`Guess publication location for a piece of text.`}/> describe={`Guess publication location for a piece of text.`}/>
@ -26,6 +27,7 @@ const Challenges = () => {
describe={`Guess publication location for a piece of text.`}/> describe={`Guess publication location for a piece of text.`}/>
</Grid> </Grid>
</FlexColumn> </FlexColumn>
</FlexColumn>
<Pager pages={5}/> <Pager pages={5}/>
</FlexColumn> </FlexColumn>
); );