diff --git a/src/components/elements/IconLabel.js b/src/components/elements/IconLabel.js index 4f4772f..ead2b1d 100644 --- a/src/components/elements/IconLabel.js +++ b/src/components/elements/IconLabel.js @@ -1,16 +1,86 @@ import React from "react"; import {FlexRow, Svg} from "../../utils/containers"; -import {Medium} from "../../utils/fonts"; +import {Body, Medium} from "../../utils/fonts"; +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'; +import styled from "styled-components"; + +const HoverLabel = styled(Body)` + position: absolute; + top: -32px; + left: 0; + display: none; + justify-content: center; + align-items: center; + border-radius: 6px; + padding: 4px 12px; + background-color: ${({theme}) => theme.colors.green}; + color: ${({theme}) => theme.colors.white}; +`; + +const renderHoverLabel = (type) => { + switch (type) { + case 'metric': + return + metric + ; + case 'prize': + return + prize + ; + case 'baseline': + return + baseline + ; + case 'timeLeft': + return + time left + ; + case 'bestScore': + return + best score + ; + } +} + +const renderIco = (type) => { + switch (type) { + case 'metric': + return metricIco; + case 'prize': + return coinsIco; + case 'baseline': + return baselineIco; + case 'timeLeft': + return clockIco; + case 'bestScore': + return cupIco; + } +} + +const IconLabelStyle = styled(FlexRow)` + position: relative; + + &:hover { + .HoverLabel { + display: flex; + } + } +` const IconLabel = (props) => { return ( - + + src={renderIco(props.type)}/> {props.children} - + {renderHoverLabel(props.type)} + ); } diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js index f6adbc0..b441d33 100644 --- a/src/components/elements/MiniChallenge.js +++ b/src/components/elements/MiniChallenge.js @@ -3,11 +3,6 @@ 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; @@ -60,19 +55,19 @@ const MiniChallenge = (props) => { {props.describe} - + Haversine - + 79% - + 6 days - + 55% - + 150000 PLN