fix: Boolean editable field not align properly (#1444)
This commit is contained in:
@ -13,10 +13,11 @@ import { FieldDefinition } from '../types/FieldDefinition';
|
|||||||
import { FieldBooleanMetadata } from '../types/FieldMetadata';
|
import { FieldBooleanMetadata } from '../types/FieldMetadata';
|
||||||
|
|
||||||
const StyledEditableBooleanFieldContainer = styled.div`
|
const StyledEditableBooleanFieldContainer = styled.div`
|
||||||
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
`;
|
`;
|
||||||
const StyledBooleanFieldIcon = styled.div``;
|
|
||||||
const StyledEditableBooleanFieldValue = styled.div`
|
const StyledEditableBooleanFieldValue = styled.div`
|
||||||
margin-left: ${({ theme }) => theme.spacing(1)};
|
margin-left: ${({ theme }) => theme.spacing(1)};
|
||||||
`;
|
`;
|
||||||
@ -54,13 +55,11 @@ export function GenericEditableBooleanFieldDisplayMode() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledEditableBooleanFieldContainer onClick={toggleValue}>
|
<StyledEditableBooleanFieldContainer onClick={toggleValue}>
|
||||||
<StyledBooleanFieldIcon>
|
{fieldValue ? (
|
||||||
{fieldValue ? (
|
<IconCheck size={theme.icon.size.sm} />
|
||||||
<IconCheck size={theme.icon.size.sm} />
|
) : (
|
||||||
) : (
|
<IconX size={theme.icon.size.sm} />
|
||||||
<IconX size={theme.icon.size.sm} />
|
)}
|
||||||
)}
|
|
||||||
</StyledBooleanFieldIcon>
|
|
||||||
<StyledEditableBooleanFieldValue>
|
<StyledEditableBooleanFieldValue>
|
||||||
{fieldValue ? 'True' : 'False'}
|
{fieldValue ? 'True' : 'False'}
|
||||||
</StyledEditableBooleanFieldValue>
|
</StyledEditableBooleanFieldValue>
|
||||||
|
|||||||
Reference in New Issue
Block a user