Tweaked colors based on Andrew's feedback
Brian Vaughn committed
Feb 21, 2019 at 14:02 UTC
ddeb78001c108226d335aa2e255b3e72a35ed0f6
4 files changed
+27
-10
src/devtools/views/HooksTree.css
+6
-2
@@ -7,17 +7,21 @@
7
padding-left: 0.75rem;
8
}
9
10
+.Header {
11
+ font-family: var(--font-family-sans);
12
+ color: var(--color-dim);
13
+}
14
+
15
.NameValueRow {
16
display: flex;
17
}
18
19
.Name {
15
- color: var(--color-attribute-name);
20
+ color: var(--color-text-color);
21
flex: 0 0 auto;
22
}
23
.Name:after {
24
content: ': ';
20
- color: var(--color-text-color);
25
margin-right: 0.5rem;
26
}
27
src/devtools/views/HooksTree.js
+8
-2
@@ -19,7 +19,7 @@ export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
19
} else {
20
return (
21
<div className={styles.HooksTreeView}>
22
- <div className={styles.Item}>hooks</div>
22
+ <div className={styles.Header}>hooks</div>
23
<InnerHooksTreeView canEditHooks={canEditHooks} hooks={hooks} id={id} />
24
</div>
25
);
@@ -96,7 +96,12 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
96
<div className={styles.NameValueRow}>
97
<span className={styles.Name}>{name}</span>
98
</div>
99
- <KeyValue depth={1} name="DebugValue" value={value} />
99
+ <KeyValue
100
+ depth={1}
101
+ name="DebugValue"
102
+ nameClassName={styles.Name}
103
+ value={value}
104
+ />
105
<InnerHooksTreeView
106
canEditHooks={canEditHooks}
107
hooks={subHooks}
@@ -141,6 +146,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
146
<KeyValue
147
depth={0}
148
name={name}
149
+ nameClassName={styles.Name}
150
overrideValueFn={overrideValueFn}
151
value={value}
152
/>
src/devtools/views/InspectedElementTree.css
+5
@@ -6,6 +6,11 @@
6
border-top: none;
7
}
8
9
+.Header {
10
+ font-family: var(--font-family-sans);
11
+ color: var(--color-dim);
12
+}
13
+
14
.Item {
15
display: flex;
16
}
src/devtools/views/InspectedElementTree.js
+8
-6
@@ -30,7 +30,7 @@ export default function InspectedElementTree({
30
// TODO Add click and key handlers for toggling element open/close state.
31
return (
32
<div className={styles.InspectedElementTree}>
33
- <div className={styles.Item}>{label}</div>
33
+ <div className={styles.Header}>{label}</div>
34
{isEmpty && <div className={styles.Empty}>None</div>}
35
{!isEmpty &&
36
Object.keys((data: any)).map(name => (
@@ -51,6 +51,7 @@ export default function InspectedElementTree({
51
type KeyValueProps = {|
52
depth: number,
53
name: string,
54
+ nameClassName?: string,
55
overrideValueFn?: ?OverrideValueFn,
56
path?: Array<any>,
57
value: any,
@@ -59,6 +60,7 @@ type KeyValueProps = {|
60
export function KeyValue({
61
depth,
62
name,
63
+ nameClassName = styles.Name,
64
overrideValueFn,
65
path = [],
66
value,
@@ -87,7 +89,7 @@ export function KeyValue({
89
90
children = (
91
<div key="root" className={styles.Item} style={{ paddingLeft }}>
90
- <span className={styles.Name}>{name}</span>
92
+ <span className={nameClassName}>{name}</span>
93
{typeof overrideValueFn === 'function' ? (
94
<EditableValue
95
dataType={dataType}
@@ -104,7 +106,7 @@ export function KeyValue({
106
// TODO Is this type even necessary? Can we just drop it?
107
children = (
108
<div key="root" className={styles.Item} style={{ paddingLeft }}>
107
- <span className={styles.Name}>{name}</span>
109
+ <span className={nameClassName}>{name}</span>
110
<span className={styles.Value}>{getMetaValueLabel(value)}</span>
111
</div>
112
);
@@ -126,7 +128,7 @@ export function KeyValue({
128
className={styles.Item}
129
style={{ paddingLeft }}
130
>
129
- <span className={styles.Name}>{name}</span>
131
+ <span className={nameClassName}>{name}</span>
132
<span>Array</span>
133
</div>
134
);
@@ -148,7 +150,7 @@ export function KeyValue({
150
className={styles.Item}
151
style={{ paddingLeft }}
152
>
151
- <span className={styles.Name}>{name}</span>
153
+ <span className={nameClassName}>{name}</span>
154
<span>Object</span>
155
</div>
156
);
@@ -239,7 +241,7 @@ export function EditableValue({
241
value={dataType === 'boolean' ? undefined : inputValue}
242
/>
243
</label>
242
- {hasPendingChanges && (
244
+ {hasPendingChanges && dataType !== 'boolean' && (
245
<Button
246
className={styles.ResetButton}
247
onClick={handleReset}