From 2a85b621f5245afae6b306314107f1184c71c21e Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Thu, 29 May 2025 01:02:19 -0400 Subject: [PATCH] style: update Calendar styles for improved UI consistency; enhance CalendarView layout and chore display logic --- src/views/components/Calendar.css | 94 ++++++++++++-- src/views/components/CalendarView.jsx | 180 ++++++++++++++++++-------- 2 files changed, 207 insertions(+), 67 deletions(-) diff --git a/src/views/components/Calendar.css b/src/views/components/Calendar.css index 4c2185f..909fa4f 100644 --- a/src/views/components/Calendar.css +++ b/src/views/components/Calendar.css @@ -39,49 +39,49 @@ } .react-calendar__tile:enabled:hover { - background-color: rgba(8, 114, 221, 0.08); - color: #0872dd; + background-color: var(--joy-palette-primary-softBg); + color: var(--joy-palette-primary-solidColor); } /* Active/Selected date */ .react-calendar__tile--active { - background-color: #0872dd !important; - color: white !important; + background-color: var(--joy-palette-primary-solidBg) !important; + color: var(--joy-palette-primary-solidColor) !important; border: none !important; - box-shadow: 0 2px 4px rgba(8, 114, 221, 0.2); + box-shadow: 0 2px 4px var(--joy-palette-primary-shadowRing); } .react-calendar__tile--active:hover { - background-color: #0766c7 !important; + background-color: var(--joy-palette-primary-solidHoverBg) !important; } /* Today's date */ .react-calendar__tile--now { background-color: transparent !important; - border: 1.5px solid #0872dd !important; - color: #0872dd !important; + border: 1.5px solid var(--joy-palette-primary-solidBg) !important; + color: var(--joy-palette-primary-solidBg) !important; font-weight: 500; } .react-calendar__tile--now:enabled:hover { - background-color: rgba(8, 114, 221, 0.08) !important; + background-color: var(--joy-palette-primary-softBg) !important; } /* Disabled dates */ .react-calendar__tile:disabled { - color: #cbd5e1; + color: var(--joy-palette-text-tertiary); cursor: not-allowed; background: transparent; } /* Weekend dates */ .react-calendar__month-view__days__day--weekend { - color: #64748b; + color: var(--joy-palette-text-secondary); } /* Neighboring month dates */ .react-calendar__month-view__days__day--neighboringMonth { - color: #94a3b8; + color: var(--joy-palette-text-tertiary); } .dot-container { @@ -128,3 +128,73 @@ opacity 0.2s ease, visibility 0.2s ease; } + +/* Year view month tiles - override circular styling */ +.react-calendar__year-view__months__month { + border-radius: 8px !important; /* Override the 50% circular radius */ + padding: 12px 8px !important; + min-width: 60px !important; + max-height: 50px !important; + font-size: 0.875rem; + font-weight: 500; +} + +.react-calendar__year-view__months__month:enabled:hover { + background-color: var(--joy-palette-primary-softBg) !important; + color: var(--joy-palette-primary-solidColor) !important; +} + +/* Decade view year tiles - similar fix */ +.react-calendar__decade-view__years__year { + border-radius: 8px !important; + padding: 12px 8px !important; + min-width: 60px !important; + max-height: 50px !important; + font-size: 0.875rem; + font-weight: 500; +} + +.react-calendar__decade-view__years__year:enabled:hover { + background-color: var(--joy-palette-primary-softBg) !important; + color: var(--joy-palette-primary-solidColor) !important; +} + +/* Century view decade tiles */ +.react-calendar__century-view__decades__decade { + border-radius: 8px !important; + padding: 12px 8px !important; + min-width: 60px !important; + max-height: 50px !important; + font-size: 0.875rem; + font-weight: 500; +} + +.react-calendar__century-view__decades__decade:enabled:hover { + background-color: var(--joy-palette-primary-softBg) !important; + color: var(--joy-palette-primary-solidColor) !important; +} + +/* Navigation buttons (month/year selectors and arrows) */ +.react-calendar__navigation button { + border-radius: 8px !important; /* Override circular border-radius */ + padding: 6px 12px !important; + min-width: auto !important; + max-height: none !important; + font-weight: 500; + background-color: transparent; + border: 1px solid transparent; + transition: all 0.2s ease-in-out; + color: var(--joy-palette-text-primary); +} + +.react-calendar__navigation button:enabled:hover { + background-color: var(--joy-palette-primary-softBg) !important; + color: var(--joy-palette-primary-solidColor) !important; + border-color: var(--joy-palette-primary-outlinedBorder); +} + +.react-calendar__navigation button:enabled:focus { + background-color: var(--joy-palette-primary-softActiveBg) !important; + outline: none; + box-shadow: 0 0 0 2px var(--joy-palette-primary-outlinedBorder); +} diff --git a/src/views/components/CalendarView.jsx b/src/views/components/CalendarView.jsx index 49a73d6..9842405 100644 --- a/src/views/components/CalendarView.jsx +++ b/src/views/components/CalendarView.jsx @@ -1,12 +1,12 @@ import { CalendarMonth } from '@mui/icons-material' -import { Box, Card, CardContent, Chip, Grid, Typography } from '@mui/joy' +import { Box, Chip, Grid, Typography } from '@mui/joy' import moment from 'moment' import React, { useState } from 'react' import Calendar from 'react-calendar' import 'react-calendar/dist/Calendar.css' import { useNavigate } from 'react-router-dom' import { UserContext } from '../../contexts/UserContext' -import { getTextColorFromBackgroundColor, TASK_COLOR } from '../../utils/Colors' +import { TASK_COLOR } from '../../utils/Colors' import './Calendar.css' const getAssigneeColor = (assignee, userProfile) => { @@ -93,7 +93,7 @@ const CalendarView = ({ chores }) => { mb: 2, }} > - + Calendar Overview @@ -141,66 +141,136 @@ const CalendarView = ({ chores }) => { )} {selectedDate && ( - {chores - .filter(chore => { - const choreDate = new Date(chore.nextDueDate).toLocaleDateString() - const selectedLocalDate = selectedDate.toLocaleDateString() - return choreDate === selectedLocalDate - }) - .map((chore, idx) => ( - { - Navigate('/chores/' + chore.id) - }} - sx={{ - mb: 0.4, - py: 1, - px: 1, - cursor: 'pointer', - }} - > - + + + {moment(selectedDate).format('MMMM D, YYYY')} + + + {(() => { + const count = chores.filter(chore => { + const choreDate = new Date( + chore.nextDueDate, + ).toLocaleDateString() + const selectedLocalDate = selectedDate.toLocaleDateString() + return choreDate === selectedLocalDate + }).length + return `${count} Tasks` + })()} + + + + + {chores + .filter(chore => { + const choreDate = new Date( + chore.nextDueDate, + ).toLocaleDateString() + const selectedLocalDate = selectedDate.toLocaleDateString() + return choreDate === selectedLocalDate + }) + .sort((a, b) => moment(a.nextDueDate).diff(moment(b.nextDueDate))) + .map((chore, idx) => ( + { + Navigate('/chores/' + chore.id) + }} + sx={{ + display: 'flex', + flexDirection: 'column', + gap: 0.25, + cursor: 'pointer', + position: 'relative', + pl: '16px', + py: 0.75, + transition: 'all 0.2s ease-in-out', + borderRadius: 'sm', + '&:hover': { + // transform: 'translateX(4px)', + bgcolor: 'background.level1', + }, + '&::before': { + content: '""', + position: 'absolute', + left: 0, + top: 0, + bottom: 0, + width: '3px', + backgroundColor: getAssigneeColor( + chore.assignedTo, + userProfile, + ), + borderRadius: '2px', + }, + }} + > - - {moment(chore.nextDueDate).format('hh:mm A')} - {chore.name} - - - ))} + + + {moment(chore.nextDueDate).format('h:mm A')} + + + {chore.assignedTo === userProfile.id + ? 'Assigned to me' + : 'Assigned to other'} + + + + ))} + )}