From ddb4cf0c8cf6a0814ed53447f2fcbf96003965b4 Mon Sep 17 00:00:00 2001 From: Weiko Date: Wed, 17 Sep 2025 12:45:40 +0200 Subject: [PATCH] various UI fixes in calendar view (#14551) --- .../components/RecordCalendarMonthBodyDay.tsx | 64 +++++++++++++++---- .../RecordCalendarMonthHeaderDay.tsx | 2 +- .../components/RecordCalendarCardBody.tsx | 9 ++- .../components/RecordCalendarCardHeader.tsx | 9 ++- 4 files changed, 65 insertions(+), 19 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx index d718d6e191e..4ef5c3408bb 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx @@ -6,9 +6,12 @@ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/ho import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Droppable } from '@hello-pangea/dnd'; -import { format, isSameDay, isSameMonth } from 'date-fns'; +import { format, isSameDay, isSameMonth, isWeekend } from 'date-fns'; -const StyledContainer = styled.div<{ isOtherMonth: boolean }>` +const StyledContainer = styled.div<{ + isOtherMonth: boolean; + isDayOfWeekend: boolean; +}>` display: flex; width: calc(100% / 7); flex-direction: column; @@ -16,6 +19,7 @@ const StyledContainer = styled.div<{ isOtherMonth: boolean }>` padding: ${({ theme }) => theme.spacing(1)}; background: ${({ theme }) => theme.background.primary}; min-width: 0; + color: ${({ theme }) => theme.font.color.primary}; &:not(:last-child) { border-right: 0.5px solid ${({ theme }) => theme.border.color.light}; @@ -27,24 +31,45 @@ const StyledContainer = styled.div<{ isOtherMonth: boolean }>` background: ${theme.background.secondary}; color: ${theme.font.color.light}; `} + + ${({ isDayOfWeekend, theme }) => + isDayOfWeekend && + css` + background: ${theme.background.secondary}; + `} `; -const StyledDayHeader = styled.div<{ isToday: boolean }>` - display: flex; - text-align: right; - justify-content: center; +const StyledDayHeader = styled.div` align-items: center; - margin-left: auto; - width: 20px; - padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(1)}; - font-size: ${({ theme }) => theme.font.size.sm}; - + display: flex; + flex-direction: column; + height: 24px; + justify-content: center; margin-bottom: ${({ theme }) => theme.spacing(0.5)}; + + margin-left: auto; + width: 24px; +`; + +const StyledDayHeaderDayContainer = styled.div` + display: flex; + margin-left: auto; + padding: ${({ theme }) => theme.spacing(0.5, 0.5)}; +`; + +const StyledDayHeaderDay = styled.span<{ isToday: boolean }>` + align-items: center; + display: flex; + font-size: ${({ theme }) => theme.font.size.sm}; + justify-content: center; + line-height: 140%; + width: 20px; + ${({ isToday, theme }) => isToday && css` border-radius: 4px; - background: ${theme.color.red}; + background: ${theme.color.blue}; color: ${theme.font.color.inverted}; font-weight: ${theme.font.weight.medium}; `} @@ -89,9 +114,20 @@ export const RecordCalendarMonthBodyDay = ({ const isOtherMonth = !isSameMonth(day, recordCalendarSelectedDate); + const isDayOfWeekend = isWeekend(day); + return ( - - {day.getDate()} + + + + + {day.getDate()} + + + {(droppableProvided, droppableSnapshot) => ( theme.font.size.sm}; height: 24px; justify-content: flex-end; - padding: ${({ theme }) => theme.spacing(0.5)}; + padding: ${({ theme }) => theme.spacing(0, 1)}; width: calc(100% / 7); `; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx index 9f9fdad30a5..fe01a6a3142 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx @@ -17,6 +17,11 @@ import { RecordInlineCell } from '@/object-record/record-inline-cell/components/ import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; +import styled from '@emotion/styled'; + +const StyledRecordCardBodyContainer = styled(RecordCardBodyContainer)` + padding: ${({ theme }) => theme.spacing(1)}; +`; type RecordCalendarCardBodyProps = { recordId: string; @@ -68,7 +73,7 @@ export const RecordCalendarCardBody = ({ }; return ( - + {visibleRecordFieldsExceptLabelIdentifier.map((recordField, index) => { const correspondingFieldDefinition = fieldDefinitionByFieldMetadataItemId[recordField.fieldMetadataItemId]; @@ -115,6 +120,6 @@ export const RecordCalendarCardBody = ({ ); })} - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader.tsx index 812b0cfe38e..5e0a1395c33 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader.tsx @@ -21,6 +21,11 @@ const StyledRecordChipContainer = styled.div` display: flex; flex: 1 1 auto; overflow: hidden; + padding: ${({ theme }) => theme.spacing(1)}; +`; + +const StyledRecordCardHeaderContainer = styled(RecordCardHeaderContainer)` + padding: ${({ theme }) => theme.spacing(1)}; `; type RecordCalendarCardHeaderProps = { @@ -53,7 +58,7 @@ export const RecordCalendarCardHeader = ({ } return ( - + - + ); };