#3172: Fix out of year boxes hover effects

NCI-Agency · Sep 3, 2020 · ed3f012 · ed3f012
1 parent a5cc2b0
commit ed3f012
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git a/client/src/components/Calendar/Views/Header.js b/client/src/components/Calendar/Views/Header.js
@@ -52,7 +52,7 @@ const HeaderBox = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 10px auto;
-  margin: 5px auto;
+  margin: 5px 1rem;
 `
 
 const BUTTONS_STYLE = css`

diff --git a/client/src/components/Calendar/Views/MonthDay.js b/client/src/components/Calendar/Views/MonthDay.js
@@ -14,6 +14,7 @@ const MonthDay = ({
   return (
     <MonthDayBox
       selected={selected}
+      // FIXME: maybe go to daily view when implemented
       onClick={onClick}
       bgc={countToHeatBgc(dailyEvents.length, { low: 1, mid: 2, color: "red" })}
     >

diff --git a/client/src/components/Calendar/Views/MonthlyView.js b/client/src/components/Calendar/Views/MonthlyView.js
@@ -89,7 +89,9 @@ MonthlyView.defaultProps = {
 }
 
 const MonthlyViewBox = styled.div`
-  outline: 2px solid pink;
+  border: 2px solid blue;
+  padding: 10px 5px;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;

diff --git a/client/src/components/Calendar/Views/YearDay.js b/client/src/components/Calendar/Views/YearDay.js
@@ -26,7 +26,7 @@ const YearDay = ({ dailyEvents, eventClick, date, sameYear }) => {
   return (
     <YearDayBox
       onMouseEnter={() => {
-        setShowTooltip(true)
+        setShowTooltip(sameYear)
       }}
       onMouseLeave={() => setShowTooltip(false)}
       // FIXME: Add when clicked go to daily view maybe
@@ -75,6 +75,7 @@ const YearDayBox = styled.div`
   position: relative;
   &[data-same-year="notSame"] {
     border: none;
+    background-color: transparent;
   }
 `
 

diff --git a/client/src/components/Calendar/Views/YearlyView.js b/client/src/components/Calendar/Views/YearlyView.js
@@ -79,7 +79,9 @@ YearlyView.defaultProps = {
   weekStartsOn: 1
 }
 const YearlyViewBox = styled.div`
-  outline: 2px solid pink;
+  border: 2px solid blue;
+  padding: 10px 5px;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;