admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix advanced settings tool icon alignment (#8935)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
View File

@ -5,7 +5,7 @@ import {
CardContent,
CardFooter,
IconPlus,
IconTool,
IconPoint,
LightButton,
MAIN_COLORS,
} from 'twenty-ui';
@ -104,7 +104,7 @@ const StyledIconContainer = styled.div`
margin-top: ${({ theme }) => theme.spacing(1)};
`;
const StyledIconTool = styled(IconTool)`
const StyledIconPoint = styled(IconPoint)`
margin-right: ${({ theme }) => theme.spacing(0.5)};
`;
@ -253,7 +253,11 @@ export const SettingsDataModelFieldSelectForm = ({
<AdvancedSettingsWrapper dimension="width" hideIcon={true}>
<StyledApiKeyContainer>
<StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
<StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<StyledApiKey>API values</StyledApiKey>
</StyledApiKeyContainer>

72
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
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>
</>
);