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/ui/components/table/TableHead.js

@@ -27,11 +27,11 @@ const invariant = require('invariant');
 
 type MenuTemplate = Array<Electron$MenuItemOptions>;
 
-const TableHeaderArrow = styled.text({
+const TableHeaderArrow = styled('span')({
   float: 'right',
 });
 
-const TableHeaderColumnInteractive = Interactive.extends({
+const TableHeaderColumnInteractive = styled(Interactive)({
   display: 'inline-block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -39,11 +39,11 @@ const TableHeaderColumnInteractive = Interactive.extends({
   width: '100%',
 });
 
-const TableHeaderColumnContainer = styled.view({
+const TableHeaderColumnContainer = styled('div')({
   padding: '0 8px',
 });
 
-const TableHeadContainer = FlexRow.extends({
+const TableHeadContainer = styled(FlexRow)({
   borderBottom: `1px solid ${colors.sectionHeaderBorder}`,
   color: colors.light50,
   flexShrink: 0,
@@ -56,33 +56,28 @@ const TableHeadContainer = FlexRow.extends({
   zIndex: 2,
 });
 
-const TableHeadColumnContainer = styled.view(
-  {
-    position: 'relative',
-    backgroundColor: colors.white,
-    flexShrink: props => (props.width === 'flex' ? 1 : 0),
-    height: 23,
-    lineHeight: '23px',
-    fontSize: '0.85em',
-    fontWeight: 500,
-    width: props => (props.width === 'flex' ? '100%' : props.width),
-    '&::after': {
-      position: 'absolute',
-      content: '""',
-      right: 0,
-      top: 5,
-      height: 13,
-      width: 1,
-      background: colors.light15,
-    },
-    '&:last-child::after': {
-      display: 'none',
-    },
+const TableHeadColumnContainer = styled('div')(props => ({
+  position: 'relative',
+  backgroundColor: colors.white,
+  flexShrink: props.width === 'flex' ? 1 : 0,
+  height: 23,
+  lineHeight: '23px',
+  fontSize: '0.85em',
+  fontWeight: 500,
+  width: props.width === 'flex' ? '100%' : props.width,
+  '&::after': {
+    position: 'absolute',
+    content: '""',
+    right: 0,
+    top: 5,
+    height: 13,
+    width: 1,
+    background: colors.light15,
   },
-  {
-    ignoreAttributes: ['width'],
+  '&:last-child::after': {
+    display: 'none',
   },
-);
+}));
 
 const RIGHT_RESIZABLE = {right: true};