fix: Boolean editable field not align properly (#1444)

This commit is contained in:
Jérémy M
2023-09-05 09:50:23 +02:00
committed by GitHub
parent 33c67214d6
commit 421066c4b8

View File

@ -13,10 +13,11 @@ import { FieldDefinition } from '../types/FieldDefinition';
import { FieldBooleanMetadata } from '../types/FieldMetadata';
const StyledEditableBooleanFieldContainer = styled.div`
align-items: center;
cursor: pointer;
display: flex;
`;
const StyledBooleanFieldIcon = styled.div``;
const StyledEditableBooleanFieldValue = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)};
`;
@ -54,13 +55,11 @@ export function GenericEditableBooleanFieldDisplayMode() {
return (
<StyledEditableBooleanFieldContainer onClick={toggleValue}>
<StyledBooleanFieldIcon>
{fieldValue ? (
<IconCheck size={theme.icon.size.sm} />
) : (
<IconX size={theme.icon.size.sm} />
)}
</StyledBooleanFieldIcon>
{fieldValue ? (
<IconCheck size={theme.icon.size.sm} />
) : (
<IconX size={theme.icon.size.sm} />
)}
<StyledEditableBooleanFieldValue>
{fieldValue ? 'True' : 'False'}
</StyledEditableBooleanFieldValue>