{"parents":["290e8c69265eada53fa3315903ab6fda82b0c8ce"],"patch":"diff --git a\/src\/devtools\/views\/HooksTree.css b\/src\/devtools\/views\/HooksTree.css\nindex 0d2ded1859..ac326a90fb 100644\n--- a\/src\/devtools\/views\/HooksTree.css\n+++ b\/src\/devtools\/views\/HooksTree.css\n@@ -7,17 +7,21 @@\n padding-left: 0.75rem;\n }\n \n+.Header {\n+ font-family: var(--font-family-sans);\n+ color: var(--color-dim);\n+}\n+\n .NameValueRow {\n display: flex;\n }\n \n .Name {\n- color: var(--color-attribute-name);\n+ color: var(--color-text-color);\n flex: 0 0 auto;\n }\n .Name:after {\n content: ': ';\n- color: var(--color-text-color);\n margin-right: 0.5rem;\n }\n \ndiff --git a\/src\/devtools\/views\/HooksTree.js b\/src\/devtools\/views\/HooksTree.js\nindex cf02c3a046..9c6eb0a9fc 100644\n--- a\/src\/devtools\/views\/HooksTree.js\n+++ b\/src\/devtools\/views\/HooksTree.js\n@@ -19,7 +19,7 @@ export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {\n } else {\n return (\n

\n-

hooks<\/div>\n+

hooks<\/div>\n \n <\/div>\n );\n@@ -96,7 +96,12 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {\n

\n {name}<\/span>\n <\/div>\n- \n+ \n \ndiff --git a\/src\/devtools\/views\/InspectedElementTree.css b\/src\/devtools\/views\/InspectedElementTree.css\nindex 7516bc1393..9b4f89584a 100644\n--- a\/src\/devtools\/views\/InspectedElementTree.css\n+++ b\/src\/devtools\/views\/InspectedElementTree.css\n@@ -6,6 +6,11 @@\n border-top: none;\n }\n \n+.Header {\n+ font-family: var(--font-family-sans);\n+ color: var(--color-dim);\n+}\n+\n .Item {\n display: flex;\n }\ndiff --git a\/src\/devtools\/views\/InspectedElementTree.js b\/src\/devtools\/views\/InspectedElementTree.js\nindex a6d4351431..dde2899a6e 100644\n--- a\/src\/devtools\/views\/InspectedElementTree.js\n+++ b\/src\/devtools\/views\/InspectedElementTree.js\n@@ -30,7 +30,7 @@ export default function InspectedElementTree({\n \/\/ TODO Add click and key handlers for toggling element open\/close state.\n return (\n

\n-

{label}<\/div>\n+

{label}<\/div>\n {isEmpty &&

None<\/div>}\n {!isEmpty &&\n Object.keys((data: any)).map(name => (\n@@ -51,6 +51,7 @@ export default function InspectedElementTree({\n type KeyValueProps = {|\n depth: number,\n name: string,\n+ nameClassName?: string,\n overrideValueFn?: ?OverrideValueFn,\n path?: Array,\n value: any,\n@@ -59,6 +60,7 @@ type KeyValueProps = {|\n export function KeyValue({\n depth,\n name,\n+ nameClassName = styles.Name,\n overrideValueFn,\n path = [],\n value,\n@@ -87,7 +89,7 @@ export function KeyValue({\n \n children = (\n

\n- {name}<\/span>\n+ {name}<\/span>\n {typeof overrideValueFn === 'function' ? (\n \n- {name}<\/span>\n+ {name}<\/span>\n {getMetaValueLabel(value)}<\/span>\n <\/div>\n );\n@@ -126,7 +128,7 @@ export function KeyValue({\n className={styles.Item}\n style={{ paddingLeft }}\n >\n- {name}<\/span>\n+ {name}<\/span>\n Array<\/span>\n <\/div>\n );\n@@ -148,7 +150,7 @@ export function KeyValue({\n className={styles.Item}\n style={{ paddingLeft }}\n >\n- {name}<\/span>\n+ {name}<\/span>\n Object<\/span>\n <\/div>\n );\n@@ -239,7 +241,7 @@ export function EditableValue({\n value={dataType === 'boolean' ? undefined : inputValue}\n \/>\n <\/label>\n- {hasPendingChanges && (\n+ {hasPendingChanges && dataType !== 'boolean' && (\n

dillon1000/react

Files changed