Moved search icon into separate React component
Brian Vaughn committed
Jan 31, 2019 at 14:46 UTC
1eccdd6f8a96bf3fe2c21bd7470758cc38b20b61
4 files changed
+30
-21
src/devtools/views/Elements.css
-7
@@ -42,13 +42,6 @@
42
color: var(--color-special02);
43
}
44
45
-.IconButtonSVG {
46
- width: 1rem;
47
- height: 1rem;
48
- margin-right: 0.25rem;
49
- fill: currentColor;
50
-}
51
-
45
.Tree {
46
width: 100%;
47
overflow: auto;
src/devtools/views/Elements.js
+2
-14
@@ -4,6 +4,7 @@ import React, { useLayoutEffect, useMemo, useState } from 'react';
4
import Store from '../store';
5
import Tree from './Tree';
6
import { StoreContext, TreeContext } from './contexts';
7
+import SearchIcon from './SearchIcon';
8
import styles from './Elements.css';
9
10
import './root.css';
@@ -47,20 +48,7 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
48
placeholder="Search (text or /regex/)"
49
/>
50
<button className={styles.IconButton}>
50
- <svg
51
- xmlns="http://www.w3.org/2000/svg"
52
- className={styles.IconButtonSVG}
53
- width="24"
54
- height="24"
55
- viewBox="0 0 24 24"
56
- >
57
- <path d="M0 0h24v24H0z" fill="none" />
58
- <path
59
- fill="currentColor"
60
- d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
61
- />
62
- </svg>
63
- Select
51
+ <SearchIcon /> Select
52
</button>
53
</div>
54
<div className={styles.Tree}>
src/devtools/views/SearchIcon.css
new
+6
@@ -0,0 +1,6 @@
1
+.Icon {
2
+ width: 1rem;
3
+ height: 1rem;
4
+ margin: 0 0.25rem;
5
+ fill: currentColor;
6
+}
src/devtools/views/SearchIcon.js
new
+22
@@ -0,0 +1,22 @@
1
+// @flow
2
+
3
+import React from 'react';
4
+import styles from './SearchIcon.css';
5
+
6
+export default function SearchIcon() {
7
+ return (
8
+ <svg
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ className={styles.Icon}
11
+ width="24"
12
+ height="24"
13
+ viewBox="0 0 24 24"
14
+ >
15
+ <path d="M0 0h24v24H0z" fill="none" />
16
+ <path
17
+ fill="currentColor"
18
+ d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
19
+ />
20
+ </svg>
21
+ );
22
+}