From 06fb0c37d48b209ea48153237660dd14409c1c70 Mon Sep 17 00:00:00 2001
From: Marie Stoppa <marie.stoppa@essec.edu>
Date: Mon, 4 Nov 2024 20:03:59 +0400
Subject: [PATCH 1/2] Move margin inside advancedMode component

---
 .../SettingsDataModelObjectAboutForm.tsx      | 158 +++++++++---------
 1 file changed, 77 insertions(+), 81 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
index aed21d0ee273..223571d120fb 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@@ -63,10 +63,6 @@ const StyledInputContainer = styled.div`
   flex-direction: column;
 `;
 
-const StyledSectionWrapper = styled.div`
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-`;
-
 const StyledAdvancedSettingsSectionInputWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -76,9 +72,10 @@ const StyledAdvancedSettingsSectionInputWrapper = styled.div`
 
 const StyledAdvancedSettingsContainer = styled.div`
   display: flex;
-  width: 100%;
   gap: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
   position: relative;
+  width: 100%;
 `;
 
 const StyledIconToolContainer = styled.div`
@@ -154,94 +151,93 @@ export const SettingsDataModelObjectAboutForm = ({
 
   return (
     <>
-      <StyledSectionWrapper>
-        <StyledInputsContainer>
-          <StyledInputContainer>
-            <StyledLabel>Icon</StyledLabel>
-            <Controller
-              name="icon"
-              control={control}
-              defaultValue={objectMetadataItem?.icon ?? 'IconListNumbers'}
-              render={({ field: { onChange, value } }) => (
-                <IconPicker
-                  disabled={disabled}
-                  selectedIconKey={value}
-                  onChange={({ iconKey }) => onChange(iconKey)}
-                />
-              )}
-            />
-          </StyledInputContainer>
+      <StyledInputsContainer>
+        <StyledInputContainer>
+          <StyledLabel>Icon</StyledLabel>
           <Controller
-            key={`object-labelSingular-text-input`}
-            name={'labelSingular'}
+            name="icon"
             control={control}
-            defaultValue={objectMetadataItem?.labelSingular}
+            defaultValue={objectMetadataItem?.icon ?? 'IconListNumbers'}
             render={({ field: { onChange, value } }) => (
-              <TextInput
-                label={'Singular'}
-                placeholder={'Listing'}
-                value={value}
-                onChange={(value) => {
-                  onChange(value);
-                  fillLabelPlural(value);
-                  if (isLabelSyncedWithName === true) {
-                    fillNameSingularFromLabelSingular(value);
-                  }
-                }}
-                disabled={disabled || disableNameEdit}
-                fullWidth
-                maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
+              <IconPicker
+                disabled={disabled}
+                selectedIconKey={value}
+                onChange={({ iconKey }) => onChange(iconKey)}
               />
             )}
           />
-          <Controller
-            key={`object-labelPlural-text-input`}
-            name={'labelPlural'}
-            control={control}
-            defaultValue={objectMetadataItem?.labelPlural}
-            render={({ field: { onChange, value } }) => (
-              <TextInput
-                label={'Plural'}
-                placeholder={'Listings'}
-                value={value}
-                onChange={(value) => {
-                  onChange(value);
-                  if (isLabelSyncedWithName === true) {
-                    fillNamePluralFromLabelPlural(value);
-                  }
-                }}
-                disabled={disabled || disableNameEdit}
-                fullWidth
-                maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
-              />
-            )}
-          />
-        </StyledInputsContainer>
+        </StyledInputContainer>
         <Controller
-          name="description"
+          key={`object-labelSingular-text-input`}
+          name={'labelSingular'}
           control={control}
-          defaultValue={objectMetadataItem?.description ?? null}
+          defaultValue={objectMetadataItem?.labelSingular}
           render={({ field: { onChange, value } }) => (
-            <TextArea
-              placeholder="Write a description"
-              minRows={4}
-              value={value ?? undefined}
-              onChange={(nextValue) => onChange(nextValue ?? null)}
-              disabled={disabled}
+            <TextInput
+              label={'Singular'}
+              placeholder={'Listing'}
+              value={value}
+              onChange={(value) => {
+                onChange(value);
+                fillLabelPlural(value);
+                if (isLabelSyncedWithName === true) {
+                  fillNameSingularFromLabelSingular(value);
+                }
+              }}
+              disabled={disabled || disableNameEdit}
+              fullWidth
+              maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
             />
           )}
         />
-      </StyledSectionWrapper>
+        <Controller
+          key={`object-labelPlural-text-input`}
+          name={'labelPlural'}
+          control={control}
+          defaultValue={objectMetadataItem?.labelPlural}
+          render={({ field: { onChange, value } }) => (
+            <TextInput
+              label={'Plural'}
+              placeholder={'Listings'}
+              value={value}
+              onChange={(value) => {
+                onChange(value);
+                if (isLabelSyncedWithName === true) {
+                  fillNamePluralFromLabelPlural(value);
+                }
+              }}
+              disabled={disabled || disableNameEdit}
+              fullWidth
+              maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
+            />
+          )}
+        />
+      </StyledInputsContainer>
+      <Controller
+        name="description"
+        control={control}
+        defaultValue={objectMetadataItem?.description ?? null}
+        render={({ field: { onChange, value } }) => (
+          <TextArea
+            placeholder="Write a description"
+            minRows={4}
+            value={value ?? undefined}
+            onChange={(nextValue) => onChange(nextValue ?? null)}
+            disabled={disabled}
+          />
+        )}
+      />
+
       <AnimatePresence>
         {isAdvancedModeEnabled && (
-          <motion.div
-            ref={contentRef}
-            initial="initial"
-            animate="animate"
-            exit="exit"
-            variants={motionAnimationVariants}
-          >
-            <StyledAdvancedSettingsContainer>
+          <StyledAdvancedSettingsContainer>
+            <motion.div
+              ref={contentRef}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              variants={motionAnimationVariants}
+            >
               <StyledIconToolContainer>
                 <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
               </StyledIconToolContainer>
@@ -339,8 +335,8 @@ export const SettingsDataModelObjectAboutForm = ({
                   )}
                 />
               </StyledAdvancedSettingsSectionInputWrapper>
-            </StyledAdvancedSettingsContainer>
-          </motion.div>
+            </motion.div>
+          </StyledAdvancedSettingsContainer>
         )}
       </AnimatePresence>
     </>

From 4be44294119cd1a49d9c7693162abbe3c373188e Mon Sep 17 00:00:00 2001
From: Marie Stoppa <marie.stoppa@essec.edu>
Date: Mon, 4 Nov 2024 20:20:59 +0400
Subject: [PATCH 2/2] fix glitch

---
 .../SettingsDataModelObjectAboutForm.tsx      | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
index 223571d120fb..9e59ff4a4675 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@@ -73,7 +73,7 @@ const StyledAdvancedSettingsSectionInputWrapper = styled.div`
 const StyledAdvancedSettingsContainer = styled.div`
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
+  padding-top: ${({ theme }) => theme.spacing(4)};
   position: relative;
   width: 100%;
 `;
@@ -227,17 +227,16 @@ export const SettingsDataModelObjectAboutForm = ({
           />
         )}
       />
-
       <AnimatePresence>
         {isAdvancedModeEnabled && (
-          <StyledAdvancedSettingsContainer>
-            <motion.div
-              ref={contentRef}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              variants={motionAnimationVariants}
-            >
+          <motion.div
+            ref={contentRef}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={motionAnimationVariants}
+          >
+            <StyledAdvancedSettingsContainer>
               <StyledIconToolContainer>
                 <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
               </StyledIconToolContainer>
@@ -335,8 +334,8 @@ export const SettingsDataModelObjectAboutForm = ({
                   )}
                 />
               </StyledAdvancedSettingsSectionInputWrapper>
-            </motion.div>
-          </StyledAdvancedSettingsContainer>
+            </StyledAdvancedSettingsContainer>
+          </motion.div>
         )}
       </AnimatePresence>
     </>