Merge pull request #102 from Mich47/cho-calendarFix

add hover buttons periodPaginator
AleksArden · May 4, 2023 · 7a76c1d · 7a76c1d
2 parents 404a9c1 + 7d19579
commit 7a76c1d
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 22 deletions.
diff --git a/src/components/CalendarToolbar/PeriodPaginator/PeriodPaginator.styled.jsx b/src/components/CalendarToolbar/PeriodPaginator/PeriodPaginator.styled.jsx
@@ -76,7 +76,6 @@ const StyledLink = styled(NavLink)`
   &.active {
     &:hover,
     :focus {
-      background: var(--primary-background-color);
       box-shadow: none;
     }
   }
@@ -92,18 +91,14 @@ const StyledLink = styled(NavLink)`
 export const ButtonLeft = styled(StyledLink)`
   border-radius: 8px 0px 0px 8px;
 
-  &:hover,
-  :focus {
-    background: var(--hover-button-period-type);
+  &:hover {
     box-shadow: -4px 2px 10px rgba(136, 165, 191, 1);
   }
 `;
 export const ButtonRight = styled(StyledLink)`
   border-radius: 0px 8px 8px 0px;
 
-  &:hover,
-  :focus {
-    background: var(--hover-button-period-type);
+  &:hover {
     box-shadow: 4px 2px 10px rgba(136, 165, 191, 1);
   }
 `;

diff --git a/src/components/ChoosedMonth/CalendarTable/CalendarTable.jsx b/src/components/ChoosedMonth/CalendarTable/CalendarTable.jsx
@@ -44,8 +44,6 @@ export const CalendarTable = () => {
     end: endOfWeek(monthEnd, { weekStartsOn: 1 }),
   });
 
-  // const isMobileSmaller = useMedia('(max-width: 374.98px)');
-  // const isMobile = useMedia('(min-width: 375px) and (max-width: 767.98px)');
   const isTablet = useMedia('(min-width: 768px) and (max-width: 1279.98px)');
   const isDesktop = useMedia('(min-width: 1280px)');
 
@@ -73,8 +71,6 @@ export const CalendarTable = () => {
   }
 
   const gridRowHeight = Math.floor(calendarHeight / weeksInMonth);
-  // console.log('calendarHeight ', calendarHeight);
-  // console.log('weeksInMonth ', weeksInMonth);
 
   return (
     <>
@@ -88,9 +84,9 @@ export const CalendarTable = () => {
             ? OtherMonthStyledLink
             : CurrentMonthStyledLink;
 
-            const Days = !isSameMonth(day, currentMonth) ? 
-            AllDays 
-            : CurrentMonthDays
+          const Days = !isSameMonth(day, currentMonth)
+            ? AllDays
+            : CurrentMonthDays;
           return (
             <Days key={idx}>
               <StyledLink

diff --git a/src/components/ChoosedMonth/CalendarTable/CalendarTableItem.jsx b/src/components/ChoosedMonth/CalendarTable/CalendarTableItem.jsx
@@ -3,8 +3,7 @@ import { useParams } from 'react-router-dom';
 import {
   DaysOfMonth,
   Today,
-  BoxTasks,
-  Title,
+  BoxTasks, Title,
   Task,
   MoreTasks,
 } from './CalendarTableItem.styled';
@@ -28,7 +27,7 @@ export const CalendarTableItem = ({ day, dayTasks, gridRowHeight }) => {
   const maxTasksInColumn = Math.floor(
     (gridRowHeight + borderHeight * 2 - columnPaddingTop) / taskHeight
   );
-  // console.log('countTasksInColumn ', maxTasksInColumn);
+
 
   const countTasks = dayTasks?.length;
 
@@ -92,4 +91,5 @@ CalendarTableItem.propTypes = {
         title: PropTypes.string.isRequired,
       })
     ) || undefined.isRequired,
+    gridRowHeight: PropTypes.number.isRequired,
 };
diff --git a/src/components/ChoosedMonth/ChoosedMonth.styled.jsx b/src/components/ChoosedMonth/ChoosedMonth.styled.jsx
@@ -4,11 +4,8 @@ export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 14px;
-  
+
   @media (min-width: 768px) {
     gap: 18px;
   }
-  @media (min-width: 1280px) {
-    /* gap: 15px; */
-  }
 `;
diff --git a/src/pages/CalendarPage/CalendarPage.styled.jsx b/src/pages/CalendarPage/CalendarPage.styled.jsx
@@ -6,7 +6,6 @@ export const Container = styled.div`
   gap: 24px;
 
   @media (min-width: 768px) {
-    /* padding-top: 32px; */
     gap: 32px;
   }
   @media (min-width: 1280px) {