Added IconButton Component

Summary: Added IconButton component with a ripple effect. I also placed it into the components where it will be used.

Reviewed By: passy

Differential Revision: D16378064

fbshipit-source-id: 6b677ec4a43adf94eb38136a9c607c85919c0176

src/plugins/navigation/components/SearchBar.js

@@ -14,7 +14,7 @@ import {
   Toolbar,
   Glyph,
 } from 'flipper';
-import {SearchBarButton} from './';
+import {IconButton} from './';
 
 type Props = {|
   onFavorite: (query: string) => void,
@@ -25,6 +25,22 @@ type State = {|
   query: string,
 |};
 
+const IconContainer = styled('div')({
+  display: 'inline-flex',
+  height: '16px',
+  alignItems: 'center',
+  '>*': {
+    marginLeft: 10,
+    '.icon-button': {
+      height: 16,
+    },
+    img: {
+      verticalAlign: 'top',
+      alignItems: 'none',
+    },
+  },
+});
+
 const SearchChevronContainer = styled('div')({
   marginRight: 12,
 });
@@ -63,14 +79,20 @@ class SearchBar extends Component<Props, State> {
             <Glyph name="chevron-down" size={12} />
           </SearchChevronContainer>
         </SearchBox>
-        <SearchBarButton
-          icon="send"
-          onClick={() => this.navigateTo(this.state.query)}
-        />
-        <SearchBarButton
-          icon="star"
-          onClick={() => this.favorite(this.state.query)}
-        />
+        <IconContainer>
+          <IconButton
+            icon="send"
+            size={16}
+            outline={true}
+            onClick={() => this.navigateTo(this.state.query)}
+          />
+          <IconButton
+            icon="star"
+            size={16}
+            outline={true}
+            onClick={() => this.favorite(this.state.query)}
+          />
+        </IconContainer>
       </Toolbar>
     );
   };