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/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 = {

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 (
-    <PropertyBox>
+    <StyledPropertyBox>
       {activity.type === 'Task' &&
         DueAtFieldContextProvider &&
         AssigneeFieldContextProvider && (
@@ -87,6 +92,6 @@ export const ActivityEditorFields = ({
           <ActivityTargetsInlineCell activity={activity} />
         </ActivityTargetsContextProvider>
       )}
-    </PropertyBox>
+    </StyledPropertyBox>
   );
 };

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

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')};
 `;
 

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`