From ff89ab0df2fc23094c62cc68e132979f44c8e8c6 Mon Sep 17 00:00:00 2001 From: Swathi Angadi Date: Sat, 30 May 2026 14:36:39 -0700 Subject: [PATCH 1/2] Added suggested changes --- .../BMTimeLogger/BMTimeLogCard.module.css | 44 +++---- .../BMTimeLogger/BMTimeLogStopWatch.jsx | 108 ++++++++++++++---- 2 files changed, 107 insertions(+), 45 deletions(-) diff --git a/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css b/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css index 0fdde215d9..8db2b576e8 100644 --- a/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css +++ b/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css @@ -9,7 +9,7 @@ background-color: #2e5061; } -@media (width >= 650px) { +@media (width >=650px) { .bmDashboard_button.btn.btnSecondary { padding-left: 0; padding-right: 0; @@ -47,10 +47,9 @@ } .memberStopwatch { - background-color: #4b5055 !important; + background-color: #3f444a !important; border-radius: 15px !important; - height: 3rem; - font-size: 1.5rem !important; + font-size: 1.7rem !important; text-align: center; color: white; white-space: nowrap; @@ -59,33 +58,25 @@ display: inline-block; } -.fontColorGray { +.fontColorGray { color: #4b5055; } .memberStart { - background-color: #01987a !important; - border-radius: 10px !important; - width: 5rem; + background-color: #01987a !important; } .memberPause { - background-color: #168dc0 !important; - border-radius: 10px !important; - width: 5rem; + background-color: #168dc0 !important; } .memberStop { - background-color: #980101 !important; - border-radius: 10px !important; - width: 5rem; + background-color: #980101 !important; } .memberClear { - background-color: #a9b7be !important; - border-radius: 10px !important; - width: 5rem; + background-color: #a9b7be !important; } /* project summaries */ @@ -94,7 +85,7 @@ list-style-type: none; max-height: 80vh; overflow: hidden auto; - padding:0; + padding: 0; } .projectSummary { @@ -197,19 +188,28 @@ color: red; } -@media screen and (width <= 800px) { +@media screen and (width <=800px) { .invFormPageContainer { width: 95%; } } -@media screen and (width <= 480px) { +@media screen and (width <=480px) { .invFormPageContainer h2 { font-size: 1.7rem; } } .formFooter { -font-size: 0.875em; -margin-top:3px; + font-size: 0.875em; + margin-top: 3px; } + +.memberStart, +.memberStop, +.memberClear, +.memberPause { + min-width: 110px; + font-weight: 500 !important; + border-radius: 10px !important; +} \ No newline at end of file diff --git a/src/components/BMDashboard/BMTimeLogger/BMTimeLogStopWatch.jsx b/src/components/BMDashboard/BMTimeLogger/BMTimeLogStopWatch.jsx index b81d36738b..41a8910c2f 100644 --- a/src/components/BMDashboard/BMTimeLogger/BMTimeLogStopWatch.jsx +++ b/src/components/BMDashboard/BMTimeLogger/BMTimeLogStopWatch.jsx @@ -21,11 +21,14 @@ function BMTimeLogStopWatch({ projectId, memberId }) { const [currentTime, setCurrentTime] = useState(''); const [startButtonText, setStartButtonText] = useState('START'); const [isStarted, setIsStarted] = useState(false); + const [feedbackMessage, setFeedbackMessage] = useState(''); + const [enableStop, setEnableStop] = useState(true); const intervalRef = useRef(null); const isStartingNewLogRef = useRef(false); const justPausedTimeRef = useRef(null); const resumingFromTimeRef = useRef(null); const justStoppedTimeRef = useRef(null); + const isTimerRunning = currentTimeLog?.status === 'ongoing'; const formatTime = useCallback(totalSeconds => { const hrs = Math.floor(totalSeconds / 3600); @@ -186,6 +189,7 @@ function BMTimeLogStopWatch({ projectId, memberId }) { // Start/Pause Handler const startStop = () => { + setEnableStop(false); if (!currentTime) { setCurrentTime(moment().format('hh:mm:ss A')); } @@ -197,6 +201,10 @@ function BMTimeLogStopWatch({ projectId, memberId }) { dispatch(pauseTimeLog(projectId, currentTimeLog._id, memberId)) .then(() => { // UI will be updated by the sync useEffect when the paused log comes back + setFeedbackMessage('Timer paused successfully'); + setTimeout(() => { + setFeedbackMessage(''); + }, 3000); }) .catch(() => { // On error, ensure UI still shows the correct time @@ -204,6 +212,7 @@ function BMTimeLogStopWatch({ projectId, memberId }) { setTime(currentElapsedTime); setStartButtonText('START'); setIsStarted(false); + setFeedbackMessage('Failed to pause timer'); }); } else { // Start or resume time log @@ -222,6 +231,11 @@ function BMTimeLogStopWatch({ projectId, memberId }) { setCurrentTime(moment().format('hh:mm:ss A')); dispatch(startTimeLog(projectId, memberId, 'Default Task')); } + setFeedbackMessage('Timer started'); + + setTimeout(() => { + setFeedbackMessage(''); + }, 3000); setStartButtonText('PAUSE'); setIsStarted(true); } @@ -229,6 +243,7 @@ function BMTimeLogStopWatch({ projectId, memberId }) { // Stop Handler const stop = () => { + setEnableStop(true); if (currentTimeLog) { // Store the current time before stopping so it remains visible const finalTime = time; @@ -242,50 +257,87 @@ function BMTimeLogStopWatch({ projectId, memberId }) { // Don't clear currentTime - keep the start time visible // Then dispatch the stop action - dispatch(stopTimeLog(projectId, currentTimeLog._id, memberId)).catch(() => { - // On error, still show the time - justStoppedTimeRef.current = null; - setTime(finalTime); - }); + dispatch(stopTimeLog(projectId, currentTimeLog._id, memberId)) + .then(() => { + setFeedbackMessage('Time logged successfully'); + + setTimeout(() => { + setFeedbackMessage(''); + }, 3000); + }) + .catch(() => { + // On error, still show the time + justStoppedTimeRef.current = null; + setTime(finalTime); + setFeedbackMessage('Failed to stop timer'); + }); } else { // No active log, just reset - setTime(0); - setCurrentTime(''); - setStartButtonText('START'); - setIsStarted(false); - initialElapsedTimeRef.current = 0; + clear(); } }; // Clear Handler const clear = () => { - stop(); + setTime(0); + setCurrentTime(''); + setStartButtonText('START'); + setIsStarted(false); + setEnableStop(true); + initialElapsedTimeRef.current = 0; + //stop(); + setFeedbackMessage('Timer cleared'); + setTimeout(() => { + setFeedbackMessage(''); + }, 3000); }; const { hr, min, sec } = formatTime(time); + console.log('Current Time', currentTimeLog); return ( - + {feedbackMessage && ( + + {feedbackMessage} + + )} + + + + ● {isTimerRunning ? 'Running' : 'Stopped'} + + + - - - - - + + + + + + + - + Start at: {currentTime} @@ -293,10 +345,20 @@ function BMTimeLogStopWatch({ projectId, memberId }) { {/* Task: */} - + + + + Start begins time tracking. Stop saves the session. Clear resets the timer display. + + ); From 3d53e8c65e956f6aade8a783ec7add9ad23d697f Mon Sep 17 00:00:00 2001 From: Swathi Angadi Date: Wed, 3 Jun 2026 12:10:45 -0700 Subject: [PATCH 2/2] Dark mode changes --- .../BMTimeLogger/BMTimeLogCard.module.css | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css b/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css index 8db2b576e8..6ff38519de 100644 --- a/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css +++ b/src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css @@ -212,4 +212,39 @@ min-width: 110px; font-weight: 500 !important; border-radius: 10px !important; +} + +:global(body.dark-mode:not(.no-global-theme)) .stopwatchContainer, +:global(body.bm-dashboard-dark:not(.no-global-theme)) .stopwatchContainer { + background: none; +} + +:global(.dark-mode) .stopwatchContainer :global(.btn.btn-secondary).memberStart { + background-color: #01987a !important; + border-color: #01987a !important; +} + + +:global(.dark-mode) .stopwatchContainer :global(.btn.btn-secondary).memberStop, +:global(.dark-mode) .stopwatchContainer :global(.btn.btn-secondary).memberStop:hover { + background-color: #980101 !important; + border-color: #980101 !important; +} + +:global(.dark-mode) .stopwatchContainer :global(.btn.btn-secondary).memberStopwatch, +:global(.dark-mode) .stopwatchContainer :global(.btn.btn-secondary).memberStopwatch:hover { + background: none !important +} + +:global(.dark-mode) .fontColorGray { + color: #fff; +} + +:global(.dark-mode) .stopwatchContainer :global(.btn.btn-secondary).memberClear, +:global(.dark-mode) .stopwatchContainer :global(.btn.btn-secondary).memberClear:hover { + background-color: #a9b7be !important; +} + +:global(.btn:disabled) { + cursor: not-allowed; } \ No newline at end of file