Removed the boxes around fields on shows and side panel (#4032)

#3963 removed border and padding

Co-authored-by: Charles Bochet <charles@twenty.com>

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) => (
-  <StyledPropertyBoxContainer>{children}</StyledPropertyBoxContainer>
+export const PropertyBox = ({ children, className }: PropertyBoxProps) => (
+  <StyledPropertyBoxContainer className={className}>
+    {children}
+  </StyledPropertyBoxContainer>
 );

packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx

@@ -169,7 +169,7 @@ export const RecordShowContainer = ({
                   objectNameSingular === 'person' ? onUploadPicture : undefined
                 }
               />
-              <PropertyBox extraPadding={true}>
+              <PropertyBox>
                 {inlineFieldMetadataItems.map((fieldMetadataItem, index) => (
                   <FieldContext.Provider
                     key={objectRecordId + fieldMetadataItem.id}

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader.tsx

@@ -2,14 +2,11 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
 const StyledHeader = styled.header<{ isDropdownOpen?: boolean }>`
   align-items: center;
   display: flex;
   height: 24px;
   margin-bottom: ${({ theme }) => theme.spacing(2)};
-  padding: ${() => (useIsMobile() ? '0 12px' : 'unset')};
 `;
 
 const StyledTitle = styled.div`

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

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 (
-    <Section>
+    <StyledSection>
       <RecordDetailSectionHeader
         title={fieldDefinition.label}
         link={
@@ -186,7 +193,7 @@ export const RecordRelationFieldCardSection = () => {
         </StyledCardNoContent>
       )}
       {!!relationRecords.length && (
-        <Card>
+        <StyledCard>
           {relationRecords.slice(0, 5).map((relationRecord, index) => (
             <RecordRelationFieldCardContent
               key={`${relationRecord.id}${relationLabelIdentifierFieldMetadata?.id}`}
@@ -194,8 +201,8 @@ export const RecordRelationFieldCardSection = () => {
               relationRecord={relationRecord}
             />
           ))}
-        </Card>
+        </StyledCard>
       )}
-    </Section>
+    </StyledSection>
   );
 };