style: update color properties in TimerDetails component for consistency

src/views/ChoreEdit/TimePassedCard.jsx

@@ -1,8 +1,16 @@
-import { Flag, Pause, PlayArrow, Schedule } from '@mui/icons-material'
+import {
+  Flag,
+  OpenInFull,
+  Pause,
+  PlayArrow,
+  Schedule,
+} from '@mui/icons-material'
 import { Box, Card, Chip, Typography } from '@mui/joy'
 import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 const TimePassedCard = ({ chore, handleAction, onShowDetails }) => {
+  const navigate = useNavigate()
   const [time, setTime] = useState(0)
   const [shouldAnimate, setShouldAnimate] = useState(false)
   const [prevStatus, setPrevStatus] = useState(null) // Initialize as null
@@ -96,8 +104,30 @@ const TimePassedCard = ({ chore, handleAction, onShowDetails }) => {
           },
         },
         transition: 'all 0.3s ease',
+        cursor: 'pointer',
+      }}
+      onClick={e => {
+        // if this click on this element itself and not its children:
+        if (e.target !== e.currentTarget) return
+        navigate('./timer')
       }}
     >
+      <OpenInFull
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+          zIndex: 2,
+          cursor: 'pointer',
+          color: 'text.secondary',
+          fontSize: '15px',
+          '&:hover': { color: 'primary.main' },
+        }}
+        onClick={e => {
+          e.stopPropagation()
+          navigate('./timer')
+        }}
+      ></OpenInFull>
       <Typography
         level='h4'
         sx={{

src/views/Timer/TimerDetails.jsx

@@ -387,8 +387,8 @@ const TimerDetails = () => {
                     <Box>
                       <Typography
                         level='h4'
+                        color='success'
                         sx={{
-                          color: 'success.600',
                           fontWeight: 'bold',
                           lineHeight: 1.5,
                         }}
@@ -442,8 +442,8 @@ const TimerDetails = () => {
                     <Box>
                       <Typography
                         level='h4'
+                        color='warning'
                         sx={{
-                          color: 'warning.600',
                           fontWeight: 'bold',
                           lineHeight: 1.5,
                         }}
@@ -498,7 +498,7 @@ const TimerDetails = () => {
                       <Typography
                         level='h4'
                         sx={{
-                          color: 'primary.600',
+                          color: 'text.secondary',
                           fontWeight: 'bold',
                           lineHeight: 1.5,
                         }}
@@ -553,7 +553,7 @@ const TimerDetails = () => {
                       <Typography
                         level='h4'
                         sx={{
-                          color: 'neutral.700',
+                          color: 'text.secondary',
                           fontWeight: 'bold',
                           lineHeight: 1.5,
                         }}