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

cursor pointer on whole button in desktop challenge menu and full time deadline render in mini challenge label

Browse Source
This commit is contained in:
mattyl006 2022-07-18 11:19:23 +02:00
parent 92f32bcb13
commit 98f5848993
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/elements/DesktopChallengeMenu.js
View File

@ -23,6 +23,10 @@ const Option = styled(FlexColumn)`
transition: background-color 0.3s ease-in-out;
cursor: pointer;
* {
cursor: pointer;
}
&:hover {
background-color: ${({theme}) => theme.colors.green05};
}

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

@ -18,7 +18,16 @@ const HoverLabel = styled(Body)`
color: ${({theme}) => theme.colors.white};
`;
const renderHoverLabel = (type) => {
const renderDeadlineTime = (time) => {
if (time) {
const date = time.slice(0, 10);
const hour = time.slice(11, 16);
return `${date} ${hour}`;
}
return '';
}
const renderHoverLabel = (type, time) => {
const hoverLabel = (label) =>
<HoverLabel className='HoverLabel' type={type}>
{label}
@ -32,7 +41,7 @@ const renderHoverLabel = (type) => {
case 'baseline':
return hoverLabel('baseline');
case 'deadline':
return hoverLabel('deadline');
return hoverLabel(`deadline ${renderDeadlineTime(time)}`);
case 'bestScore':
return hoverLabel('best score');
case 'text':
@ -65,7 +74,7 @@ const IconLabel = (props) => {
<Medium as='p'>
{props.children}
</Medium> : ''}
{renderHoverLabel(props.type)}
{renderHoverLabel(props.type, props.time)}
</IconLabelStyle>
);
}

2
src/components/sections/MiniChallenge.js
View File

@ -71,7 +71,7 @@ const MiniChallenge = (props) => {
<IconLabel size='24px' gap='8px' type='bestScore'>
{props.bestScore ? props.bestScore : 'xxx'}
</IconLabel>
<IconLabel size='24px' gap='8px' type='deadline'>
<IconLabel size='24px' gap='8px' type='deadline' time={props.deadline}>
{props.deadline ? props.deadline.slice(0, 10) : 'xxx'}
</IconLabel>
<IconLabel size='24px' gap='8px' type='baseline'>