From 6bdb275dea425f7ee4dd3d77faa3345a151d1809 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Thu, 7 Jul 2022 15:45:29 +0200 Subject: [PATCH] MiniChallenge implementation --- src/assets/baseline_ico.svg | 3 + src/assets/clock_ico.svg | 3 + src/assets/coins_ico.svg | 3 + src/assets/image_ico.svg | 3 + src/assets/metric_ico.svg | 3 + src/assets/tabular_ico.svg | 3 + src/assets/text_ico.svg | 7 ++ src/components/elements/IconLabel.js | 18 +++++ src/components/elements/MiniChallenge.js | 96 ++++++++++++++++++++++++ src/components/elements/Search.js | 2 +- src/pages/Challenges.js | 16 +++- src/utils/colors.js | 1 + src/utils/containers.js | 4 +- src/utils/fonts.js | 2 +- 14 files changed, 158 insertions(+), 6 deletions(-) create mode 100644 src/assets/baseline_ico.svg create mode 100644 src/assets/clock_ico.svg create mode 100644 src/assets/coins_ico.svg create mode 100644 src/assets/image_ico.svg create mode 100644 src/assets/metric_ico.svg create mode 100644 src/assets/tabular_ico.svg create mode 100644 src/assets/text_ico.svg create mode 100644 src/components/elements/IconLabel.js create mode 100644 src/components/elements/MiniChallenge.js diff --git a/src/assets/baseline_ico.svg b/src/assets/baseline_ico.svg new file mode 100644 index 0000000..b3441fa --- /dev/null +++ b/src/assets/baseline_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/clock_ico.svg b/src/assets/clock_ico.svg new file mode 100644 index 0000000..0be5e24 --- /dev/null +++ b/src/assets/clock_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/coins_ico.svg b/src/assets/coins_ico.svg new file mode 100644 index 0000000..4956313 --- /dev/null +++ b/src/assets/coins_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/image_ico.svg b/src/assets/image_ico.svg new file mode 100644 index 0000000..31af035 --- /dev/null +++ b/src/assets/image_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/metric_ico.svg b/src/assets/metric_ico.svg new file mode 100644 index 0000000..311c19f --- /dev/null +++ b/src/assets/metric_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/tabular_ico.svg b/src/assets/tabular_ico.svg new file mode 100644 index 0000000..6b90f3d --- /dev/null +++ b/src/assets/tabular_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/text_ico.svg b/src/assets/text_ico.svg new file mode 100644 index 0000000..a3d0de5 --- /dev/null +++ b/src/assets/text_ico.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/elements/IconLabel.js b/src/components/elements/IconLabel.js new file mode 100644 index 0000000..4cc72d1 --- /dev/null +++ b/src/components/elements/IconLabel.js @@ -0,0 +1,18 @@ +import React from "react"; +import {FlexRow, Svg} from "../../utils/containers"; +import {Medium} from "../../utils/fonts"; + +const IconLabel = (props) => { + return ( + + + + {props.children} + + + ); +} + +export default IconLabel; \ No newline at end of file diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js new file mode 100644 index 0000000..a47e022 --- /dev/null +++ b/src/components/elements/MiniChallenge.js @@ -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 ( + + +

+ {props.title} +

+ + + + + {props.describe} + + + + Haversine + + + 79% + + + 6 days + + + 55% + + + 150000 PLN + + + + ); +} + +export default MiniChallenge; \ No newline at end of file diff --git a/src/components/elements/Search.js b/src/components/elements/Search.js index d05a1f9..03fe295 100644 --- a/src/components/elements/Search.js +++ b/src/components/elements/Search.js @@ -27,7 +27,7 @@ const SearchStyle = styled(FlexRow)` input { width: calc(100% - 24px - 34px); - color: ${({theme}) => theme.colors.dark05}; + color: ${({theme}) => theme.colors.dark08}; } `; diff --git a/src/pages/Challenges.js b/src/pages/Challenges.js index 7e18c92..474e17c 100644 --- a/src/pages/Challenges.js +++ b/src/pages/Challenges.js @@ -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 ( - +

Challenges

+ + + + + ); diff --git a/src/utils/colors.js b/src/utils/colors.js index c3127ea..8f458c5 100644 --- a/src/utils/colors.js +++ b/src/utils/colors.js @@ -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; \ No newline at end of file diff --git a/src/utils/containers.js b/src/utils/containers.js index 20a0f82..6b12832 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -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'}; `; diff --git a/src/utils/fonts.js b/src/utils/fonts.js index ee1faaa..a008d26 100644 --- a/src/utils/fonts.js +++ b/src/utils/fonts.js @@ -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;