Fix advanced settings tool icon alignment (#8935)

Followup of @bosiraphael's design

<img width="333" alt="Screenshot 2024-12-06 at 17 25 45"
src="https://github.com/user-attachments/assets/b744a7a6-99cb-4d4c-b9da-df0661536208">
<img width="614" alt="Screenshot 2024-12-06 at 17 26 19"
src="https://github.com/user-attachments/assets/e9f31fed-66b2-4ed7-a5cd-97a9bc526752">

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
Félix Malfait
2024-12-06 18:07:37 +01:00
committed by GitHub
parent 9bbb963a08
commit b2be2fb398
7 changed files with 108 additions and 70 deletions

View File

@ -223,36 +223,36 @@ export const SettingsDataModelObjectAboutForm = ({
)}
/>
<StyledAdvancedSettingsOuterContainer>
<AdvancedSettingsWrapper>
<StyledAdvancedSettingsContainer>
<StyledAdvancedSettingsSectionInputWrapper>
{[
{
label: 'API Name (Singular)',
fieldName: 'nameSingular' as const,
placeholder: 'listing',
defaultValue: objectMetadataItem?.nameSingular,
disableEdition: disableEdition || isLabelSyncedWithName,
tooltip: apiNameTooltipText,
},
{
label: 'API Name (Plural)',
fieldName: 'namePlural' as const,
placeholder: 'listings',
defaultValue: objectMetadataItem?.namePlural,
disableEdition: disableEdition || isLabelSyncedWithName,
tooltip: apiNameTooltipText,
},
].map(
({
defaultValue,
fieldName,
label,
placeholder,
disableEdition,
tooltip,
}) => (
<StyledInputContainer key={`object-${fieldName}-text-input`}>
<StyledAdvancedSettingsContainer>
<StyledAdvancedSettingsSectionInputWrapper>
{[
{
label: 'API Name (Singular)',
fieldName: 'nameSingular' as const,
placeholder: 'listing',
defaultValue: objectMetadataItem?.nameSingular,
disableEdition: disableEdition || isLabelSyncedWithName,
tooltip: apiNameTooltipText,
},
{
label: 'API Name (Plural)',
fieldName: 'namePlural' as const,
placeholder: 'listings',
defaultValue: objectMetadataItem?.namePlural,
disableEdition: disableEdition || isLabelSyncedWithName,
tooltip: apiNameTooltipText,
},
].map(
({
defaultValue,
fieldName,
label,
placeholder,
disableEdition,
tooltip,
}) => (
<AdvancedSettingsWrapper key={`object-${fieldName}-text-input`}>
<StyledInputContainer>
<Controller
name={fieldName}
control={control}
@ -294,8 +294,10 @@ export const SettingsDataModelObjectAboutForm = ({
)}
/>
</StyledInputContainer>
),
)}
</AdvancedSettingsWrapper>
),
)}
<AdvancedSettingsWrapper>
<Controller
name={IS_LABEL_SYNCED_WITH_NAME_LABEL}
control={control}
@ -324,9 +326,9 @@ export const SettingsDataModelObjectAboutForm = ({
</Card>
)}
/>
</StyledAdvancedSettingsSectionInputWrapper>
</StyledAdvancedSettingsContainer>
</AdvancedSettingsWrapper>
</AdvancedSettingsWrapper>
</StyledAdvancedSettingsSectionInputWrapper>
</StyledAdvancedSettingsContainer>
</StyledAdvancedSettingsOuterContainer>
</>
);