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/Tabs.js

@@ -12,45 +12,38 @@ import FlexRow from './FlexRow.js';
 import {colors} from './colors.js';
 import Tab from './Tab.js';
 
-const TabList = FlexRow.extends({
+const TabList = styled(FlexRow)({
   alignItems: 'stretch',
 });
 
-const TabListItem = styled.view(
-  {
-    backgroundColor: props => (props.active ? colors.light15 : colors.light02),
-    borderBottom: '1px solid #dddfe2',
-    boxShadow: props =>
-      props.active ? 'inset 0px 0px 3px rgba(0,0,0,0.25)' : 'none',
-    color: colors.dark80,
-    flex: 1,
-    fontSize: 13,
-    lineHeight: '28px',
-    overflow: 'hidden',
-    padding: '0 10px',
-    position: 'relative',
-    textAlign: 'center',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+const TabListItem = styled('div')(props => ({
+  backgroundColor: props.active ? colors.light15 : colors.light02,
+  borderBottom: '1px solid #dddfe2',
+  boxShadow: props.active ? 'inset 0px 0px 3px rgba(0,0,0,0.25)' : 'none',
+  color: colors.dark80,
+  flex: 1,
+  fontSize: 13,
+  lineHeight: '28px',
+  overflow: 'hidden',
+  padding: '0 10px',
+  position: 'relative',
+  textAlign: 'center',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 
-    '&:hover': {
-      backgroundColor: props =>
-        props.active ? colors.light15 : colors.light05,
-    },
+  '&:hover': {
+    backgroundColor: props.active ? colors.light15 : colors.light05,
   },
-  {
-    ignoreAttributes: ['active'],
-  },
-);
+}));
 
-const TabListAddItem = TabListItem.extends({
+const TabListAddItem = styled(TabListItem)({
   borderRight: 'none',
   flex: 0,
   flexGrow: 0,
   fontWeight: 'bold',
 });
 
-const CloseButton = styled.view({
+const CloseButton = styled('div')({
   color: '#000',
   float: 'right',
   fontSize: 10,
@@ -69,11 +62,11 @@ const CloseButton = styled.view({
   },
 });
 
-const OrderableContainer = styled.view({
+const OrderableContainer = styled('div')({
   display: 'inline-block',
 });
 
-const TabContent = styled.view({
+const TabContent = styled('div')({
   height: '100%',
   overflow: 'auto',
   width: '100%',