Improve calendar styles and improve chore display logic in CalendarView

src/views/components/Calendar.css

@@ -6,11 +6,25 @@
   border: none;
 }
 
+/* Add styles for weekday names */
+.react-calendar__month-view__weekdays__weekday {
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__weekdays__weekday abbr {
+  text-decoration: none;
+  border-bottom: none;
+  cursor: default;
+}
+
 .react-calendar__tile {
   padding: 10px;
-  min-height: 45px;
+  max-height: 40px;
+  min-width: 40px;
   text-align: center;
-  border-radius: 8px;
+  border-radius: 50px;
   transition: background-color 0.3s ease;
 }
 
@@ -19,13 +33,13 @@
 }
 
 .react-calendar__tile--active {
-  background-color: #007bff !important;
+  border: 1px dotted #4ec1a2e3 !important;
+  /* background-color: inherit; */
 }
 
 .react-calendar__tile--now {
-  border: 1px dotted #4ec1a2e3 !important;
-  border-radius: 8px;
-  background-color: inherit;
+  background-color: #007bff !important;
+  border-radius: 50px;
 }
 
 .react-calendar__tile--now:enabled:hover {
@@ -39,6 +53,8 @@
   height: 16px;
   flex-wrap: wrap;
   position: relative;
+  min-height: 16px;
+  margin-top: -5px;
 }
 
 .dot {
@@ -48,6 +64,16 @@
   margin: 0 1px;
 }
 
+.dot-with-line {
+  width: 1.2em;
+  height: 0.3em;
+  border-radius: 0.15em;
+  margin: 0 1px;
+}
+.dot-empty {
+  background-color: transparent;
+}
+
 .chore-tooltip {
   position: absolute;
   top: 100%;

src/views/components/CalendarView.jsx

@@ -26,14 +26,32 @@ const CalendarView = ({ chores }) => {
         const tileDate = date.toLocaleDateString()
         return choreDate === tileDate
       })
+      if (dayChores.length === 0) {
+        return (
+          <div className='dot-container'>
+            <span className='dot-empty'></span>
+          </div>
+        )
+      }
+      if (dayChores.length > 3) {
+        return (
+          <div className='dot-container'>
+            <span
+              className='dot-with-line'
+              style={{
+                backgroundColor: getAssigneeColor(
+                  dayChores[0].assignedTo,
+                  userProfile,
+                ),
+              }}
+            ></span>
+          </div>
+        )
+      }
 
       return (
         <div className='dot-container'>
           {dayChores.map((chore, index) => {
-            if (index > 6) {
-              return null
-            }
-
             return (
               <span
                 key={index}
@@ -68,9 +86,13 @@ const CalendarView = ({ chores }) => {
         onChange={d => {
           setSeletedDate(new Date(d))
         }}
+        // format the days from MON, TUE, WED, THU, FRI, SAT, SUN to first three letters:
+        // formatShortWeekday={(locale, date) =>
+        //   ['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]
+        // }
       />
       {!selectedDate && (
-        <Grid container ml={-3}>
+        <Grid container ml={-3} mt={1}>
           {[
             { name: 'Assigned to me', color: TASK_COLOR.ASSIGNED_TO_ME },
             { name: 'Assigned to other', color: TASK_COLOR.ASSIGNED_TO_OTHER },
@@ -108,6 +130,7 @@ const CalendarView = ({ chores }) => {
             // p: 2,
             // borderRadius: 20,
             // if exceed the height, scroll:
+            mt: 1,
             maxHeight: '160px',
             overflowY: 'auto',
             // minimum height to fit the content: