chore : calendar layout improvement (#3705)

* chore: current date indicator added in calendar layout * style: calendar layout ui improvement
makeplane · Feb 20, 2024 · 6bf9d84 · 6bf9d84
1 parent a6a28d4
commit 6bf9d84
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -76,7 +76,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
         <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
         <div className="h-full w-full overflow-y-auto">
           {layout === "month" && (
-            <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
+            <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-400">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                   <CalendarWeekDays

diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -52,12 +52,15 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
   const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
 
   const totalIssues = issueIdList?.length ?? 0;
+
+  const isToday = date.date.toDateString() === new Date().toDateString();
+
   return (
     <>
       <div className="group relative flex h-full w-full flex-col bg-custom-background-90">
         {/* header */}
         <div
-          className={`flex-shrink-0 px-2 py-1 text-right text-xs ${
+          className={`flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
             calendarLayout === "month" // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
@@ -67,10 +70,16 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
             date.date.getDay() === 0 || date.date.getDay() === 6
               ? "bg-custom-background-90"
               : "bg-custom-background-100"
-          }`}
+          } `}
         >
           {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
-          {date.date.getDate()}
+          {isToday ? (
+            <span className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-primary-100 text-white">
+              {date.date.getDate()}
+            </span>
+          ) : (
+            <>{date.date.getDate()}</>
+          )}
         </div>
 
         {/* content */}

diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -50,7 +50,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
+      className={`grid divide-x-[0.5px] divide-custom-border-400 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
         calendarLayout === "month" ? "" : "h-full"
       }`}
     >

diff --git a/web/components/issues/issue-layouts/calendar/week-header.tsx b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
+      className={`relative grid divide-x-[0.5px] divide-custom-border-400 text-sm font-medium ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >
@@ -24,7 +24,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
         if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
 
         return (
-          <div key={day.shortTitle} className="flex h-11 items-center bg-custom-background-90 px-4">
+          <div key={day.shortTitle} className="flex h-11 items-center justify-end bg-custom-background-90 px-4">
             {day.shortTitle}
           </div>
         );