convert to emotion

Summary:
My benchmarks have shown react-emotion to be faster than the current implementation of `styled`. For this reason, I am converting all styling to [emotion](https://emotion.sh).

Benchmark results:
{F136839093}

The syntax is very similar between the two libraries. The main difference is that emotion only allows a single function for the whole style attribute, whereas the old implementation had functions for every style-attirbute.

Before:
```
{
  color: props => props.color,
  fontSize: props => props.size,
}
```

After:
```
props => ({
  color: props.color,
  fontSize: props.size,
})
```

Reviewed By: jknoxville

Differential Revision: D9479893

fbshipit-source-id: 2c39e4618f7e52ceacb67bbec8ae26114025723f

src/device-plugins/logs/index.js

@@ -25,6 +25,7 @@ import {
   FlexColumn,
   Glyph,
   SonarSidebar,
+  styled,
 } from 'sonar';
 import {SonarDevicePlugin, SearchableTable} from 'sonar';
 import textContent from '../../utils/textContent.js';
@@ -47,7 +48,7 @@ type LogsState = {|
   counters: Array<Counter>,
 |};
 
-const Icon = Glyph.extends({
+const Icon = styled(Glyph)({
   marginTop: 5,
 });
 
@@ -202,7 +203,7 @@ const DEFAULT_FILTERS = [
   },
 ];
 
-const HiddenScrollText = Text.extends({
+const HiddenScrollText = styled(Text)({
   alignSelf: 'baseline',
   userSelect: 'none',
   lineHeight: '130%',
@@ -212,23 +213,18 @@ const HiddenScrollText = Text.extends({
   },
 });
 
-const LogCount = HiddenScrollText.extends(
-  {
-    backgroundColor: props => props.color,
-    borderRadius: '999em',
-    fontSize: 11,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 4,
-    width: 16,
-    height: 16,
-    color: colors.white,
-  },
-  {
-    ignoreAttributes: ['color'],
-  },
-);
+const LogCount = styled(HiddenScrollText)(({color}) => ({
+  backgroundColor: color,
+  borderRadius: '999em',
+  fontSize: 11,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: 4,
+  width: 16,
+  height: 16,
+  color: colors.white,
+}));
 
 function pad(chunk: mixed, len: number): string {
   let str = String(chunk);
@@ -529,7 +525,7 @@ export default class LogTable extends SonarDevicePlugin<LogsState> {
     );
   };
 
-  static ContextMenu = ContextMenu.extends({
+  static ContextMenu = styled(ContextMenu)({
     flex: 1,
   });