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

MiniChallenge implementation

Browse Source
This commit is contained in:
mattyl006 2022-07-07 15:45:29 +02:00
parent cd9126e8f3
commit 6bdb275dea
14 changed files with 158 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.11 0H0.91C0.822 0 0.75 0.0857143 0.75 0.190476V15.8095C0.75 15.9143 0.822 16 0.91 16H2.11C2.198 16 2.27 15.9143 2.27 15.8095V0.190476C2.27 0.0857143 2.198 0 2.11 0ZM16.59 0H15.39C15.302 0 15.23 0.0857143 15.23 0.190476V15.8095C15.23 15.9143 15.302 16 15.39 16H16.59C16.678 16 16.75 15.9143 16.75 15.8095V0.190476C16.75 0.0857143 16.678 0 16.59 0ZM14.216 7.81667L11.664 5.41905C11.6426 5.39905 11.617 5.38662 11.59 5.38318C11.563 5.37974 11.5357 5.38543 11.5113 5.39959C11.4868 5.41376 11.4663 5.43582 11.4519 5.46327C11.4375 5.49071 11.4299 5.52242 11.43 5.55476V7.14286H6.07V5.64762C6.07 5.50476 5.93 5.42381 5.836 5.5119L3.284 7.9119C3.26673 7.92779 3.25275 7.94817 3.24313 7.97149C3.23351 7.99481 3.22851 8.02045 3.22851 8.04643C3.22851 8.07241 3.23351 8.09804 3.24313 8.12136C3.25275 8.14468 3.26673 8.16507 3.284 8.18095L5.834 10.581C5.928 10.669 6.068 10.5905 6.068 10.4452V8.85714H11.428V10.3524C11.428 10.4952 11.568 10.5762 11.662 10.4881L14.212 8.0881C14.288 8.01905 14.288 7.88571 14.216 7.81667Z" fill="#343434"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
src/assets/clock_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="M8 0C12.4187 0 16 3.58125 16 8C16 12.4187 12.4187 16 8 16C6.30312 16 4.725 15.4688 3.42812 14.5656C2.975 14.2219 2.86375 13.625 3.18125 13.1719C3.49688 12.7188 4.11875 12.6094 4.57188 12.925C5.54375 13.6031 6.725 14 8 14C11.3125 14 14 11.3125 14 8C14 4.65938 11.3125 2 8 2C6.31563 2 4.84375 2.67062 3.75625 3.75625L4.71875 4.71875C5.19063 5.19063 4.85625 6 4.19063 6H0.75C0.335938 6 0 5.66563 0 5.25V1.81062C0 1.1425 0.807813 0.807813 1.28031 1.28031L2.34313 2.34313C3.79063 0.896563 5.79063 0 7.97188 0H8ZM8 4C8.41562 4 8.75 4.33437 8.75 4.75V7.69063L10.7531 9.71875C11.0719 10.0125 11.0719 10.4875 10.7531 10.7531C10.4875 11.0719 10.0125 11.0719 9.71875 10.7531L7.46875 8.50313C7.32812 8.39062 7.25 8.2 7.25 8V4.75C7.25 4.33437 7.58437 4 8 4Z" fill="#343434"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 875 B

