diff --git a/src/components/elements/IconLabel.js b/src/components/elements/IconLabel.js index ead2b1d..fd30c3f 100644 --- a/src/components/elements/IconLabel.js +++ b/src/components/elements/IconLabel.js @@ -7,6 +7,9 @@ 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"; +import textIco from '../../assets/text_ico.svg'; +import tabularIco from '../../assets/tabular_ico.svg'; +import imageIco from '../../assets/image_ico.svg'; const HoverLabel = styled(Body)` position: absolute; @@ -22,27 +25,28 @@ const HoverLabel = styled(Body)` `; const renderHoverLabel = (type) => { + const hoverLabel = (label) => + + {label} + ; + switch (type) { case 'metric': - return - metric - ; + return hoverLabel('metric'); case 'prize': - return - prize - ; + return hoverLabel('prize'); case 'baseline': - return - baseline - ; + return hoverLabel('baseline'); case 'timeLeft': - return - time left - ; + return hoverLabel('time left'); case 'bestScore': - return - best score - ; + return hoverLabel('best score'); + case 'text': + return hoverLabel('text data'); + case 'image': + return hoverLabel('image data'); + case 'tabular': + return hoverLabel('tabular data'); } } @@ -58,6 +62,12 @@ const renderIco = (type) => { return clockIco; case 'bestScore': return cupIco; + case 'text': + return textIco; + case 'image': + return imageIco; + case 'tabular': + return tabularIco; } } @@ -76,9 +86,10 @@ const IconLabel = (props) => { - - {props.children} - + {props.children ? + + {props.children} + : ''} {renderHoverLabel(props.type)} ); diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js index b441d33..885875a 100644 --- a/src/components/elements/MiniChallenge.js +++ b/src/components/elements/MiniChallenge.js @@ -48,7 +48,7 @@ const MiniChallenge = (props) => {

{props.title}

- + diff --git a/src/pages/Challenges.js b/src/pages/Challenges.js index 772ceae..9150df8 100644 --- a/src/pages/Challenges.js +++ b/src/pages/Challenges.js @@ -3,9 +3,6 @@ import {H1} from "../utils/fonts"; 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'; import Pager from "../components/elements/Pager"; const Challenges = () => { @@ -19,11 +16,11 @@ const Challenges = () => { - - -