diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index 2168b40c8e..246941eef3 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -16,6 +16,7 @@ import { RecordBoardCardBody } from '@/object-record/record-board/record-board-c import { RecordBoardCardHeader } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeader'; import { RECORD_BOARD_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardClickOutsideId'; import { RecordBoardCardComponentInstanceContext } from '@/object-record/record-board/record-board-card/states/contexts/RecordBoardCardComponentInstanceContext'; +import { recordBoardCardIsExpandedComponentState } from '@/object-record/record-board/record-board-card/states/recordBoardCardIsExpandedComponentState'; import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext'; import { RecordCard } from '@/object-record/record-card/components/RecordCard'; import { useOpenRecordFromIndexView } from '@/object-record/record-index/hooks/useOpenRecordFromIndexView'; @@ -24,10 +25,11 @@ import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScro import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState'; import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue'; +import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; 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'; -import { useContext, useState } from 'react'; +import { useContext } from 'react'; import { InView, useInView } from 'react-intersection-observer'; import { AnimatedEaseInOut } from 'twenty-ui/utilities'; import { useDebouncedCallback } from 'use-debounce'; @@ -84,7 +86,10 @@ export const RecordBoardCard = () => { isRecordBoardCompactModeActiveComponentState, ); - const [isCardExpanded, setIsCardExpanded] = useState(false); + const [isCardExpanded, setIsCardExpanded] = useRecoilComponentState( + recordBoardCardIsExpandedComponentState, + `record-board-card-${recordId}`, + ); const [isCurrentCardSelected, setIsCurrentCardSelected] = useRecoilComponentFamilyState( @@ -194,10 +199,7 @@ export const RecordBoardCard = () => { isPrimaryMultiDrag={isPrimaryMultiDrag} isSecondaryDragged={isSecondaryDragged} > - + { }; return ( - + {visibleRecordFieldsExceptLabelIdentifier.map((recordField, index) => { const correspondingFieldDefinition = fieldDefinitionByFieldMetadataItemId[recordField.fieldMetadataItemId]; @@ -105,6 +105,6 @@ export const RecordBoardCardBody = () => { ); })} - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx index 8dbea7cd85..0d8a880616 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx @@ -4,25 +4,45 @@ import { RecordBoardCardContext } from '@/object-record/record-board/record-boar import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState'; +import { RecordChip } from '@/object-record/components/RecordChip'; import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard'; import { useFocusedRecordBoardCard } from '@/object-record/record-board/hooks/useFocusedRecordBoardCard'; -import { RecordCardHeader } from '@/object-record/record-card/components/RecordCardHeader'; +import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; +import { recordBoardCardIsExpandedComponentState } from '@/object-record/record-board/record-board-card/states/recordBoardCardIsExpandedComponentState'; +import { RecordCardHeaderContainer } from '@/object-record/record-card/components/RecordCardHeaderContainer'; import { useOpenRecordFromIndexView } from '@/object-record/record-index/hooks/useOpenRecordFromIndexView'; import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState'; +import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { type Dispatch, type SetStateAction, useContext } from 'react'; +import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; +import styled from '@emotion/styled'; +import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; +import { isDefined } from 'twenty-shared/utils'; +import { ChipVariant } from 'twenty-ui/components'; +import { IconEye, IconEyeOff } from 'twenty-ui/display'; +import { Checkbox, CheckboxVariant, LightIconButton } from 'twenty-ui/input'; -type RecordBoardCardHeaderProps = { - isCardExpanded?: boolean; - setIsCardExpanded?: Dispatch>; -}; +const StyledCompactIconContainer = styled.div` + align-items: center; + display: flex; + justify-content: center; + margin-left: ${({ theme }) => theme.spacing(1)}; +`; -export const RecordBoardCardHeader = ({ - isCardExpanded, - setIsCardExpanded, -}: RecordBoardCardHeaderProps) => { +const StyledCheckboxContainer = styled.div` + margin-left: auto; +`; + +const StyledRecordChipContainer = styled.div` + display: flex; + flex: 1 1 auto; + overflow: hidden; +`; + +export const RecordBoardCardHeader = () => { const { recordId } = useContext(RecordBoardCardContext); const { objectMetadataItem, recordBoardId } = useContext(RecordBoardContext); @@ -30,10 +50,14 @@ export const RecordBoardCardHeader = ({ const { activateBoardCard } = useActiveRecordBoardCard(recordBoardId); const { unfocusBoardCard } = useFocusedRecordBoardCard(recordBoardId); - const showCompactView = useRecoilComponentValue( + const isCompactModeActive = useRecoilComponentValue( isRecordBoardCompactModeActiveComponentState, ); + const [isCardExpanded, setIsCardExpanded] = useRecoilComponentState( + recordBoardCardIsExpandedComponentState, + ); + const { checkIfLastUnselectAndCloseDropdown } = useRecordBoardSelection(recordBoardId); @@ -47,26 +71,59 @@ export const RecordBoardCardHeader = ({ const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState); + const record = useRecoilValue(recordStoreFamilyState(recordId)); + + const triggerEvent = + recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL + ? 'CLICK' + : 'MOUSE_DOWN'; + return ( - { - activateBoardCard({ rowIndex, columnIndex }); - unfocusBoardCard(); - openRecordFromIndexView({ recordId }); - }} - onCompactIconClick={() => { - setIsCardExpanded?.((prev) => !prev); - }} - onCheckboxChange={() => { - setIsCurrentCardSelected(!isCurrentCardSelected); - checkIfLastUnselectAndCloseDropdown(); - }} - objectMetadataItem={objectMetadataItem} - recordId={recordId} - isCurrentCardSelected={isCurrentCardSelected} - recordIndexOpenRecordIn={recordIndexOpenRecordIn} - isCardExpanded={isCardExpanded} - /> + + + + {isDefined(record) && ( + { + activateBoardCard({ rowIndex, columnIndex }); + unfocusBoardCard(); + openRecordFromIndexView({ recordId }); + }} + triggerEvent={triggerEvent} + /> + )} + + + + {isCompactModeActive && ( + + + { + setIsCardExpanded(!isCardExpanded); + }} + /> + + + )} + + + { + setIsCurrentCardSelected(value.target.checked); + checkIfLastUnselectAndCloseDropdown(); + }} + variant={CheckboxVariant.Secondary} + /> + + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/states/recordBoardCardIsExpandedComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/states/recordBoardCardIsExpandedComponentState.ts new file mode 100644 index 0000000000..31100eb958 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/states/recordBoardCardIsExpandedComponentState.ts @@ -0,0 +1,9 @@ +import { RecordBoardCardComponentInstanceContext } from '@/object-record/record-board/record-board-card/states/contexts/RecordBoardCardComponentInstanceContext'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordBoardCardIsExpandedComponentState = + createComponentState({ + key: 'recordBoardCardIsExpandedComponentState', + defaultValue: false, + componentInstanceContext: RecordBoardCardComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx index 7ccf1cbd8f..6a43af7944 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx @@ -3,8 +3,8 @@ import styled from '@emotion/styled'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; -import { RecordBoardCardBodyContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer'; -import { StyledBoardCardHeader } from '@/object-record/record-card/components/RecordCardHeader'; +import { RecordCardBodyContainer } from '@/object-record/record-card/components/RecordCardBodyContainer'; +import { RecordCardHeaderContainer } from '@/object-record/record-card/components/RecordCardHeaderContainer'; const StyledSkeletonIconAndText = styled.div` display: flex; gap: ${({ theme }) => theme.spacing(1)}; @@ -39,18 +39,18 @@ export const RecordBoardColumnCardContainerSkeletonLoader = ({ highlightColor={theme.background.transparent.lighter} borderRadius={4} > - + - + {!isCompactModeActive && skeletonItems.map(({ id }) => ( - + - + ))} ); diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardBody.tsx new file mode 100644 index 0000000000..69019631a6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardBody.tsx @@ -0,0 +1,89 @@ +import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly'; +import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; +import { RECORD_BOARD_CARD_INPUT_ID_PREFIX } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardInputIdPrefix'; +import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext'; +import { RecordCardBodyContainer } from '@/object-record/record-card/components/RecordCardBodyContainer'; +import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector'; +import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext'; +import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext'; +import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; +import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; +import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId'; +import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; + +type RecordCalendarCardBodyProps = { + recordId: string; + isRecordReadOnly: boolean; +}; + +export const RecordCalendarCardBody = ({ + recordId, + isRecordReadOnly, +}: RecordCalendarCardBodyProps) => { + const { objectPermissions } = useRecordCalendarContextOrThrow(); + + const { + labelIdentifierFieldMetadataItem, + fieldDefinitionByFieldMetadataItemId, + } = useRecordIndexContextOrThrow(); + + const visibleRecordFields = useRecoilComponentValue( + visibleRecordFieldsComponentSelector, + ); + + const visibleRecordFieldsExceptLabelIdentifier = visibleRecordFields.filter( + (recordField) => + recordField.fieldMetadataItemId !== labelIdentifierFieldMetadataItem?.id, + ); + + return ( + + {visibleRecordFieldsExceptLabelIdentifier.map((recordField) => { + const correspondingFieldDefinition = + fieldDefinitionByFieldMetadataItemId[recordField.fieldMetadataItemId]; + + return ( + + [() => undefined, { loading: false }], + isDisplayModeFixHeight: true, + triggerEvent: 'CLICK', + anchorId: `${RECORD_BOARD_CARD_INPUT_ID_PREFIX}-${recordId}-${correspondingFieldDefinition.metadata.fieldName}`, + onMouseEnter: () => {}, + }} + > + + + + + + ); + })} + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardHeader.tsx new file mode 100644 index 0000000000..8888739146 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardHeader.tsx @@ -0,0 +1,61 @@ +import { RecordChip } from '@/object-record/components/RecordChip'; +import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; +import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext'; +import { RecordCardHeaderContainer } from '@/object-record/record-card/components/RecordCardHeaderContainer'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; + +import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; +import { isDefined } from 'twenty-shared/utils'; +import { ChipVariant } from 'twenty-ui/components'; +import { Checkbox, CheckboxVariant } from 'twenty-ui/input'; + +const StyledCheckboxContainer = styled.div` + margin-left: auto; +`; + +const StyledRecordChipContainer = styled.div` + display: flex; + flex: 1 1 auto; + overflow: hidden; +`; + +type RecordCalendarCardHeaderProps = { + recordId: string; +}; + +export const RecordCalendarCardHeader = ({ + recordId, +}: RecordCalendarCardHeaderProps) => { + const { objectMetadataItem } = useRecordCalendarContextOrThrow(); + const record = useRecoilValue(recordStoreFamilyState(recordId)); + + if (!isDefined(record)) { + return null; + } + + return ( + + + + + + + + + {}} + variant={CheckboxVariant.Secondary} + /> + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard.tsx index 7a228f3e75..209cca35b5 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard.tsx @@ -1,7 +1,6 @@ -import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext'; +import { RecordCalendarCardBody } from '@/object-record/record-calendar/card/components/RecordCalendarCardBody'; +import { RecordCalendarCardHeader } from '@/object-record/record-calendar/card/components/RecordCalendarCardHeader'; import { RecordCard } from '@/object-record/record-card/components/RecordCard'; -import { RecordCardHeader } from '@/object-record/record-card/components/RecordCardHeader'; -import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; import styled from '@emotion/styled'; const StyledContainer = styled.div` @@ -19,23 +18,11 @@ type RecordCalendarMonthBodyCardProps = { export const RecordCalendarMonthBodyCard = ({ recordId, }: RecordCalendarMonthBodyCardProps) => { - const { objectMetadataItem } = useRecordCalendarContextOrThrow(); - return ( - {}} - onCompactIconClick={() => {}} - onCheckboxChange={() => {}} - isCompactView={true} - isCurrentCardSelected={false} - isCompactViewToggleable={false} - isIconHidden={true} - recordIndexOpenRecordIn={ViewOpenRecordInType.SIDE_PANEL} - /> + + ); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardBodyContainer.tsx similarity index 89% rename from packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer.tsx rename to packages/twenty-front/src/modules/object-record/record-card/components/RecordCardBodyContainer.tsx index 4398235fa2..632a022e6f 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardBodyContainer.tsx @@ -18,4 +18,4 @@ const StyledBoardCardBody = styled.div` } `; -export { StyledBoardCardBody as RecordBoardCardBodyContainer }; +export { StyledBoardCardBody as RecordCardBodyContainer }; diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeader.tsx deleted file mode 100644 index faedea20c3..0000000000 --- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeader.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import { RecordChip } from '@/object-record/components/RecordChip'; -import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; -import styled from '@emotion/styled'; - -import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; -import { useRecoilValue } from 'recoil'; -import { isDefined } from 'twenty-shared/utils'; -import { ChipVariant } from 'twenty-ui/components'; -import { IconEye, IconEyeOff } from 'twenty-ui/display'; -import { Checkbox, CheckboxVariant, LightIconButton } from 'twenty-ui/input'; - -export const StyledBoardCardHeader = styled.div<{ - showCompactView: boolean; -}>` - align-items: center; - display: flex; - flex-direction: row; - justify-content: space-between; - font-weight: ${({ theme }) => theme.font.weight.medium}; - height: 24px; - padding-bottom: ${({ theme, showCompactView }) => - theme.spacing(showCompactView ? 2 : 1)}; - padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(2)}; - padding-top: ${({ theme }) => theme.spacing(2)}; - transition: padding ease-in-out 160ms; - - img { - height: ${({ theme }) => theme.icon.size.md}px; - object-fit: cover; - width: ${({ theme }) => theme.icon.size.md}px; - } -`; - -const StyledCompactIconContainer = styled.div` - align-items: center; - display: flex; - justify-content: center; - margin-left: ${({ theme }) => theme.spacing(1)}; -`; - -const StyledCheckboxContainer = styled.div` - margin-left: auto; -`; - -const StyledRecordChipContainer = styled.div` - display: flex; - flex: 1 1 auto; - overflow: hidden; -`; - -type RecordCardHeaderProps = { - recordId: string; - objectMetadataItem: ObjectMetadataItem; - - onTitleClick?: () => void; - onCheckboxChange?: (value: boolean) => void; - isCurrentCardSelected: boolean; - recordIndexOpenRecordIn: ViewOpenRecordInType; - - onCompactIconClick?: () => void; - isCompactView: boolean; - isCardExpanded?: boolean; - isCompactViewToggleable?: boolean; - recordChipMaxWidth?: number; - isIconHidden?: boolean; -}; - -export const RecordCardHeader = ({ - objectMetadataItem, - recordId, - onTitleClick, - onCheckboxChange, - isCurrentCardSelected, - isIconHidden, - recordIndexOpenRecordIn, - isCompactView, - isCompactViewToggleable = true, - onCompactIconClick, - isCardExpanded, -}: RecordCardHeaderProps) => { - const record = useRecoilValue(recordStoreFamilyState(recordId)); - - const triggerEvent = - recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL - ? 'CLICK' - : 'MOUSE_DOWN'; - - return ( - - - - {isDefined(record) && ( - { - onTitleClick?.(); - }} - triggerEvent={triggerEvent} - /> - )} - - - - {isCompactView && isCompactViewToggleable && ( - - - { - onCompactIconClick?.(); - }} - /> - - - )} - - - { - onCheckboxChange?.(value.target.checked); - }} - variant={CheckboxVariant.Secondary} - /> - - - - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx new file mode 100644 index 0000000000..ca8437bd80 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx @@ -0,0 +1,25 @@ +import styled from '@emotion/styled'; + +export const StyledBoardCardHeaderContainer = styled.div<{ + isCompact: boolean; +}>` + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: ${({ theme }) => theme.font.weight.medium}; + height: 24px; + padding-bottom: ${({ theme, isCompact }) => theme.spacing(isCompact ? 2 : 1)}; + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + padding-top: ${({ theme }) => theme.spacing(2)}; + transition: padding ease-in-out 160ms; + + img { + height: ${({ theme }) => theme.icon.size.md}px; + object-fit: cover; + width: ${({ theme }) => theme.icon.size.md}px; + } +`; + +export { StyledBoardCardHeaderContainer as RecordCardHeaderContainer };