3
src/assets/coins_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="M10 3H6L4.51875 0.7775C4.29688 0.445 4.53437 0 4.93437 0H11.0656C11.4656 0 11.7031 0.445 11.4812 0.7775L10 3ZM6 4H10C10.1187 4.07812 10.2531 4.16562 10.3781 4.2625C12.1781 5.39687 16 7.84062 16 13C16 14.6562 14.6562 16 13 16H3C1.34312 16 0 14.6562 0 13C0 7.84062 3.82188 5.39687 5.59375 4.2625C5.74687 4.16562 5.88125 4.07812 6 4ZM8.62813 7C8.62813 6.65312 8.34688 6.37187 7.97188 6.37187C7.65313 6.37187 7.37187 6.65312 7.37187 7V7.1875C7.19687 7.225 7.00313 7.27813 6.875 7.34688C6.40938 7.55938 6.00312 7.95312 5.90312 8.525C5.84687 8.84375 5.87813 9.15312 6.00938 9.43125C6.14062 9.70625 6.34375 9.9 6.55 10.0406C6.9125 10.2875 7.39062 10.4312 7.75625 10.5406L7.825 10.5594C8.2625 10.6937 8.55625 10.7906 8.74063 10.925C8.81875 10.9812 8.84688 11.025 8.85625 11.0531C8.86875 11.0781 8.8875 11.1344 8.86563 11.2594C8.84688 11.3687 8.7875 11.4625 8.61563 11.5344C8.425 11.6156 8.11562 11.6562 7.71562 11.5938C7.52812 11.5625 7.19375 11.45 6.89687 11.35C6.82812 11.325 6.75938 11.3031 6.69688 11.2812C6.36875 11.1719 6.01562 11.35 5.90625 11.6781C5.79688 12.0063 5.975 12.3594 6.30312 12.4406C6.34062 12.4812 6.3875 12.4969 6.44063 12.5156C6.65938 12.6 7.075 12.7312 7.37187 12.8V13C7.37187 13.3469 7.65313 13.6281 7.97188 13.6281C8.34688 13.6281 8.62813 13.3469 8.62813 13V12.8281C8.79375 12.7969 8.95625 12.7219 9.10625 12.6844C9.6 12.475 9.99375 12.0688 10.0969 11.475C10.1531 11.15 10.1281 10.8375 10.0031 10.5531C9.88125 10.2719 9.68438 10.0656 9.475 9.91562C9.09688 9.6375 8.59062 9.4875 8.2125 9.37187L8.15938 9.36563C7.74375 9.23125 7.44375 9.1375 7.25313 9.00625C7.17188 8.95 7.14687 8.9125 7.14062 8.89688C7.13438 8.88438 7.11562 8.84688 7.13438 8.74063C7.14687 8.67813 7.19375 8.575 7.39062 8.4875C7.56563 8.39688 7.90313 8.34688 8.28438 8.37813C8.42188 8.42813 8.84375 8.50937 8.96562 8.54062C9.29688 8.63125 9.64062 8.43125 9.72812 8.09688C9.81875 7.76562 9.61875 7.42188 9.28438 7.33437C9.14688 7.29688 8.83438 7.23438 8.62813 7.19688V7Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

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

@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.2439 0H3.70431C1.68161 0 0 1.91853 0 4.28571V25.7143C0 28.0815 1.68167 30 3.70378 30H26.2434C28.3183 30 30 28.0815 30 25.7143V4.28571C30.0005 1.91853 28.3688 0 26.2439 0ZM6.52176 4.28571C8.07782 4.28571 9.33922 5.72478 9.33922 7.5C9.33922 9.27522 8.13006 10.7143 6.52176 10.7143C4.91347 10.7143 3.70431 9.27522 3.70431 7.5C3.70431 5.72478 5.01795 4.28571 6.52176 4.28571ZM26.1852 25.1518C26.0209 25.5 25.7039 25.7143 25.3576 25.7143H4.81427C4.46086 25.7143 4.13749 25.488 3.97725 25.1283C3.81701 24.7689 3.84724 24.3375 4.05555 24.0114L8.16434 17.5828C8.34137 17.3036 8.62311 17.1429 8.92247 17.1429C9.22182 17.1429 9.50451 17.3063 9.68142 17.5831L11.5867 20.5637L17.0631 11.2489C17.2398 10.8951 17.5333 10.7143 17.8444 10.7143C18.1555 10.7143 18.4519 10.8932 18.6257 11.1914L26.1389 24.0485C26.332 24.375 26.3496 24.7969 26.1852 25.1518Z" fill="#343434"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 973 B

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

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/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

After

Width:  |  Height:  |  Size: 969 B

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

