From 98f584899366505446220547d0b6b43fcd10ebeb Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Mon, 18 Jul 2022 11:19:23 +0200
Subject: [PATCH] cursor pointer on whole button in desktop challenge menu and
 full time deadline render in mini challenge label

---
 src/components/elements/DesktopChallengeMenu.js |  4 ++++
 src/components/elements/IconLabel.js            | 15 ++++++++++++---
 src/components/sections/MiniChallenge.js        |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/elements/DesktopChallengeMenu.js b/src/components/elements/DesktopChallengeMenu.js
index 0c37428..fa6eaf0 100644
--- a/src/components/elements/DesktopChallengeMenu.js
+++ b/src/components/elements/DesktopChallengeMenu.js
@@ -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};
   }
diff --git a/src/components/elements/IconLabel.js b/src/components/elements/IconLabel.js
index 27b1de5..8fc2b87 100644
--- a/src/components/elements/IconLabel.js
+++ b/src/components/elements/IconLabel.js
@@ -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>
     );
 }
diff --git a/src/components/sections/MiniChallenge.js b/src/components/sections/MiniChallenge.js
index 1e5a898..2e3a834 100644
--- a/src/components/sections/MiniChallenge.js
+++ b/src/components/sections/MiniChallenge.js
@@ -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'>