diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx index 3c7a0134d..cad9c66e2 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx @@ -40,7 +40,7 @@ const StyledTopContainer = styled.div` display: flex; flex-direction: column; gap: 24px; - padding: 24px 24px 24px 48px; + padding: ${({ theme }) => theme.spacing(6)}; `; type ActivityEditorProps = { diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx index 4db2a8eef..126ce0de5 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx @@ -1,3 +1,4 @@ +import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity'; @@ -13,6 +14,10 @@ import { RecordInlineCell } from '@/object-record/record-inline-cell/components/ import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +const StyledPropertyBox = styled(PropertyBox)` + padding: 0; +`; + export const ActivityEditorFields = ({ activityId, }: { @@ -69,7 +74,7 @@ export const ActivityEditorFields = ({ }); return ( - + {activity.type === 'Task' && DueAtFieldContextProvider && AssigneeFieldContextProvider && ( @@ -87,6 +92,6 @@ export const ActivityEditorFields = ({ )} - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx index 28614c014..854d6eec4 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx @@ -1,9 +1,13 @@ import styled from '@emotion/styled'; -const StyledPropertyBoxContainer = styled.div` +interface PropertyBoxProps { + children: React.ReactNode; + className?: string; +} + +export const StyledPropertyBoxContainer = styled.div` align-self: stretch; background: ${({ theme }) => theme.background.secondary}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.sm}; display: flex; flex-direction: column; @@ -11,11 +15,8 @@ const StyledPropertyBoxContainer = styled.div` padding: ${({ theme }) => theme.spacing(3)}; `; -interface PropertyBoxProps { - children: React.ReactNode; - extraPadding?: boolean; -} - -export const PropertyBox = ({ children }: PropertyBoxProps) => ( - {children} +export const PropertyBox = ({ children, className }: PropertyBoxProps) => ( + + {children} + ); diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx index 3067d4d1b..576b44ce5 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx @@ -169,7 +169,7 @@ export const RecordShowContainer = ({ objectNameSingular === 'person' ? onUploadPicture : undefined } /> - + {inlineFieldMetadataItems.map((fieldMetadataItem, index) => ( ` align-items: center; display: flex; height: 24px; margin-bottom: ${({ theme }) => theme.spacing(2)}; - padding: ${() => (useIsMobile() ? '0 12px' : 'unset')}; `; const StyledTitle = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx index 5458d2541..1d7b1067d 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx @@ -27,7 +27,8 @@ const StyledCardContent = styled(CardContent)<{ gap: ${({ theme }) => theme.spacing(1)}; display: flex; height: ${({ theme }) => theme.spacing(10)}; - padding: ${({ theme }) => theme.spacing(0, 2, 0, 3)}; + padding: 0; + border: 0; ${({ isDropdownOpen, theme }) => isDropdownOpen diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx index 49e84bb8d..ca54e981e 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx @@ -21,7 +21,6 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { IconForbid, IconPencil, IconPlus } from '@/ui/display/icon'; import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; -import { Card } from '@/ui/layout/card/components/Card'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; @@ -34,16 +33,24 @@ const StyledAddDropdown = styled(Dropdown)` `; const StyledCardNoContent = styled.div` - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ theme }) => theme.font.color.light}; - align-items: center; justify-content: center; gap: ${({ theme }) => theme.spacing(2)}; display: flex; height: ${({ theme }) => theme.spacing(10)}; - padding: ${({ theme }) => theme.spacing(0, 2)}; + text-transform: capitalize; +`; + +const StyledCard = styled.div` + color: ${({ theme }) => theme.font.color.secondary}; + overflow: hidden; +`; + +const StyledSection = styled(Section)` + padding: ${({ theme }) => theme.spacing(3)}; + border-top: 1px solid ${({ theme }) => theme.border.color.light}; + width: unset; `; export const RecordRelationFieldCardSection = () => { @@ -134,7 +141,7 @@ export const RecordRelationFieldCardSection = () => { const Icon = getIcon(relationObjectMetadataItem.icon); return ( -
+ { )} {!!relationRecords.length && ( - + {relationRecords.slice(0, 5).map((relationRecord, index) => ( { relationRecord={relationRecord} /> ))} - + )} -
+ ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx index 4c83d666d..fa5d5c1e8 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx @@ -19,9 +19,6 @@ const StyledOuterContainer = styled.div` const StyledInnerContainer = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(6)}; - padding: ${({ theme }) => (useIsMobile() ? '12px 0' : theme.spacing(3))}; - padding-right: ${({ theme }) => (useIsMobile() ? 0 : theme.spacing(2))}; width: ${() => (useIsMobile() ? `100%` : '348px')}; `; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index 0665e3e69..680d5329f 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx @@ -25,7 +25,8 @@ const StyledShowPageSummaryCard = styled.div` flex-direction: column; gap: ${({ theme }) => theme.spacing(3)}; justify-content: center; - padding: ${({ theme }) => theme.spacing(3)}; + padding: ${({ theme }) => theme.spacing(4)}; + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; `; const StyledInfoContainer = styled.div`