Merge pull request #3297 from OneCommunityGlobal/Brijesh_fix_dashboard_daybuttons_in_darkmode

Brijesh fix dashboard day button in darkmode

Author: one-community

src/components/TeamMemberTasks/TeamMemberTasks.jsx

@@ -1,10 +1,6 @@
 import { Fragment } from 'react';
 import { faClock } from '@fortawesome/free-solid-svg-icons';
-import {
-  Table,
-  Row,
-  Col,
-} from 'reactstrap';
+import { Table, Row, Col } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fetchTeamMembersTask, deleteTaskNotification } from 'actions/task';
 import React, { useEffect, useState, useCallback } from 'react';
@@ -26,7 +22,7 @@ import { MultiSelect } from 'react-multi-select-component';
 import { fetchTeamMembersTaskSuccess } from './actions';
 
 import { ENDPOINTS } from 'utils/URL';
-import { FaCalendarAlt, FaClock } from 'react-icons/fa'
+import { FaCalendarAlt, FaClock } from 'react-icons/fa';
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store
@@ -515,29 +511,30 @@ const TeamMemberTasks = React.memo(props => {
             <div className="hours-btn-div">
               <button
                 type="button"
-                className={
-                  'm-1 show-time-off-btn' + (darkMode ? ' box-shadow-dark' : '')
-                }
+                className={'m-1 show-time-off-btn' + (darkMode ? ' box-shadow-dark' : '')}
                 style={{
                   backgroundColor: showWhoHasTimeOff ? '#17a2b8' : 'white',
                 }}
                 onClick={handleshowWhoHasTimeOff}
               >
-                <FaCalendarAlt className={'show-time-off-calender-svg'}
-                               fill={showWhoHasTimeOff ? 'white' : '#17a2b8'}
-                               size="20px" />
-                <FaClock size={'12px'}
-                         fill={showWhoHasTimeOff ? 'white' : '#17a2b8'}
-                         className={'show-time-off-icon'} />
+                <FaCalendarAlt
+                  className={'show-time-off-calender-svg'}
+                  fill={showWhoHasTimeOff ? 'white' : '#17a2b8'}
+                  size="20px"
+                />
+                <FaClock
+                  size={'12px'}
+                  fill={showWhoHasTimeOff ? 'white' : '#17a2b8'}
+                  className={'show-time-off-icon'}
+                />
               </button>
               {Object.entries(hrsFilterBtnColorMap).map(([days, color], idx) => (
                 <button
                   key={idx}
                   type="button"
-                  className={
-                    `m-1 responsive-btn-size circle-border` +
-                    (darkMode ? 'box-shadow-dark' : '')
-                  }
+                  className={`m-1 responsive-btn-size circle-border ${
+                    darkMode ? 'box-shadow-dark' : 'box-shadow-light'
+                  }`}
                   title={`Timelogs submitted in the past ${days} days`}
                   style={{
                     color: selectedPeriod === days && isTimeFilterActive ? 'white' : color,
@@ -664,16 +661,25 @@ const TeamMemberTasks = React.memo(props => {
         </Row>
       )}
       <div className="task_table-container">
-      <Table className={`task-table ${darkMode ? 'dark-teammember-row' : 'light-teammember-row'}`}>
-          <thead className={`pc-component ${darkMode ? "bg-space-cadet" : ""}`} style={{ position: 'sticky', top: 0 }}>
+        <Table
+          className={`task-table ${darkMode ? 'dark-teammember-row' : 'light-teammember-row'}`}
+        >
+          <thead
+            className={`pc-component ${darkMode ? 'bg-space-cadet' : ''}`}
+            style={{ position: 'sticky', top: 0 }}
+          >
             <tr>
-              <th colSpan={3} className={`team-member-tasks-headers ${darkMode ? "bg-space-cadet" : ""}`}>
-                <Table borderless className={`team-member-tasks-subtable ${darkMode ? "text-light" : ""}`}>
-                  <thead className={darkMode ? "bg-space-cadet" : ""}>
+              <th
+                colSpan={3}
+                className={`team-member-tasks-headers ${darkMode ? 'bg-space-cadet' : ''}`}
+              >
+                <Table
+                  borderless
+                  className={`team-member-tasks-subtable ${darkMode ? 'text-light' : ''}`}
+                >
+                  <thead className={darkMode ? 'bg-space-cadet' : ''}>
                     <tr>
-                      <th className={darkMode ? "bg-space-cadet" : ""}>
-                        User Status
-                      </th>
+                      <th className={darkMode ? 'bg-space-cadet' : ''}>User Status</th>
                       <th
                         className={`team-member-tasks-headers team-member-tasks-user-name ${
                           darkMode ? 'bg-space-cadet' : ''