@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 0V7.5C17.5 8.53711 18.6172 9.375 20 9.375H30V26.25C30 28.3184 27.7578 30 25 30H5C2.23828 30 0 28.3184 0 26.25V3.75C0 1.67871 2.23828 0 5 0H17.5ZM6.25 13.125C4.52422 13.125 3.125 14.1738 3.125 15.4688V20.1562C3.125 21.4512 4.52422 22.5 6.25 22.5H7.5C9.22656 22.5 10.625 21.4512 10.625 20.1562V19.6875C10.625 19.1719 10.0625 18.75 9.375 18.75C8.6875 18.75 8.125 19.1719 8.125 19.6875V20.1562C8.125 20.4141 7.84375 20.625 7.5 20.625H6.25C5.90469 20.625 5.625 20.4141 5.625 20.1562V15.4688C5.625 15.2109 5.90469 15 6.25 15H7.5C7.84375 15 8.125 15.2109 8.125 15.4688V15.9375C8.125 16.4531 8.6875 16.875 9.375 16.875C10.0625 16.875 10.625 16.4531 10.625 15.9375V15.4688C10.625 14.1738 9.22656 13.125 7.5 13.125H6.25ZM13.7031 18.1992L15.6875 19.0488C16.0312 19.2012 16.25 19.4824 16.25 19.7812C16.25 20.25 15.75 20.625 15.125 20.625H13.125C12.4375 20.625 11.875 21.0469 11.875 21.5625C11.875 22.0781 12.4375 22.5 13.125 22.5H15.125C17.125 22.5 18.75 21.2812 18.75 19.7812C18.75 18.7559 18.0547 17.9062 16.9219 17.4258L14.9375 16.5762C14.5938 16.4238 14.375 16.1426 14.375 15.8438C14.375 15.375 14.875 15 15.5 15H16.875C17.5625 15 18.125 14.5781 18.125 14.0625C18.125 13.5469 17.5625 13.125 16.875 13.125H15.5C13.5 13.125 11.875 14.3438 11.875 15.8438C11.875 16.8164 12.5703 17.7188 13.7031 18.1992ZM21.875 14.0625C21.875 13.5469 21.3125 13.125 20.625 13.125C19.9375 13.125 19.375 13.5469 19.375 14.0625V15.9141C19.375 17.9473 20.1797 19.9395 21.6875 21.6328L22.0859 22.084C22.3203 22.3418 22.7031 22.5 23.125 22.5C23.5469 22.5 23.9297 22.3418 24.1641 22.084L24.5625 21.6328C26.0703 19.9395 26.875 17.9473 26.875 15.9141V14.0625C26.875 13.5469 26.3125 13.125 25.625 13.125C24.9375 13.125 24.375 13.5469 24.375 14.0625V15.9141C24.375 17.2617 23.9453 18.5859 23.125 19.7754C22.3047 18.5859 21.875 17.2617 21.875 15.9141V14.0625ZM20 0L30 7.5H20V0Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

7
src/assets/text_ico.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5024 2.50122H7.50244C6.8394 2.50122 6.20352 2.76461 5.73467 3.23345C5.26583 3.70229 5.00244 4.33818 5.00244 5.00122V25.0012C5.00244 25.6643 5.26583 26.3001 5.73467 26.769C6.20352 27.2378 6.8394 27.5012 7.50244 27.5012H22.5024C23.1655 27.5012 23.8014 27.2378 24.2702 26.769C24.739 26.3001 25.0024 25.6643 25.0024 25.0012V10.0012L17.5024 2.50122Z" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.4976 2.50122V10.0012H24.9976" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.9976 16.2488H9.99756" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.9976 21.2512H9.99756" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.4976 11.25H11.2476H9.99756" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

18
src/components/elements/IconLabel.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import {FlexRow, Svg} from "../../utils/containers";
import {Medium} from "../../utils/fonts";
const IconLabel = (props) => {
return (
<FlexRow gap={props.gap}>
<Svg className='icon'
width={props.size} height={props.size}
src={props.ico}/>
<Medium as='p'>
{props.children}
</Medium>
</FlexRow>
);
}
export default IconLabel;

96
src/components/elements/MiniChallenge.js Normal file
View File

