diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx index 5b9c96bcf..13e948887 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx @@ -16,7 +16,7 @@ import { UINode, } from '../../../types'; import {DataInspector, Panel, styled} from 'flipper-plugin'; -import {Checkbox, Col, Row} from 'antd'; +import {Col, Row} from 'antd'; import {displayableName} from '../utilities/displayableName'; import ColorInspector from './ColorInspector'; import SizeInspector from './SizeInspector'; @@ -26,6 +26,7 @@ import Coordinate3DInspector from './Coordinate3DInspector'; import CoordinateInspector from './CoordinateInspector'; import { AutoMarginStyle, + BooleanAttributeValueStyle, EnumAttributeValueStyle, NumberAttributeValueStyle, ObjectContainerStyle, @@ -36,6 +37,7 @@ import {Glyph} from 'flipper'; import {transform} from '../../../dataTransform'; const NumberValue = styled.span(NumberAttributeValueStyle); +const BooleanValue = styled.span(BooleanAttributeValueStyle); const TextValue = styled.span(TextAttributeValueStyle); const EnumValue = styled.span(EnumAttributeValueStyle); const ObjectContainer = styled.div(ObjectContainerStyle); @@ -98,7 +100,7 @@ function create( case 'boolean': return ( - + {inspectable.value ? 'TRUE' : 'FALSE'} ); case 'enum': diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx index 42519278f..849650cf8 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx @@ -55,6 +55,12 @@ export const NumberAttributeValueStyle = { display: 'flex', } as const; +export const BooleanAttributeValueStyle = { + color: theme.semanticColors.booleanValue, + fontSize: theme.fontSize.small, + alignItems: 'center', +} as const; + export const TextAttributeValueStyle = { color: theme.semanticColors.stringValue, display: 'flex',