@ -0,0 +1,96 @@
import React from "react";
import {Container, FlexColumn, FlexRow, Grid, Svg} from "../../utils/containers";
import {Body, H3} from "../../utils/fonts";
import styled from "styled-components";
import IconLabel from "./IconLabel";
import metricIco from '../../assets/metric_ico.svg';
import coinsIco from '../../assets/coins_ico.svg';
import baselineIco from '../../assets/baseline_ico.svg';
import clockIco from '../../assets/clock_ico.svg';
import cupIco from '../../assets/cup_ico.svg';
const ChallengeStyle = styled(FlexColumn)`
padding: 12px;
border: 1px solid ${({theme}) => theme.colors.dark05};
cursor: pointer;
transition: background-color 0.3s ease-in-out;
p {
width: 80%;
}
h3, p {
transition: color 0.3s ease-in-out;
}
* {
cursor: pointer;
}
&:hover {
background-color: ${({theme}) => theme.colors.green};
border-color: ${({theme}) => theme.colors.white};
h3, p {
color: ${({theme}) => theme.colors.white};
}
.icon {
background-color: ${({theme}) => theme.colors.white};
}
}
`;
const Line = styled(Container)`
height: 1px;
width: 80%;
background-color: ${({theme}) => theme.colors.dark05};
margin-bottom: 14px;
`;
const IconsGrid = styled(Grid)`
width: 100%;
grid-gap: 14px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
@media (min-width: 500px) {
grid-template-columns: 1fr 1fr 1fr;
}
`;
const MiniChallenge = (props) => {
return (
<ChallengeStyle as='article' alignmentX='flex-start'>
<FlexRow margin='0 0 14px 0' gap='12px'>
<H3 as='h3' width='80%'>
{props.title}
</H3>
<Svg className='icon' src={props.ico} width='30px' height='30px'/>
</FlexRow>
<Line className='icon'/>
<Body as='p' margin='0 0 14px 0'>
{props.describe}
</Body>
<IconsGrid>
<IconLabel size='24px' gap='8px' ico={metricIco}>
Haversine
</IconLabel>
<IconLabel size='24px' gap='8px' ico={cupIco}>
79%
</IconLabel>
<IconLabel size='24px' gap='8px' ico={clockIco}>
6 days
</IconLabel>
<IconLabel size='24px' gap='8px' ico={baselineIco}>
55%
</IconLabel>
<IconLabel size='24px' gap='8px' ico={coinsIco}>
150000 PLN
</IconLabel>
</IconsGrid>
</ChallengeStyle>
);
}
export default MiniChallenge;

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

@ -27,7 +27,7 @@ const SearchStyle = styled(FlexRow)`
input {
width: calc(100% - 24px - 34px);
color: ${({theme}) => theme.colors.dark05};
color: ${({theme}) => theme.colors.dark08};
}
`;

16
src/pages/Challenges.js
View File

@ -1,17 +1,29 @@
import React from "react";
import {H1} from "../utils/fonts";
import {FlexColumn} from "../utils/containers";
import {FlexColumn, Grid} from "../utils/containers";
import Search from "../components/elements/Search";
import MiniChallenge from "../components/elements/MiniChallenge";
import textIco from '../assets/text_ico.svg';
import tabularIco from '../assets/tabular_ico.svg';
import imageIco from '../assets/image_ico.svg';
const Challenges = () => {
return (
<FlexColumn as='main' alignmentY='flex-start' width='100%'
minHeight='100vh' padding='90px 0 32px 0'>
<FlexColumn maxWidth='452px' alignmentX='flex-start' width='80%'>
<FlexColumn alignmentX='flex-start' width='80%'>
<H1 as='h1' margin='0 0 20px 0'>
Challenges
</H1>
<Search/>
<Grid margin='32px 0' gridGap='32px 0'>
<MiniChallenge title='Challenging America geo prediction' ico={textIco}
describe={`Guess publication location for a piece of text.`}/>
<MiniChallenge title='Challenging America geo prediction' ico={tabularIco}
describe={`Guess publication location for a piece of text.`}/>
<MiniChallenge title='Challenging America geo prediction' ico={imageIco}
describe={`Guess publication location for a piece of text.`}/>
</Grid>
</FlexColumn>
</FlexColumn>
);

1
src/utils/colors.js
View File

@ -3,6 +3,7 @@ const colors = {
green: '#1B998B',
dark: '#343434',
dark05: 'rgba(52, 52, 52, 0.5)',
dark08: 'rgba(52, 52, 52, 0.8)',
};
export default colors;

4
src/utils/containers.js
View File

@ -39,8 +39,8 @@ const FlexColumn = styled(FlexRow)`
const Grid = styled(Container)`
display: grid;
grid-template-columns: ${({templateColumns}) => templateColumns ? templateColumns : 'auto'};
grid-template-rows: ${({templateRows}) => templateRows ? templateRows : 'auto'};
grid-template-columns: ${({gridTemplateColumns}) => gridTemplateColumns ? gridTemplateColumns : 'auto'};
grid-template-rows: ${({gridTemplateRows}) => gridTemplateRows ? gridTemplateRows : 'auto'};
grid-gap: ${({gridGap}) => gridGap ? gridGap : '0'};
`;

2
src/utils/fonts.js
View File

@ -29,7 +29,7 @@ const H3 = styled(Container)`
font-family: 'Kanit', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 20px;
line-height: 22px;
@media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 24px;