Upgrade to emotion v10

Summary: React 16 is not compatible with react-emotion 9 (it prints warnings, see also https://github.com/emotion-js/emotion/issues/644). So we should upgrade to 10.

Reviewed By: mweststrate

Differential Revision: D18905889

fbshipit-source-id: c00d2dbbadb1c08544632cb9bfcd63f2b1818a25

.vscode/launch.json

@@ -7,6 +7,13 @@
       "request": "attach",
       "port": 9222,
       "webRoot": "${workspaceRoot}"
-    }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Current Jest Suite",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["--runInBand", "${relativeFile}"]
+   }
   ]
 }

docs/extending/styling-components.md

@@ -12,13 +12,13 @@ For basic building blocks (views, texts, ...) you can use the styled object.
 ```javascript
 import {styled} from 'flipper';
 
-const MyView = styled('div')({
+const MyView = styled.div({
   fontSize: 10,
   color: colors.red
 });
-const MyText = styled('span')({ ... });
+const MyText = styled.span({ ... });
-const MyImage = styled('img')({ ... });
+const MyImage = styled.img({ ... });
-const MyInput = styled('input')({ ... });
+const MyInput = styled.input({ ... });
 ```
 
 ## Extending Flipper Components
@@ -46,7 +46,7 @@ The CSS-in-JS object passed to the styled components takes just any CSS rule, wi
 The style object can also be returned from a function for dynamic values. Props can be passed to the styled component using React.
 
 ```javascript
-const MyView = styled('div')(
+const MyView = styled.div(
   props => ({
     fontSize: 10,
     color:  => (props.disabled ? colors.red : colors.black),

docs/tutorial/js-custom.md

@@ -120,7 +120,7 @@ class Card extends React.Component<{
     cursor: 'pointer',
   }));
 
-  static Image = styled('div')({
+  static Image = styled.div({
     backgroundSize: 'cover',
     width: '100%',
     paddingTop: '100%',

package.json

@@ -108,6 +108,8 @@
     "typescript": "^3.7.2"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
     "@types/promise-retry": "^1.1.3",
     "@types/react-color": "^3.0.1",
     "@types/react-test-renderer": "^16.9.1",
@@ -131,7 +133,7 @@
     "deep-equal": "^1.0.1",
     "detect-port": "^1.1.1",
     "electron-devtools-installer": "^2.2.0",
-    "emotion": "^9.2.6",
+    "emotion": "^10.0.23",
     "expand-tilde": "^2.0.2",
     "express": "^4.15.2",
     "flipper-doctor": "^0.2.1",
@@ -159,7 +161,6 @@
     "react-debounce-render": "^5.0.0",
     "react-devtools-core": "^4.0.6",
     "react-dom": "^16.12.0",
-    "react-emotion": "^9.2.6",
     "react-markdown": "^4.2.2",
     "react-player": "^1.14.1",
     "react-redux": "^7.1.1",
@@ -188,8 +189,6 @@
     "ignore": [
       "electron",
       "electron-builder",
-      "emotion",
-      "react-emotion",
       "tmp"
     ]
   },

src/NotificationsHub.tsx

@@ -319,7 +319,7 @@ type NotificationBoxProps = {
   severity: keyof typeof SEVERITY_COLOR_MAP;
 };
 
-const NotificationBox = styled(FlexRow)((props: NotificationBoxProps) => ({
+const NotificationBox = styled(FlexRow)<NotificationBoxProps>(props => ({
   backgroundColor: props.inactive ? 'transparent' : colors.white,
   opacity: props.inactive ? 0.5 : 1,
   alignItems: 'flex-start',
@@ -348,7 +348,7 @@ const NotificationBox = styled(FlexRow)((props: NotificationBoxProps) => ({
   },
 }));
 
-const Title = styled('div')({
+const Title = styled.div({
   minWidth: 150,
   color: colors.light80,
   flexShrink: 0,
@@ -358,8 +358,8 @@ const Title = styled('div')({
   fontSize: '1.1em',
 });
 
-const NotificationContent = styled(FlexColumn)(
+const NotificationContent = styled(FlexColumn)<{isSelected?: boolean}>(
-  (props: {isSelected?: boolean}) => ({
+  props => ({
     marginLeft: 6,
     marginRight: 10,
     flexGrow: 1,
@@ -379,7 +379,7 @@ const Actions = styled(FlexRow)({
   paddingTop: 8,
 });
 
-const NotificationButton = styled('div')({
+const NotificationButton = styled.div({
   border: `1px solid ${colors.light20}`,
   color: colors.light50,
   borderRadius: 4,

src/chrome/BugReporterDialog.tsx

@@ -44,7 +44,7 @@ const Center = styled(Text)({
   paddingRight: 20,
 });
 
-const Title = styled('div')({
+const Title = styled.div({
   fontWeight: 500,
   marginTop: 8,
   marginLeft: 2,
@@ -66,7 +66,7 @@ const DescriptionTextarea = styled(Textarea)({
   flexGrow: 1,
 });
 
-const SubmitButtonContainer = styled('div')({
+const SubmitButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 
@@ -118,8 +118,8 @@ class BugReporterDialog extends Component<Props, State> {
     error: null,
   };
 
-  titleRef?: HTMLElement;
+  titleRef?: HTMLElement | null;
-  descriptionRef?: HTMLElement;
+  descriptionRef?: HTMLElement | null;
 
   onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.setState({description: e.target.value});
@@ -184,11 +184,11 @@ class BugReporterDialog extends Component<Props, State> {
     );
   };
 
-  setTitleRef = (ref: HTMLElement) => {
+  setTitleRef = (ref: HTMLElement | null) => {
     this.titleRef = ref;
   };
 
-  setDescriptionRef = (ref: HTMLElement) => {
+  setDescriptionRef = (ref: HTMLElement | null) => {
     this.descriptionRef = ref;
   };
 
@@ -240,7 +240,7 @@ class BugReporterDialog extends Component<Props, State> {
           <TitleInput
             placeholder="Title"
             value={title}
-            innerRef={this.setTitleRef}
+            ref={this.setTitleRef}
             onChange={this.onTitleChange}
             disabled={submitting}
           />
@@ -248,7 +248,7 @@ class BugReporterDialog extends Component<Props, State> {
           <DescriptionTextarea
             placeholder="Describe your problem in as much detail as possible."
             value={description}
-            innerRef={this.setDescriptionRef}
+            ref={this.setDescriptionRef}
             onChange={this.onDescriptionChange}
             disabled={submitting}
           />

src/chrome/DoctorBar.tsx

@@ -114,12 +114,12 @@ export default connect<StateFromProps, DispatchFromProps, {}, Store>(null, {
   finishHealthchecks,
 })(DoctorBar);
 
-const Container = styled('div')({
+const Container = styled.div({
   boxShadow: '2px 2px 2px #ccc',
   userSelect: 'text',
 });
 
-const WarningContainer = styled('div')({
+const WarningContainer = styled.div({
   backgroundColor: colors.orange,
   color: '#fff',
   maxHeight: '600px',

src/chrome/ErrorBar.tsx

@@ -120,12 +120,12 @@ function ErrorTile({
   );
 }
 
-const ErrorBarContainer = styled('div')({
+const ErrorBarContainer = styled.div({
   boxShadow: '2px 2px 2px #ccc',
   userSelect: 'text',
 });
 
-const DismissAllErrors = styled('div')({
+const DismissAllErrors = styled.div({
   boxShadow: '2px 2px 2px #ccc',
   backgroundColor: colors.cherryDark3,
   color: '#fff',
@@ -143,12 +143,12 @@ const DismissAllErrors = styled('div')({
   alignItems: 'center',
 });
 
-const ErrorDetails = styled('div')({
+const ErrorDetails = styled.div({
   width: '100%',
   marginTop: 4,
 });
 
-const ErrorRows = styled('div')({
+const ErrorRows = styled.div({
   backgroundColor: colors.cherry,
   color: '#fff',
   maxHeight: '600px',
@@ -160,7 +160,7 @@ const ErrorRows = styled('div')({
   },
 });
 
-const ErrorRow = styled('div')({
+const ErrorRow = styled.div({
   padding: '4px 12px',
   borderBottom: '1px solid ' + colors.cherryDark3,
   verticalAlign: 'middle',

src/chrome/ListView.tsx

@@ -66,24 +66,17 @@ const RowComponentContainer = styled(FlexColumn)({
   maxHeight: 500,
 });
 
-const Padder = styled('div')(
+const Padder = styled.div<{
-  ({
+  paddingLeft?: number;
-    paddingLeft,
+  paddingRight?: number;
-    paddingRight,
+  paddingBottom?: number;
-    paddingBottom,
+  paddingTop?: number;
-    paddingTop,
+}>(({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
-  }: {
+  paddingLeft: paddingLeft || 0,
-    paddingLeft?: number;
+  paddingRight: paddingRight || 0,
-    paddingRight?: number;
+  paddingBottom: paddingBottom || 0,
-    paddingBottom?: number;
+  paddingTop: paddingTop || 0,
-    paddingTop?: number;
+}));
-  }) => ({
-    paddingLeft: paddingLeft || 0,
-    paddingRight: paddingRight || 0,
-    paddingBottom: paddingBottom || 0,
-    paddingTop: paddingTop || 0,
-  }),
-);
 
 type RowComponentProps = {
   name: string;

src/chrome/MainSidebar.tsx

@@ -51,7 +51,6 @@ import {setActiveSheet} from '../reducers/application';
 import UserAccount from './UserAccount';
 import {connect} from 'react-redux';
 import {BackgroundColorProperty} from 'csstype';
-import {StyledOtherComponent} from 'create-emotion-styled';
 import SupportRequestFormManager from '../fb-stubs/SupportRequestFormManager';
 import SupportRequestDetails from '../fb-stubs/SupportRequestDetails';
 import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
@@ -59,7 +58,7 @@ import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
 type FlipperPlugins = typeof FlipperPlugin[];
 type PluginsByCategory = [string, FlipperPlugins][];
 
-const ListItem = styled('div')(({active}: {active?: boolean}) => ({
+const ListItem = styled.div<{active?: boolean}>(({active}) => ({
   paddingLeft: 10,
   display: 'flex',
   alignItems: 'center',
@@ -74,7 +73,7 @@ const ListItem = styled('div')(({active}: {active?: boolean}) => ({
   },
 }));
 
-const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
+const SidebarButton = styled(Button)<{small?: boolean}>(({small}) => ({
   fontWeight: 'bold',
   fontSize: small ? 11 : 14,
   width: '100%',
@@ -88,22 +87,22 @@ const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
   whiteSpace: 'nowrap',
 }));
 
-const PluginShape = styled(FlexBox)(
+const PluginShape = styled(FlexBox)<{
-  ({backgroundColor}: {backgroundColor?: BackgroundColorProperty}) => ({
+  backgroundColor?: BackgroundColorProperty;
-    marginRight: 8,
+}>(({backgroundColor}) => ({
-    backgroundColor,
+  marginRight: 8,
-    borderRadius: 3,
+  backgroundColor,
-    flexShrink: 0,
+  borderRadius: 3,
-    width: 18,
+  flexShrink: 0,
-    height: 18,
+  width: 18,
-    justifyContent: 'center',
+  height: 18,
-    alignItems: 'center',
+  justifyContent: 'center',
-    top: '-1px',
+  alignItems: 'center',
-  }),
+  top: '-1px',
-);
+}));
 
-const PluginName = styled(Text)(
+const PluginName = styled(Text)<{isActive?: boolean; count?: number}>(
-  (props: {isActive?: boolean; count?: number}) => ({
+  props => ({
     minWidth: 0,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
@@ -211,9 +210,7 @@ const Spinner = centerInSidebar(LoadingIndicator);
 
 const ErrorIndicator = centerInSidebar(Glyph);
 
-function centerInSidebar(
+function centerInSidebar(component: any) {
-  component: StyledOtherComponent<any, {}, any> | React.ComponentType<any>,
-) {
   return styled(component)({
     marginTop: '10px',
     marginBottom: '10px',

src/chrome/Popover.tsx

@@ -18,7 +18,7 @@ import {
 } from 'flipper';
 import React, {PureComponent} from 'react';
 
-const Anchor = styled('img')({
+const Anchor = styled.img({
   zIndex: 6,
   position: 'absolute',
   bottom: 0,
@@ -100,13 +100,13 @@ const ItemImage = styled(FlexBox)({
   flexShrink: 0,
 });
 
-const ItemContent = styled('div')({
+const ItemContent = styled.div({
   minWidth: 0,
   paddingRight: 5,
   flexGrow: 1,
 });
 
-const Section = styled('div')({
+const Section = styled.div({
   borderBottom: `1px solid ${colors.light05}`,
   '&:last-child': {
     borderBottom: 'none',
@@ -142,7 +142,7 @@ type Props = {
 };
 
 export default class Popover extends PureComponent<Props> {
-  _ref: Element | null | undefined;
+  _ref?: Element | null;
 
   componentDidMount() {
     window.document.addEventListener('click', this.handleClick);
@@ -158,7 +158,7 @@ export default class Popover extends PureComponent<Props> {
     }
   };
 
-  _setRef = (ref?: Element) => {
+  _setRef = (ref: Element | null) => {
     this._ref = ref;
   };
 
@@ -166,7 +166,7 @@ export default class Popover extends PureComponent<Props> {
     return (
       <>
         <Anchor src="./anchor.svg" key="anchor" />
-        <PopoverContainer innerRef={this._setRef} key="popup">
+        <PopoverContainer ref={this._setRef} key="popup">
           {this.props.sections.map(section => {
             if (section.items.length > 0) {
               return (

src/chrome/RatingButton.tsx

@@ -41,7 +41,7 @@ class PredefinedComment extends Component<{
   selected: boolean;
   onClick: (_: unknown) => unknown;
 }> {
-  static Container = styled('div')((props: {selected: boolean}) => {
+  static Container = styled.div<{selected: boolean}>(props => {
     return {
       border: '1px solid #f2f3f5',
       cursor: 'pointer',
@@ -82,7 +82,7 @@ const DismissRow = styled(Row)({
   marginTop: 10,
 });
 
-const DismissButton = styled('span')({
+const DismissButton = styled.span({
   '&:hover': {
     textDecoration: 'underline',
     cursor: 'pointer',

src/chrome/Sheet.tsx

@@ -19,7 +19,7 @@ import {State as Store} from '../reducers';
 
 import {ActiveSheet} from '../reducers/application';
 
-const DialogContainer = styled('div')(({state}: {state: TransitionStatus}) => ({
+const DialogContainer = styled.div<{state: TransitionStatus}>(({state}) => ({
   transform: `translate(-50%, ${
     state === 'entering' || state === 'exiting' || state === 'exited'
       ? 'calc(-100% - 20px)'

src/chrome/TitleBar.tsx

@@ -43,7 +43,7 @@ import {clipboard} from 'electron';
 import React from 'react';
 import {State} from 'src/reducers';
 
-const AppTitleBar = styled(FlexRow)(({focused}: {focused?: boolean}) => ({
+const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({
   background: focused
     ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)`
     : colors.macOSTitleBarBackgroundBlur,

src/chrome/UserAccount.tsx

@@ -28,7 +28,7 @@ const Container = styled(FlexRow)({
   color: colors.blackAlpha80,
 });
 
-const ProfilePic = styled('img')({
+const ProfilePic = styled.img({
   borderRadius: '999em',
   flexShrink: 0,
   width: 24,
@@ -58,7 +58,7 @@ type Props = OwnProps & DispatchFromProps & StateFromProps;
 class UserAccount extends PureComponent<Props> {
   _ref: Element | null | undefined;
 
-  setRef = (ref: React.ReactInstance) => {
+  setRef = (ref: HTMLDivElement | null) => {
     const element = findDOMNode(ref);
     if (element instanceof HTMLElement) {
       this._ref = element;
@@ -90,7 +90,7 @@ class UserAccount extends PureComponent<Props> {
     const {user} = this.props;
     const name = user ? user.name : null;
     return name ? (
-      <Container innerRef={this.setRef} onClick={this.showDetails}>
+      <Container ref={this.setRef} onClick={this.showDetails}>
         <ProfilePic
           src={user.profile_picture ? user.profile_picture.uri : undefined}
         />

src/chrome/WelcomeScreen.tsx

@@ -29,7 +29,7 @@ const Container = styled(FlexColumn)({
   backgroundColor: colors.light02,
 });
 
-const Welcome = styled(FlexColumn)(({isMounted}: {isMounted?: boolean}) => ({
+const Welcome = styled(FlexColumn)<{isMounted?: boolean}>(({isMounted}) => ({
   width: 460,
   background: colors.white,
   borderRadius: 10,
@@ -85,7 +85,7 @@ const Icon = styled(Glyph)({
   marginLeft: 6,
 });
 
-const Logo = styled('img')({
+const Logo = styled.img({
   width: 128,
   height: 128,
   alignSelf: 'center',

src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap

@@ -17,7 +17,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       size={30}
     />
     <span
-      className="css-91luyc"
+      className="css-1r5zvq8"
       color="#6f6f6f"
     >
       Update
@@ -30,7 +30,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       className="css-12zzrdt"
     />
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -38,7 +38,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -67,7 +67,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       size={30}
     />
     <span
-      className="css-91luyc"
+      className="css-1r5zvq8"
       color="#6f6f6f"
     >
       wubba lubba dub dub
@@ -80,7 +80,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       className="css-12zzrdt"
     />
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -88,7 +88,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}

src/chrome/settings/ToggledSection.tsx

@@ -14,7 +14,7 @@ const IndentedSection = styled(FlexColumn)({
   paddingLeft: 50,
   paddingBottom: 10,
 });
-const GreyedOutOverlay = styled('div')({
+const GreyedOutOverlay = styled.div({
   backgroundColor: '#EFEEEF',
   borderRadius: 4,
   opacity: 0.6,

src/chrome/settings/configFields.tsx

@@ -23,7 +23,7 @@ const InfoText = styled(Text)({
   paddingTop: 5,
 });
 
-const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
+const FileInputBox = styled(Input)<{isValid: boolean}>(({isValid}) => ({
   marginRight: 0,
   flexGrow: 1,
   fontFamily: 'monospace',
@@ -38,7 +38,7 @@ const CenteredGlyph = styled(Glyph)({
   marginLeft: 10,
 });
 
-const GreyedOutOverlay = styled('div')({
+const GreyedOutOverlay = styled.div({
   backgroundColor: '#EFEEEF',
   borderRadius: 4,
   opacity: 0.6,

src/index.tsx

@@ -7,7 +7,8 @@
  * @format
  */
 
-export {default as styled, keyframes} from 'react-emotion';
+export {default as styled} from '@emotion/styled';
+export {keyframes} from 'emotion';
 export * from './ui/index';
 export {getStringFromErrorLike, textContent} from './utils/index';
 export {serialize, deserialize} from './utils/serialization';

src/init.tsx

@@ -31,6 +31,8 @@ import React from 'react';
 import path from 'path';
 import {store} from './store';
 import {registerRecordingHooks} from './utils/pluginStateRecorder';
+import {cache} from 'emotion';
+import {CacheProvider} from '@emotion/core';
 
 const logger = initLogger(store);
 const bugReporter = new BugReporter(logger, store);
@@ -51,15 +53,17 @@ const AppFrame = () => {
     <TooltipProvider>
       <ContextMenuProvider>
         <Provider store={store}>
-          {warnEmployee ? (
+          <CacheProvider value={cache}>
-            <WarningEmployee
+            {warnEmployee ? (
-              onClick={() => {
+              <WarningEmployee
-                setWarnEmployee(false);
+                onClick={() => {
-              }}
+                  setWarnEmployee(false);
-            />
+                }}
-          ) : (
+              />
-            <App logger={logger} bugReporter={bugReporter} />
+            ) : (
-          )}
+              <App logger={logger} bugReporter={bugReporter} />
+            )}
+          </CacheProvider>
         </Provider>
       </ContextMenuProvider>
     </TooltipProvider>

src/plugins/TableNativePlugin.tsx

@@ -10,7 +10,7 @@
 import ManagedDataInspector from '../ui/components/data-inspector/ManagedDataInspector';
 import Panel from '../ui/components/Panel';
 import {colors} from '../ui/components/colors';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Text from '../ui/components/Text';
 import Toolbar from '../ui/components/Toolbar';
 import Spacer from '../ui/components/Toolbar';
@@ -98,7 +98,7 @@ const NonWrappingText = styled(Text)({
   userSelect: 'none',
 });
 
-const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
+const BooleanValue = styled(NonWrappingText)<{active?: boolean}>(props => ({
   '&::before': {
     content: '""',
     display: 'inline-block',
@@ -111,7 +111,7 @@ const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
   },
 }));
 
-const Label = styled('span')({
+const Label = styled.span({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',

src/plugins/cpu/index.tsx

@@ -95,7 +95,7 @@ const Columns = {
   },
 };
 
-const Heading = styled('div')({
+const Heading = styled.div({
   fontWeight: 'bold',
   fontSize: 13,
   display: 'block',

src/plugins/crash_reporter/index.js

@@ -79,7 +79,7 @@ type State = {
   crash: ?Crash,
 };
 
-const Padder = styled('div')(
+const Padder = styled.div(
   ({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
     paddingLeft: paddingLeft || 0,
     paddingRight: paddingRight || 0,

src/plugins/databases/index.js

@@ -38,13 +38,13 @@ import dateFormat from 'dateformat';
 
 const PAGE_SIZE = 50;
 
-const BoldSpan = styled('span')({
+const BoldSpan = styled.span({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',
   textTransform: 'uppercase',
 });
-const ErrorBar = styled('div')({
+const ErrorBar = styled.div({
   backgroundColor: colors.cherry,
   color: colors.white,
   lineHeight: '26px',

src/plugins/fresco/ImagesCacheOverview.tsx

@@ -288,7 +288,7 @@ class ImageGrid extends PureComponent<{
   size: number;
   events: Array<ImageEventWithId>;
 }> {
-  static Content = styled('div')({
+  static Content = styled.div({
     paddingLeft: 15,
   });
 
@@ -348,12 +348,12 @@ class ImageGridHeader extends PureComponent<{
     zIndex: 3,
   });
 
-  static Heading = styled('span')({
+  static Heading = styled.span({
     fontSize: 22,
     fontWeight: 600,
   });
 
-  static Subtitle = styled('span')({
+  static Subtitle = styled.span({
     fontSize: 22,
     fontWeight: 300,
     marginLeft: 15,
@@ -392,7 +392,7 @@ class ImageItem extends PureComponent<{
   size: number;
   numberOfRequests: number;
 }> {
-  static Container = styled(FlexBox)((props: {size: number}) => ({
+  static Container = styled(FlexBox)<{size: number}>(props => ({
     float: 'left',
     alignItems: 'center',
     justifyContent: 'center',
@@ -405,18 +405,18 @@ class ImageItem extends PureComponent<{
     backgroundColor: colors.light02,
   }));
 
-  static Image = styled('img')({
+  static Image = styled.img({
     borderRadius: 4,
     maxHeight: '100%',
     maxWidth: '100%',
     objectFit: 'contain',
   });
 
-  static Loading = styled('span')({
+  static Loading = styled.span({
     padding: '0 0',
   });
 
-  static SelectedHighlight = styled('div')((props: {selected: boolean}) => ({
+  static SelectedHighlight = styled.div<{selected: boolean}>(props => ({
     borderColor: colors.highlight,
     borderStyle: 'solid',
     borderWidth: props.selected ? 3 : 0,
@@ -429,8 +429,8 @@ class ImageItem extends PureComponent<{
     top: 0,
   }));
 
-  static HoverOverlay = styled(FlexColumn)(
+  static HoverOverlay = styled(FlexColumn)<{selected: boolean; size: number}>(
-    (props: {selected: boolean; size: number}) => ({
+    props => ({
       alignItems: 'center',
       backgroundColor: colors.whiteAlpha80,
       bottom: props.selected ? 4 : 0,
@@ -449,16 +449,16 @@ class ImageItem extends PureComponent<{
     }),
   );
 
-  static MemoryLabel = styled('span')({
+  static MemoryLabel = styled.span({
     fontWeight: 600,
     marginBottom: 6,
   });
 
-  static SizeLabel = styled('span')({
+  static SizeLabel = styled.span({
     fontWeight: 300,
   });
 
-  static Events = styled('div')({
+  static Events = styled.div({
     position: 'absolute',
     top: -5,
     right: -5,

src/plugins/fresco/ImagesSidebar.tsx

@@ -29,7 +29,7 @@ type ImagesSidebarProps = {
 
 type ImagesSidebarState = {};
 
-const DataDescriptionKey = styled('span')({
+const DataDescriptionKey = styled.span({
   color: colors.grapeDark1,
 });
 

src/plugins/fresco/MultipleSelect.tsx

@@ -15,7 +15,7 @@ const Container = styled(Block)({
   marginLeft: '10px',
 });
 
-const List = styled(FlexColumn)((props: {visibleList: boolean}) => ({
+const List = styled(FlexColumn)<{visibleList: boolean}>(props => ({
   display: props.visibleList ? 'flex' : 'none',
   position: 'absolute',
   top: '32px',
@@ -30,7 +30,7 @@ const List = styled(FlexColumn)((props: {visibleList: boolean}) => ({
   borderRadius: 4,
 }));
 
-const ListItem = styled('label')({
+const ListItem = styled.label({
   cursor: 'pointer',
   display: 'flex',
   alignItems: 'center',
@@ -43,7 +43,7 @@ const ListItem = styled('label')({
   },
 });
 
-const Checkbox = styled('input')({
+const Checkbox = styled.input({
   display: 'inline-block',
   marginRight: 5,
   verticalAlign: 'middle',

src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap

@@ -2,31 +2,31 @@
 
 exports[`notifications for leaks 1`] = `
 <React.Fragment>
-  <Styled(div)>
+  <ForwardRef(render)>
     CloseableReference leaked for
      
-    <Text
+    <ForwardRef(render)
       code={true}
     >
       com.facebook.imagepipeline.memory.NativeMemoryChunk
-    </Text>
+    </ForwardRef(render)>
     (identity hashcode: 
     deadbeef
     ).
-  </Styled(div)>
+  </ForwardRef(render)>
-  <Styled(div)>
+  <ForwardRef(render)>
-    <Text
+    <ForwardRef(render)
       bold={true}
     >
       Stacktrace:
-    </Text>
+    </ForwardRef(render)>
-  </Styled(div)>
+  </ForwardRef(render)>
-  <Styled(div)>
+  <ForwardRef(render)>
-    <Text
+    <ForwardRef(render)
       code={true}
     >
       &lt;unavailable&gt;
-    </Text>
+    </ForwardRef(render)>
-  </Styled(div)>
+  </ForwardRef(render)>
 </React.Fragment>
 `;

src/plugins/layout/ToolbarIcon.tsx

@@ -17,7 +17,7 @@ type Props = {
   onClick: () => void;
 };
 
-const ToolbarIcon = styled('div')({
+const ToolbarIcon = styled.div({
   marginRight: 9,
   marginTop: -3,
   marginLeft: 4,

src/plugins/logs/index.tsx

@@ -229,24 +229,22 @@ const HiddenScrollText = styled(Text)({
   },
 });
 
-const LogCount = styled('div')(
+const LogCount = styled.div<{backgroundColor: string}>(({backgroundColor}) => ({
-  ({backgroundColor}: {backgroundColor: string}) => ({
+  backgroundColor,
-    backgroundColor,
+  borderRadius: '999em',
-    borderRadius: '999em',
+  fontSize: 11,
-    fontSize: 11,
+  marginTop: 4,
-    marginTop: 4,
+  minWidth: 16,
-    minWidth: 16,
+  height: 16,
-    height: 16,
+  color: colors.white,
-    color: colors.white,
+  textAlign: 'center',
-    textAlign: 'center',
+  lineHeight: '16px',
-    lineHeight: '16px',
+  paddingLeft: 4,
-    paddingLeft: 4,
+  paddingRight: 4,
-    paddingRight: 4,
+  textOverflow: 'ellipsis',
-    textOverflow: 'ellipsis',
+  overflow: 'hidden',
-    overflow: 'hidden',
+  whiteSpace: 'nowrap',
-    whiteSpace: 'nowrap',
+}));
-  }),
-);
 
 function pad(chunk: any, len: number): string {
   let str = String(chunk);

src/plugins/navigation/components/AutoCompleteSheet.tsx

@@ -22,7 +22,7 @@ type Props = {
 
 const MAX_ITEMS = 5;
 
-const AutoCompleteSheetContainer = styled('div')({
+const AutoCompleteSheetContainer = styled.div({
   width: '100%',
   position: 'absolute',
   top: 'calc(100% - 3px)',
@@ -33,7 +33,7 @@ const AutoCompleteSheetContainer = styled('div')({
   boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
 });
 
-const SheetItem = styled('div')({
+const SheetItem = styled.div({
   padding: 5,
   textOverflow: 'ellipsis',
   overflowX: 'hidden',
@@ -46,7 +46,7 @@ const SheetItem = styled('div')({
   },
 });
 
-const SheetItemIcon = styled('span')({
+const SheetItemIcon = styled.span({
   padding: 8,
 });
 

src/plugins/navigation/components/BookmarksSidebar.tsx

@@ -32,7 +32,7 @@ const NoData = styled(FlexCenter)({
   color: colors.macOSTitleBarIcon,
 });
 
-const BookmarksList = styled('div')({
+const BookmarksList = styled.div({
   overflowY: 'scroll',
   overflowX: 'hidden',
   height: '100%',

src/plugins/navigation/components/FavoriteButton.tsx

@@ -17,7 +17,7 @@ type Props = {
   size: IconSize;
 };
 
-const FavoriteButtonContainer = styled('div')({
+const FavoriteButtonContainer = styled.div({
   position: 'relative',
   '>:first-child': {
     position: 'absolute',

src/plugins/navigation/components/IconButton.tsx

@@ -27,7 +27,7 @@ type Props = {
   size: IconSize;
 };
 
-const RippleEffect = styled('div')({
+const RippleEffect = styled.div({
   padding: 5,
   borderRadius: 100,
   backgroundPosition: 'center',
@@ -43,7 +43,7 @@ const RippleEffect = styled('div')({
   },
 });
 
-const IconButton = styled('div')({
+const IconButton = styled.div({
   ':active': {
     animation: `${shrinkAnimation} .25s ease forwards`,
   },

src/plugins/navigation/components/NavigationInfoBox.tsx

@@ -32,7 +32,7 @@ type Props = {
   date: Date | null;
 };
 
-const ScreenshotContainer = styled('div')({
+const ScreenshotContainer = styled.div({
   width: 200,
   minWidth: 200,
   overflow: 'hidden',
@@ -45,19 +45,19 @@ const ScreenshotContainer = styled('div')({
   },
 });
 
-const NoData = styled('div')({
+const NoData = styled.div({
   color: colors.light30,
   fontSize: 14,
   position: 'relative',
 });
 
-const NavigationDataContainer = styled('div')({
+const NavigationDataContainer = styled.div({
   alignItems: 'flex-start',
   flexGrow: 1,
   position: 'relative',
 });
 
-const Footer = styled('div')({
+const Footer = styled.div({
   width: '100%',
   padding: '10px',
   borderTop: `1px ${colors.blueGreyTint90} solid`,
@@ -65,16 +65,16 @@ const Footer = styled('div')({
   alignItems: 'center',
 });
 
-const Seperator = styled('div')({
+const Seperator = styled.div({
   flexGrow: 1,
 });
 
-const TimeContainer = styled('div')({
+const TimeContainer = styled.div({
   color: colors.light30,
   fontSize: 14,
 });
 
-const NavigationInfoBoxContainer = styled('div')({
+const NavigationInfoBoxContainer = styled.div({
   display: 'flex',
   height: BOX_HEIGHT,
   borderRadius: 10,
@@ -85,7 +85,7 @@ const NavigationInfoBoxContainer = styled('div')({
   boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
 });
 
-const Header = styled('div')({
+const Header = styled.div({
   fontSize: 18,
   fontWeight: 500,
   userSelect: 'text',
@@ -95,11 +95,11 @@ const Header = styled('div')({
   display: 'flex',
 });
 
-const ClassNameContainer = styled('div')({
+const ClassNameContainer = styled.div({
   color: colors.light30,
 });
 
-const ParametersContainer = styled('div')({
+const ParametersContainer = styled.div({
   height: 150,
   '&>*': {
     height: 150,
@@ -112,7 +112,7 @@ const NoParamters = styled(FlexCenter)({
   color: colors.light10,
 });
 
-const TimelineCircle = styled('div')({
+const TimelineCircle = styled.div({
   width: 18,
   height: 18,
   top: 11,
@@ -123,7 +123,7 @@ const TimelineCircle = styled('div')({
   position: 'absolute',
 });
 
-const TimelineMiniCircle = styled('div')({
+const TimelineMiniCircle = styled.div({
   width: 12,
   height: 12,
   top: 1,

src/plugins/navigation/components/RequiredParametersDialog.tsx

@@ -33,23 +33,23 @@ const Container = styled(FlexColumn)({
   width: 600,
 });
 
-const Title = styled('span')({
+const Title = styled.span({
   display: 'flex',
   marginTop: 8,
   marginLeft: 2,
   marginBottom: 8,
 });
 
-const Text = styled('span')({
+const Text = styled.span({
   lineHeight: 1.3,
 });
 
-const ErrorLabel = styled('span')({
+const ErrorLabel = styled.span({
   color: colors.yellow,
   lineHeight: 1.4,
 });
 
-const URIContainer = styled('div')({
+const URIContainer = styled.div({
   lineHeight: 1.3,
   marginLeft: 2,
   marginBottom: 8,
@@ -57,7 +57,7 @@ const URIContainer = styled('div')({
   overflowWrap: 'break-word',
 });
 
-const ButtonContainer = styled('div')({
+const ButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 
@@ -68,7 +68,7 @@ const RequiredParameterInput = styled(Input)({
   width: '100%',
 });
 
-const WarningIconContainer = styled('span')({
+const WarningIconContainer = styled.span({
   marginRight: 8,
 });
 

src/plugins/navigation/components/SaveBookmarkDialog.tsx

@@ -25,20 +25,20 @@ const Container = styled(FlexColumn)({
   width: 400,
 });
 
-const Title = styled('div')({
+const Title = styled.div({
   fontWeight: 500,
   marginTop: 8,
   marginLeft: 2,
   marginBottom: 8,
 });
 
-const URIContainer = styled('div')({
+const URIContainer = styled.div({
   marginLeft: 2,
   marginBottom: 8,
   overflowWrap: 'break-word',
 });
 
-const ButtonContainer = styled('div')({
+const ButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 

src/plugins/navigation/components/SearchBar.tsx

@@ -28,7 +28,7 @@ type State = {
   prevURIFromAbove: URI;
 };
 
-const IconContainer = styled('div')({
+const IconContainer = styled.div({
   display: 'inline-flex',
   height: '16px',
   alignItems: 'center',
@@ -44,13 +44,13 @@ const IconContainer = styled('div')({
   },
 });
 
-const ToolbarContainer = styled('div')({
+const ToolbarContainer = styled.div({
   '.drop-shadow': {
     boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   },
 });
 
-const SearchInputContainer = styled('div')({
+const SearchInputContainer = styled.div({
   width: '100%',
   marginLeft: 5,
   marginRight: 9,

src/plugins/navigation/components/Timeline.tsx

@@ -19,7 +19,7 @@ type Props = {
   onFavorite: (uri: URI) => void;
 };
 
-const TimelineLine = styled('div')({
+const TimelineLine = styled.div({
   width: 2,
   backgroundColor: colors.highlight,
   position: 'absolute',
@@ -27,7 +27,7 @@ const TimelineLine = styled('div')({
   bottom: 0,
 });
 
-const TimelineContainer = styled('div')({
+const TimelineContainer = styled.div({
   position: 'relative',
   paddingLeft: 25,
   overflowY: 'scroll',
@@ -43,7 +43,7 @@ const TimelineContainer = styled('div')({
   },
 });
 
-const NavigationEventContainer = styled('div')({
+const NavigationEventContainer = styled.div({
   display: 'flex',
   paddingTop: 25,
   paddingLeft: 25,
@@ -63,7 +63,7 @@ export default (props: Props) => {
   return events.length === 0 ? (
     <NoData>No Navigation Events to Show</NoData>
   ) : (
-    <TimelineContainer innerRef={timelineRef}>
+    <TimelineContainer ref={timelineRef}>
       <div>
         <TimelineLine />
         {events.map((event: NavigationEvent, idx: number) => {

src/plugins/network/RequestDetails.tsx

@@ -295,7 +295,7 @@ class HeaderInspector extends Component<
   }
 }
 
-const BodyContainer = styled('div')({
+const BodyContainer = styled.div({
   paddingTop: 10,
   paddingBottom: 20,
 });
@@ -382,7 +382,7 @@ type ImageWithSizeState = {
 };
 
 class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
-  static Image = styled('img')({
+  static Image = styled.img({
     objectFit: 'scale-down',
     maxWidth: '100%',
     marginBottom: 10,
@@ -435,7 +435,7 @@ class ImageFormatter {
 }
 
 class VideoFormatter {
-  static Video = styled('video')({
+  static Video = styled.video({
     maxWidth: 500,
     maxHeight: 500,
   });

src/plugins/reactdevtools/index.tsx

@@ -14,7 +14,7 @@ import React from 'react';
 import getPort from 'get-port';
 import address from 'address';
 
-const Container = styled('div')({
+const Container = styled.div({
   display: 'flex',
   flex: '1 1 0%',
   justifyContent: 'center',

src/plugins/sandbox/index.tsx

@@ -45,7 +45,7 @@ export default class SandboxView extends FlipperPlugin<
     showFeedback: false,
   };
 
-  static TextInput = styled('input')({
+  static TextInput = styled.input({
     border: `1px solid ${colors.light10}`,
     fontSize: '1em',
     padding: '0 5px',
@@ -55,7 +55,7 @@ export default class SandboxView extends FlipperPlugin<
     flexGrow: 1,
   });
 
-  static FeedbackMessage = styled('span')({
+  static FeedbackMessage = styled.span({
     fontSize: '1.2em',
     paddingTop: '10px',
     color: 'green',

src/plugins/seamammals/index.tsx

@@ -105,7 +105,7 @@ class Card extends React.Component<
     selected: boolean;
   } & Row
 > {
-  static Container = styled(FlexColumn)((props: {selected?: boolean}) => ({
+  static Container = styled(FlexColumn)<{selected?: boolean}>(props => ({
     margin: 10,
     borderRadius: 5,
     border: '2px solid black',
@@ -120,7 +120,7 @@ class Card extends React.Component<
     cursor: 'pointer',
   }));
 
-  static Image = styled('div')({
+  static Image = styled.div({
     backgroundSize: 'cover',
     width: '100%',
     paddingTop: '100%',

src/plugins/sections/EventsTable.js

@@ -73,7 +73,7 @@ const Row = styled(FlexRow)(props => ({
   },
 }));
 
-const Label = styled('div')({
+const Label = styled.div({
   width: LABEL_WIDTH,
   paddingLeft: 10,
   paddingRight: 10,
@@ -88,7 +88,7 @@ const Label = styled('div')({
   zIndex: 2,
 });
 
-const Content = styled('div')({
+const Content = styled.div({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   fontSize: 11,
@@ -98,7 +98,7 @@ const Content = styled('div')({
   color: colors.light50,
 });
 
-const Record = styled('div')(({highlighted}) => ({
+const Record = styled.div(({highlighted}) => ({
   border: `1px solid ${colors.light15}`,
   boxShadow: highlighted
     ? `inset 0 0 0 2px ${colors.macOSTitleBarIconSelected}`
@@ -116,7 +116,7 @@ const Record = styled('div')(({highlighted}) => ({
   alignItems: 'center',
 }));
 
-const Empty = styled('div')({
+const Empty = styled.div({
   width: WIDTH,
   padding: '10px 5px',
   marginRight: PADDING,

src/plugins/sections/Tree.js

@@ -13,7 +13,7 @@ import {Glyph, PureComponent, styled, Toolbar, Spacer, colors} from 'flipper';
 import {Tree} from 'react-d3-tree';
 import {Fragment} from 'react';
 
-const Legend = styled('div')(props => ({
+const Legend = styled.div(props => ({
   color: colors.dark50,
   marginLeft: 20,
   '&::before': {
@@ -29,7 +29,7 @@ const Legend = styled('div')(props => ({
   },
 }));
 
-const Label = styled('div')({
+const Label = styled.div({
   position: 'relative',
   top: -7,
   left: 7,
@@ -43,7 +43,7 @@ const Label = styled('div')({
   display: 'inline-block',
 });
 
-const Container = styled('div')({
+const Container = styled.div({
   width: '100%',
   height: '100%',
   overflow: 'hidden',
@@ -53,11 +53,11 @@ const Container = styled('div')({
     '10px 10px,10px 10px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px',
 });
 
-const LabelContainer = styled('div')({
+const LabelContainer = styled.div({
   display: 'flex',
 });
 
-const IconButton = styled('div')({
+const IconButton = styled.div({
   position: 'relative',
   left: 5,
   top: -8,

src/plugins/sections/index.js

@@ -45,14 +45,14 @@ const Waiting = styled(FlexBox)(props => ({
   textAlign: 'center',
 }));
 
-const InfoText = styled('div')(props => ({
+const InfoText = styled.div(props => ({
   marginTop: 10,
   marginBottom: 10,
   fontWeight: '500',
   color: colors.light30,
 }));
 
-const InfoBox = styled('div')(props => ({
+const InfoBox = styled.div(props => ({
   maxWidth: 400,
   margin: 'auto',
   textAlign: 'center',

src/ui/components/Block.tsx

@@ -7,12 +7,12 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A Block styled div
  */
-const Block = styled('div')({
+const Block = styled.div({
   display: 'block',
 });
 Block.displayName = 'Block';

src/ui/components/Bordered.tsx

@@ -7,13 +7,13 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 /**
  * Puts a gray border around something
  */
-const Bordered = styled('div')({
+const Bordered = styled.div({
   borderRadius: 4,
   overflow: 'hidden',
   border: `1px solid ${colors.macOSTitleBarButtonBorder}`,

src/ui/components/Box.tsx

@@ -8,7 +8,7 @@
  */
 
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const Box = styled(FlexBox)({
   height: '100%',

src/ui/components/Button.tsx

@@ -10,11 +10,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import electron, {MenuItemConstructorOptions} from 'electron';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import {connect} from 'react-redux';
 import {findDOMNode} from 'react-dom';
-import {keyframes} from 'react-emotion';
+import {keyframes} from 'emotion';
 import {State as Store} from '../../reducers/index';
 import Glyph, {IconSize} from './Glyph';
 
@@ -106,88 +106,85 @@ const pulse = keyframes({
   },
 });
 
-const StyledButton = styled('div')(
+const StyledButton = styled.div<{
-  (props: {
+  windowIsFocused?: boolean;
-    windowIsFocused?: boolean;
+  compact?: boolean;
-    compact?: boolean;
+  inButtonGroup?: boolean;
-    inButtonGroup?: boolean;
+  padded?: boolean;
-    padded?: boolean;
+  pulse?: boolean;
-    pulse?: boolean;
+  disabled?: boolean;
-    disabled?: boolean;
+  dropdown?: Array<MenuItemConstructorOptions>;
-    dropdown?: Array<MenuItemConstructorOptions>;
+}>(props => ({
-  }) => ({
+  backgroundColor:
-    backgroundColor:
+    props.windowIsFocused && !props.disabled
-      props.windowIsFocused && !props.disabled
+      ? colors.white
-        ? colors.white
+      : colors.macOSTitleBarButtonBackgroundBlur,
-        : colors.macOSTitleBarButtonBackgroundBlur,
+  backgroundImage: backgroundImage(props),
-    backgroundImage: backgroundImage(props),
+  borderStyle: 'solid',
-    borderStyle: 'solid',
+  borderWidth: 1,
-    borderWidth: 1,
+  borderColor: borderColor(props),
+  borderBottomColor: borderBottomColor(props),
+  color: color(props),
+  borderRadius: 4,
+  position: 'relative',
+  padding: props.padded ? '0 15px' : '0 6px',
+  height: props.compact === true ? 24 : 28,
+  margin: 0,
+  minWidth: 34,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+
+  boxShadow:
+    props.pulse && props.windowIsFocused
+      ? `0 0 0 ${colors.macOSTitleBarIconSelected}`
+      : '',
+  animation: props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
+
+  '&:not(:first-child)': {
+    marginLeft: props.inButtonGroup === true ? 0 : 10,
+    borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
+    borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
+  },
+
+  '&:not(:last-child)': {
+    borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
+    borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
+    borderRight: props.inButtonGroup === true ? 0 : '',
+  },
+
+  '&:first-of-type': {
+    marginLeft: 0,
+  },
+
+  '&:active': props.disabled
+    ? null
+    : {
+        borderColor: colors.macOSTitleBarButtonBorder,
+        borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
+        background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`,
+      },
+
+  '&:disabled': {
     borderColor: borderColor(props),
     borderBottomColor: borderBottomColor(props),
-    color: color(props),
+    pointerEvents: 'none',
-    borderRadius: 4,
+  },
-    position: 'relative',
-    padding: props.padded ? '0 15px' : '0 6px',
-    height: props.compact === true ? 24 : 28,
-    margin: 0,
-    minWidth: 34,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
 
-    boxShadow:
+  '&:hover::before': {
-      props.pulse && props.windowIsFocused
+    content: props.dropdown ? "''" : 'normal',
-        ? `0 0 0 ${colors.macOSTitleBarIconSelected}`
+    position: 'absolute',
-        : '',
+    bottom: 1,
-    animation:
+    right: 2,
-      props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
+    borderStyle: 'solid',
-
+    borderWidth: '4px 3px 0 3px',
-    '&:not(:first-child)': {
+    borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`,
-      marginLeft: props.inButtonGroup === true ? 0 : 10,
+  },
-      borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
+}));
-      borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
-    },
-
-    '&:not(:last-child)': {
-      borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
-      borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
-      borderRight: props.inButtonGroup === true ? 0 : '',
-    },
-
-    '&:first-of-type': {
-      marginLeft: 0,
-    },
-
-    '&:active': props.disabled
-      ? null
-      : {
-          borderColor: colors.macOSTitleBarButtonBorder,
-          borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
-          background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`,
-        },
-
-    '&:disabled': {
-      borderColor: borderColor(props),
-      borderBottomColor: borderBottomColor(props),
-      pointerEvents: 'none',
-    },
-
-    '&:hover::before': {
-      content: props.dropdown ? "''" : 'normal',
-      position: 'absolute',
-      bottom: 1,
-      right: 2,
-      borderStyle: 'solid',
-      borderWidth: '4px 3px 0 3px',
-      borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`,
-    },
-  }),
-);
 StyledButton.displayName = 'Button:StyledButton';
 
-const Icon = styled(Glyph)(({hasText}: {hasText: boolean}) => ({
+const Icon = styled(Glyph)<{hasText: boolean}>(({hasText}) => ({
   marginRight: hasText ? 3 : 0,
 }));
 Icon.displayName = 'Button:Icon';

src/ui/components/ButtonGroup.tsx

@@ -7,11 +7,11 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
-const ButtonGroupContainer = styled('div')({
+const ButtonGroupContainer = styled.div({
   display: 'inline-flex',
   marginLeft: 10,
   '&:first-child': {

src/ui/components/ButtonGroupChain.tsx

@@ -9,10 +9,10 @@
 
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Glyph from './Glyph';
 
-const IconContainer = styled('div')({
+const IconContainer = styled.div({
   width: 0,
   zIndex: 1,
   display: 'inline-flex',
@@ -21,25 +21,23 @@ const IconContainer = styled('div')({
 });
 IconContainer.displayName = 'ButtonGroupChain:IconContainer';
 
-const ButtonGroupChainContainer = styled('div')(
+const ButtonGroupChainContainer = styled.div<{iconSize: number}>(props => ({
-  (props: {iconSize: number}) => ({
+  display: 'inline-flex',
-    display: 'inline-flex',
+  marginLeft: 10,
-    marginLeft: 10,
+  '&:first-child>*:not(:first-child):nth-child(odd)': {
-    '&:first-child>*:not(:first-child):nth-child(odd)': {
+    paddingLeft: props.iconSize + 6,
-      paddingLeft: props.iconSize + 6,
+  },
-    },
+  '&:first-child>*': {
-    '&:first-child>*': {
+    borderRightStyle: 'none',
-      borderRightStyle: 'none',
+    borderLeftStyle: 'none',
-      borderLeftStyle: 'none',
+  },
-    },
+  '&:first-child>:first-child': {
-    '&:first-child>:first-child': {
+    borderLeftStyle: 'solid',
-      borderLeftStyle: 'solid',
+  },
-    },
+  '&:first-child>:last-child': {
-    '&:first-child>:last-child': {
+    borderRightStyle: 'solid',
-      borderRightStyle: 'solid',
+  },
-    },
+}));
-  }),
-);
 IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer';
 
 type Props = {

src/ui/components/CenteredView.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import FlexColumn from './FlexColumn';
 
@@ -19,7 +19,7 @@ const Container = styled(FlexColumn)({
 });
 Container.displayName = 'CenteredView:Container';
 
-const ContentWrapper = styled('div')({
+const ContentWrapper = styled.div({
   width: 500,
   marginLeft: 'auto',
   marginRight: 'auto',

src/ui/components/Checkbox.tsx

@@ -8,7 +8,7 @@
  */
 
 import {PureComponent} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 type CheckboxProps = {
@@ -18,7 +18,7 @@ type CheckboxProps = {
   onChange: (checked: boolean) => void;
 };
 
-const CheckboxContainer = styled('input')({
+const CheckboxContainer = styled.input({
   display: 'inline-block',
   marginRight: 5,
   verticalAlign: 'middle',

src/ui/components/CodeBlock.tsx

@@ -7,9 +7,9 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const CodeBlock = styled('div')({
+const CodeBlock = styled.div({
   fontFamily: 'monospace',
 });
 CodeBlock.displayName = 'CodeBlock';

src/ui/components/ContextMenuProvider.tsx

@@ -8,14 +8,14 @@
  */
 
 import {Component} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import electron, {MenuItemConstructorOptions} from 'electron';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 type MenuTemplate = Array<MenuItemConstructorOptions>;
 
-const Container = styled('div')({
+const Container = styled.div({
   display: 'contents',
 });
 Container.displayName = 'ContextMenuProvider:Container';

src/ui/components/ErrorBlock.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 import CodeBlock from './CodeBlock';
 

src/ui/components/ErrorBoundary.tsx

@@ -12,7 +12,7 @@ import {Component} from 'react';
 import Heading from './Heading';
 import Button from './Button';
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 const ErrorBoundaryContainer = styled(View)({

src/ui/components/FlexBox.tsx

@@ -8,7 +8,7 @@
  */
 
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 type Props = {
   /** Flexbox's shrink property. Set to `0`, to disable shrinking. */
@@ -18,7 +18,7 @@ type Props = {
 /**
  * A container using flexbox to layout its children
  */
-const FlexBox = styled(View)(({shrink}: Props) => ({
+const FlexBox = styled(View)<Props>(({shrink}) => ({
   display: 'flex',
   flexShrink: shrink == null || shrink ? 1 : 0,
 }));

src/ui/components/FlexCenter.tsx

@@ -8,7 +8,7 @@
  */
 
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A container displaying its children horizontally and vertically centered.

src/ui/components/FlexColumn.tsx

@@ -8,7 +8,7 @@
  */
 
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A container displaying its children in a column

src/ui/components/FlexRow.tsx

@@ -8,7 +8,7 @@
  */
 
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A container displaying its children in a row

src/ui/components/FocusableBox.tsx

@@ -10,7 +10,7 @@
 import {Component} from 'react';
 import Box from './Box';
 import {colors} from './colors';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 const FocusableBoxBorder = styled(Box)({

src/ui/components/Glyph.tsx

@@ -8,13 +8,13 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import {getIconURL} from '../../utils/icons.js';
 
 export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32;
 
-const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
+const ColoredIconBlack = styled.img<{size: number}>(({size}) => ({
   height: size,
   verticalAlign: 'middle',
   width: size,
@@ -22,20 +22,22 @@ const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
 }));
 ColoredIconBlack.displayName = 'Glyph:ColoredIconBlack';
 
-const ColoredIconCustom = styled('div')(
+const ColoredIconCustom = styled.div<{
-  (props: {size: number; color?: string; src: string}) => ({
+  size: number;
-    height: props.size,
+  color?: string;
-    verticalAlign: 'middle',
+  src: string;
-    width: props.size,
+}>(props => ({
-    backgroundColor: props.color,
+  height: props.size,
-    display: 'inline-block',
+  verticalAlign: 'middle',
-    maskImage: `url('${props.src}')`,
+  width: props.size,
-    maskSize: '100% 100%',
+  backgroundColor: props.color,
-    WebkitMaskImage: `url('${props.src}')`,
+  display: 'inline-block',
-    WebkitMaskSize: '100% 100%',
+  maskImage: `url('${props.src}')`,
-    flexShrink: 0,
+  maskSize: '100% 100%',
-  }),
+  WebkitMaskImage: `url('${props.src}')`,
-);
+  WebkitMaskSize: '100% 100%',
+  flexShrink: 0,
+}));
 ColoredIconCustom.displayName = 'Glyph:ColoredIconCustom';
 
 function ColoredIcon(

src/ui/components/HBox.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexRow from './FlexRow';
 
 /**
@@ -16,8 +16,8 @@ import FlexRow from './FlexRow';
  * It takes two children, 'left' and 'right'. One is assumed to have a fixed (or minimum) size,
  * and the other will grow automatically
  */
-const HBoxContainer = styled(FlexRow)(
+const HBoxContainer = styled(FlexRow)<{verticalAlign: string}>(
-  ({verticalAlign}: {verticalAlign: string}) => ({
+  ({verticalAlign}) => ({
     shrink: 0,
     alignItems: verticalAlign,
   }),

src/ui/components/Heading.tsx

@@ -7,10 +7,10 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
-const LargeHeading = styled('div')({
+const LargeHeading = styled.div({
   fontSize: 18,
   fontWeight: 'bold',
   lineHeight: '20px',
@@ -19,7 +19,7 @@ const LargeHeading = styled('div')({
 });
 LargeHeading.displayName = 'Heading:LargeHeading';
 
-const SmallHeading = styled('div')({
+const SmallHeading = styled.div({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',

src/ui/components/HorizontalRule.tsx

@@ -7,9 +7,9 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const HorizontalRule = styled('div')({
+const HorizontalRule = styled.div({
   backgroundColor: '#c9ced4',
   height: 1,
   margin: '5px 0',

src/ui/components/Info.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 import {colors} from './colors';
@@ -43,8 +43,8 @@ const bgColor = {
   spinning: 'transparent',
 };
 
-const InfoWrapper = styled(FlexColumn)(
+const InfoWrapper = styled(FlexColumn)<Pick<InfoProps, 'type' | 'small'>>(
-  ({type, small}: Pick<InfoProps, 'type' | 'small'>) => ({
+  ({type, small}) => ({
     padding: small ? '0 4px' : 10,
     borderRadius: 4,
     color: color[type],

src/ui/components/Input.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 export const inputStyle = (props: {
@@ -30,24 +30,18 @@ export const inputStyle = (props: {
   },
 });
 
-const Input = styled('input')(
+const Input = styled.input<{
-  ({
+  compact?: boolean;
-    compact,
+  valid?: boolean;
-    valid,
+  readOnly?: boolean;
-    readOnly,
+}>(({compact, valid, readOnly}) => ({
-  }: {
+  ...inputStyle({
-    compact?: boolean;
+    compact: compact || false,
-    valid?: boolean;
+    valid: valid !== false,
-    readOnly?: boolean;
+    readOnly: readOnly === true,
-  }) => ({
-    ...inputStyle({
-      compact: compact || false,
-      valid: valid !== false,
-      readOnly: readOnly === true,
-    }),
-    padding: compact ? '0 5px' : '0 10px',
   }),
-);
+  padding: compact ? '0 5px' : '0 10px',
+}));
 
 Input.displayName = 'Input';
 

src/ui/components/Interactive.tsx

@@ -15,7 +15,7 @@ import {
   maybeSnapTop,
   SNAP_SIZE,
 } from '../../utils/snap';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import invariant from 'invariant';
 import React from 'react';
 
@@ -72,7 +72,7 @@ type InteractiveProps = {
   onResize?: (width: number, height: number) => void;
   resizing?: boolean;
   resizable?: boolean | ResizingSides;
-  innerRef?: (elem: HTMLElement) => void;
+  innerRef?: (elem: HTMLElement | null) => void;
   style?: Object;
   className?: string;
   children?: React.ReactNode;
@@ -90,7 +90,7 @@ type InteractiveState = {
   resizingInitialCursor: CursorState | null | undefined;
 };
 
-const InteractiveContainer = styled('div')({
+const InteractiveContainer = styled.div({
   willChange: 'transform, height, width, z-index',
 });
 InteractiveContainer.displayName = 'Interactive:InteractiveContainer';
@@ -118,11 +118,11 @@ export default class Interactive extends React.Component<
   }
 
   globalMouse: boolean;
-  ref: HTMLElement | undefined;
+  ref?: HTMLElement | null;
 
-  nextTop: number | null | undefined;
+  nextTop?: number | null;
-  nextLeft: number | null | undefined;
+  nextLeft?: number | null;
-  nextEvent: MouseEvent | null | undefined;
+  nextEvent?: MouseEvent | null;
 
   static defaultProps = {
     minHeight: 0,
@@ -656,7 +656,7 @@ export default class Interactive extends React.Component<
     });
   }
 
-  setRef = (ref: HTMLElement) => {
+  setRef = (ref: HTMLElement | null) => {
     this.ref = ref;
 
     const {innerRef} = this.props;
@@ -706,7 +706,7 @@ export default class Interactive extends React.Component<
       <InteractiveContainer
         className={this.props.className}
         hidden={this.props.hidden}
-        innerRef={this.setRef}
+        ref={this.setRef}
         onMouseDown={this.startAction}
         onMouseMove={this.onLocalMouseMove}
         onMouseLeave={this.onMouseLeave} // eslint-disable-next-line

src/ui/components/Label.tsx

@@ -7,9 +7,9 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Label = styled('div')({
+const Label = styled.div({
   fontSize: 12,
   fontWeight: 'bold',
 });

src/ui/components/Link.tsx

@@ -7,13 +7,13 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import {Component} from 'react';
 import {shell} from 'electron';
 import React from 'react';
 
-const StyledLink = styled('span')({
+const StyledLink = styled.span({
   color: colors.highlight,
   '&:hover': {
     cursor: 'pointer',

src/ui/components/LoadingIndicator.tsx

@@ -7,8 +7,8 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
-import {keyframes} from 'react-emotion';
+import {keyframes} from 'emotion';
 
 const animation = keyframes({
   '0%': {
@@ -19,7 +19,7 @@ const animation = keyframes({
   },
 });
 
-const LoadingIndicator = styled('div')((props: {size: number}) => ({
+const LoadingIndicator = styled.div<{size: number}>(props => ({
   animation: `${animation} 1s infinite linear`,
   width: props.size,
   height: props.size,

src/ui/components/Markdown.tsx

@@ -8,19 +8,19 @@
  */
 
 import React, {PureComponent} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import ReactMarkdown from 'react-markdown';
 import {colors} from './colors';
 import {shell} from 'electron';
 
-const Container = styled('div')({
+const Container = styled.div({
   padding: 10,
 });
-const Row = styled('div')({
+const Row = styled.div({
   marginTop: 5,
   marginBottom: 5,
 });
-const Heading = styled('div')((props: {level: number}) => ({
+const Heading = styled.div<{level: number}>(props => ({
   fontSize: props.level === 1 ? 18 : 12,
   textTransform: props.level > 1 ? 'uppercase' : undefined,
   color: props.level > 1 ? '#90949c' : undefined,
@@ -28,16 +28,16 @@ const Heading = styled('div')((props: {level: number}) => ({
   marginBottom: 10,
   fontWeight: props.level > 1 ? 'bold' : 'normal',
 }));
-const ListItem = styled('li')({
+const ListItem = styled.li({
   'list-style-type': 'circle',
   'list-style-position': 'inside',
   marginLeft: 10,
 });
-const Strong = styled('span')({
+const Strong = styled.span({
   fontWeight: 'bold',
   color: '#1d2129',
 });
-const Emphasis = styled('span')({
+const Emphasis = styled.span({
   fontStyle: 'italic',
 });
 const Quote = styled(Row)({
@@ -45,7 +45,7 @@ const Quote = styled(Row)({
   backgroundColor: '#f1f2f3',
   fontSize: 13,
 });
-const Code = styled('span')({
+const Code = styled.span({
   fontFamily: '"Courier New", Courier, monospace',
   backgroundColor: '#f1f2f3',
 });
@@ -62,7 +62,7 @@ class CodeBlock extends PureComponent<{value: string; language: string}> {
     );
   }
 }
-const Link = styled('span')({
+const Link = styled.span({
   color: colors.blue,
 });
 class LinkReference extends PureComponent<{href: string}> {

src/ui/components/MarkerTimeline.tsx

@@ -8,7 +8,7 @@
  */
 
 import {Component} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Text from './Text';
 import FlexRow from './FlexRow';
 import {colors} from './colors';
@@ -29,7 +29,11 @@ type Props = {
   maxGap: number;
 };
 
-const Markers = styled('div')((props: {totalTime: number}) => ({
+type MouseEventHandler = (
+  event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+) => void;
+
+const Markers = styled.div<{totalTime: number}>(props => ({
   position: 'relative',
   margin: 10,
   height: props.totalTime,
@@ -45,69 +49,67 @@ const Markers = styled('div')((props: {totalTime: number}) => ({
 }));
 Markers.displayName = 'MarkerTimeline:Markers';
 
-const Point = styled(FlexRow)(
+const Point = styled(FlexRow)<{
-  (props: {
+  positionY: number;
-    positionY: number;
+  onClick: MouseEventHandler | undefined;
-    onClick: Function | undefined;
+  number: number | undefined;
-    number: number | undefined;
+  threadColor: string;
-    threadColor: string;
+  selected: boolean;
-    selected: boolean;
+  cut: boolean;
-    cut: boolean;
+}>(props => ({
-  }) => ({
+  position: 'absolute',
+  top: props.positionY,
+  left: 0,
+  right: 10,
+  cursor: props.onClick ? 'pointer' : 'default',
+  borderRadius: 3,
+  alignItems: 'flex-start',
+  lineHeight: '16px',
+  ':hover': {
+    background: `linear-gradient(to top, rgba(255,255,255,0) 0, #ffffff 10px)`,
+    paddingBottom: 5,
+    zIndex: 2,
+    '> span': {
+      whiteSpace: 'initial',
+    },
+  },
+  '::before': {
+    position: 'relative',
+    textAlign: 'center',
+    fontSize: 8,
+    fontWeight: 500,
+    content: props.number ? `'${props.number}'` : '""',
+    display: 'inline-block',
+    width: 9,
+    height: 9,
+    flexShrink: 0,
+    color: 'rgba(0,0,0,0.4)',
+    lineHeight: '9px',
+    borderRadius: '999em',
+    border: '1px solid rgba(0,0,0,0.2)',
+    backgroundColor: props.threadColor,
+    marginRight: 6,
+    zIndex: 3,
+    boxShadow: props.selected
+      ? `0 0 0 2px ${colors.macOSTitleBarIconSelected}`
+      : undefined,
+  },
+  '::after': {
+    content: props.cut ? '""' : undefined,
     position: 'absolute',
-    top: props.positionY,
+    width: 11,
+    top: -20,
     left: 0,
-    right: 10,
+    height: 2,
-    cursor: props.onClick ? 'pointer' : 'default',
+    background: colors.white,
-    borderRadius: 3,
+    borderTop: `1px solid ${colors.light30}`,
-    alignItems: 'flex-start',
+    borderBottom: `1px solid ${colors.light30}`,
-    lineHeight: '16px',
+    transform: `skewY(-10deg)`,
-    ':hover': {
+  },
-      background: `linear-gradient(to top, rgba(255,255,255,0) 0, #ffffff 10px)`,
+}));
-      paddingBottom: 5,
-      zIndex: 2,
-      '> span': {
-        whiteSpace: 'initial',
-      },
-    },
-    '::before': {
-      position: 'relative',
-      textAlign: 'center',
-      fontSize: 8,
-      fontWeight: 500,
-      content: props.number ? `'${props.number}'` : '""',
-      display: 'inline-block',
-      width: 9,
-      height: 9,
-      flexShrink: 0,
-      color: 'rgba(0,0,0,0.4)',
-      lineHeight: '9px',
-      borderRadius: '999em',
-      border: '1px solid rgba(0,0,0,0.2)',
-      backgroundColor: props.threadColor,
-      marginRight: 6,
-      zIndex: 3,
-      boxShadow: props.selected
-        ? `0 0 0 2px ${colors.macOSTitleBarIconSelected}`
-        : undefined,
-    },
-    '::after': {
-      content: props.cut ? '""' : undefined,
-      position: 'absolute',
-      width: 11,
-      top: -20,
-      left: 0,
-      height: 2,
-      background: colors.white,
-      borderTop: `1px solid ${colors.light30}`,
-      borderBottom: `1px solid ${colors.light30}`,
-      transform: `skewY(-10deg)`,
-    },
-  }),
-);
 Point.displayName = 'MakerTimeline:Point';
 
-const Time = styled('span')({
+const Time = styled.span({
   color: colors.light30,
   fontWeight: 300,
   marginRight: 4,

src/ui/components/ModalOverlay.tsx

@@ -7,11 +7,11 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {Component} from 'react';
 import React from 'react';
 
-const Overlay = styled('div')({
+const Overlay = styled.div({
   alignItems: 'center',
   backgroundColor: 'rgba(0, 0, 0, 0.6)',
   bottom: 0,
@@ -29,9 +29,9 @@ export default class ModalOverlay extends Component<{
   onClose: () => void;
   children?: React.ReactNode;
 }> {
-  ref: HTMLElement | null | undefined;
+  ref?: HTMLElement | null;
 
-  setRef = (ref: HTMLElement) => {
+  setRef = (ref: HTMLElement | null) => {
     this.ref = ref;
   };
 
@@ -45,7 +45,7 @@ export default class ModalOverlay extends Component<{
     const {props} = this;
 
     return (
-      <Overlay innerRef={this.setRef} onClick={this.onClick}>
+      <Overlay ref={this.setRef} onClick={this.onClick}>
         {props.children}
       </Overlay>
     );

src/ui/components/MultiLineInput.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 export const multilineStyle = (props: {valid: boolean}) => ({
@@ -26,7 +26,7 @@ export const multilineStyle = (props: {valid: boolean}) => ({
   },
 });
 
-const MultiLineInput = styled('textarea')((props: {valid?: boolean}) => ({
+const MultiLineInput = styled.textarea<{valid?: boolean}>(props => ({
   ...multilineStyle({valid: props.valid === undefined || props.valid}),
   padding: '0 10px',
 }));

src/ui/components/Orderable.tsx

@@ -8,7 +8,7 @@
  */
 
 import {Rect} from '../../utils/geometry';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {Component} from 'react';
 import React from 'react';
 
@@ -38,26 +38,26 @@ type TabSizes = {
   [key: string]: Rect;
 };
 
-const OrderableContainer = styled('div')({
+const OrderableContainer = styled.div({
   position: 'relative',
 });
 OrderableContainer.displayName = 'Orderable:OrderableContainer';
 
-const OrderableItemContainer = styled('div')(
+const OrderableItemContainer = styled.div<{
-  (props: {orientation: 'vertical' | 'horizontal'}) => ({
+  orientation: 'vertical' | 'horizontal';
-    display: props.orientation === 'vertical' ? 'block' : 'inline-block',
+}>(props => ({
-  }),
+  display: props.orientation === 'vertical' ? 'block' : 'inline-block',
-);
+}));
 OrderableItemContainer.displayName = 'Orderable:OrderableItemContainer';
 
 class OrderableItem extends Component<{
   orientation: OrderableOrientation;
   id: string;
   children?: React.ReactNode;
-  addRef: (key: string, ref: HTMLElement) => void;
+  addRef: (key: string, ref: HTMLElement | null) => void;
   startMove: (KEY: string, event: React.MouseEvent) => void;
 }> {
-  addRef = (ref: HTMLElement) => {
+  addRef = (ref: HTMLElement | null) => {
     this.props.addRef(this.props.id, ref);
   };
 
@@ -70,7 +70,7 @@ class OrderableItem extends Component<{
       <OrderableItemContainer
         orientation={this.props.orientation}
         key={this.props.id}
-        innerRef={this.addRef}
+        ref={this.addRef}
         onMouseDown={this.startMove}>
         {this.props.children}
       </OrderableItemContainer>
@@ -98,9 +98,9 @@ export default class Orderable extends React.Component<
   mouseKey: 'offsetX' | 'offsetY' = 'offsetX';
   screenKey: 'screenX' | 'screenY' = 'screenX';
 
-  containerRef: HTMLElement | undefined;
+  containerRef: HTMLElement | undefined | null;
   tabRefs: {
-    [key: string]: HTMLElement | undefined;
+    [key: string]: HTMLElement | undefined | null;
   };
 
   static defaultProps = {
@@ -377,11 +377,11 @@ export default class Orderable extends React.Component<
     this.reset();
   }
 
-  addRef = (key: string, elem: HTMLElement | undefined) => {
+  addRef = (key: string, elem: HTMLElement | null) => {
     this.tabRefs[key] = elem;
   };
 
-  setContainerRef = (ref: HTMLElement) => {
+  setContainerRef = (ref: HTMLElement | null) => {
     this.containerRef = ref;
   };
 
@@ -406,7 +406,7 @@ export default class Orderable extends React.Component<
     return (
       <OrderableContainer
         className={this.props.className}
-        innerRef={this.setContainerRef}>
+        ref={this.setContainerRef}>
         {order.map(key => {
           const item = items[key];
           if (item) {

src/ui/components/Panel.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexColumn from './FlexColumn';
 import FlexBox from './FlexBox';
 import {colors} from './colors';
@@ -85,16 +85,17 @@ export default class Panel extends React.Component<
     collapsable: true,
   };
 
-  static PanelContainer = styled(FlexColumn)(
+  static PanelContainer = styled(FlexColumn)<{
-    (props: {floating?: boolean; collapsed?: boolean}) => ({
+    floating?: boolean;
-      flexShrink: 0,
+    collapsed?: boolean;
-      padding: props.floating ? 10 : 0,
+  }>(props => ({
-      borderBottom: props.collapsed ? 'none' : BORDER,
+    flexShrink: 0,
-    }),
+    padding: props.floating ? 10 : 0,
-  );
+    borderBottom: props.collapsed ? 'none' : BORDER,
+  }));
 
-  static PanelHeader = styled(FlexBox)(
+  static PanelHeader = styled(FlexBox)<{floating?: boolean; padded?: boolean}>(
-    (props: {floating?: boolean; padded?: boolean}) => ({
+    props => ({
       backgroundColor: '#f6f7f9',
       border: props.floating ? BORDER : 'none',
       borderBottom: BORDER,
@@ -111,8 +112,8 @@ export default class Panel extends React.Component<
     }),
   );
 
-  static PanelBody = styled(FlexColumn)(
+  static PanelBody = styled(FlexColumn)<{floating?: boolean; padded?: boolean}>(
-    (props: {floating?: boolean; padded?: boolean}) => ({
+    props => ({
       backgroundColor: '#fff',
       border: props.floating ? BORDER : 'none',
       borderBottomLeftRadius: 2,

src/ui/components/Popover.tsx

@@ -9,10 +9,10 @@
 
 import React, {PureComponent} from 'react';
 import FlexColumn from './FlexColumn';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
-const Anchor = styled('img')({
+const Anchor = styled.img({
   zIndex: 6,
   position: 'absolute',
   bottom: 0,
@@ -26,7 +26,7 @@ type Opts = {
   skewLeft?: boolean;
 };
 
-const PopoverContainer = styled(FlexColumn)((props: {opts?: Opts}) => ({
+const PopoverContainer = styled(FlexColumn)<{opts?: Opts}>(props => ({
   backgroundColor: colors.white,
   borderRadius: 7,
   border: '1px solid rgba(0,0,0,0.3)',
@@ -66,7 +66,7 @@ type Props = {
 };
 
 export default class Popover extends PureComponent<Props> {
-  _ref: Element | undefined;
+  _ref?: Element | null;
 
   componentDidMount() {
     window.document.addEventListener('click', this.handleClick);
@@ -90,7 +90,7 @@ export default class Popover extends PureComponent<Props> {
     }
   };
 
-  _setRef = (ref: Element | undefined) => {
+  _setRef = (ref: Element | null) => {
     this._ref = ref;
   };
 
@@ -99,7 +99,7 @@ export default class Popover extends PureComponent<Props> {
       <>
         <Anchor src="./anchor.svg" key="anchor" />
         <PopoverContainer
-          innerRef={this._setRef}
+          ref={this._setRef}
           key="popup"
           opts={this.props.forceOpts || {}}>
           {this.props.children}

src/ui/components/ResizeSensor.tsx

@@ -7,11 +7,11 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {Component} from 'react';
 import React from 'react';
 
-const IFrame = styled('iframe')({
+const IFrame = styled.iframe({
   height: '100%',
   width: '100%',
   border: 'none',
@@ -30,26 +30,26 @@ export default class ResizeSensor extends Component<{
   /** Callback when resize happened */
   onResize: (e: UIEvent) => void;
 }> {
-  iframe: HTMLIFrameElement | undefined;
+  iframe: HTMLIFrameElement | undefined | null;
 
-  setRef = (ref: HTMLIFrameElement | undefined) => {
+  setRef = (ref: HTMLIFrameElement | null) => {
     this.iframe = ref;
   };
 
   render() {
-    return <IFrame innerRef={this.setRef} />;
+    return <IFrame ref={this.setRef} />;
   }
 
   componentDidMount() {
     const {iframe} = this;
-    if (iframe != null && iframe.contentWindow != null) {
+    if (iframe && iframe.contentWindow != null) {
       iframe.contentWindow.addEventListener('resize', this.handleResize);
     }
   }
 
   componentWillUnmount() {
     const {iframe} = this;
-    if (iframe != null && iframe.contentWindow != null) {
+    if (iframe && iframe.contentWindow != null) {
       iframe.contentWindow.removeEventListener('resize', this.handleResize);
     }
   }

src/ui/components/RoundedSection.tsx

@@ -8,19 +8,19 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import Heading from './Heading';
 import FlexColumn from './FlexColumn';
 
-const Divider = styled('hr')({
+const Divider = styled.hr({
   margin: '16px -20px 20px -20px',
   border: 'none',
   borderTop: `1px solid ${colors.light05}`,
 });
 Divider.displayName = 'RoundedSection:Divider';
 
-const Container = styled('div')({
+const Container = styled.div({
   background: colors.white,
   borderRadius: 10,
   boxShadow: '0 1px 3px rgba(0,0,0,0.25)',

src/ui/components/Select.tsx

@@ -9,10 +9,10 @@
 
 import {Component} from 'react';
 import Text from './Text';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
-const Label = styled('label')({
+const Label = styled.label({
   display: 'flex',
   alignItems: 'center',
 });
@@ -24,7 +24,7 @@ const LabelText = styled(Text)({
 });
 LabelText.displayName = 'Select:LabelText';
 
-const SelectMenu = styled('select')((props: {grow?: boolean}) => ({
+const SelectMenu = styled.select<{grow?: boolean}>(props => ({
   flexGrow: props.grow ? 1 : 0,
 }));
 SelectMenu.displayName = 'Select:SelectMenu';

src/ui/components/Sidebar.tsx

@@ -11,7 +11,7 @@ import Interactive from './Interactive';
 import FlexColumn from './FlexColumn';
 import {colors} from './colors';
 import {Component} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {
   BackgroundClipProperty,
   HeightProperty,
@@ -27,25 +27,22 @@ SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
 
 type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
 
-const SidebarContainer = styled(FlexColumn)(
+const SidebarContainer = styled(FlexColumn)<{
-  (props: {
+  position: 'right' | 'top' | 'left' | 'bottom';
-    position: 'right' | 'top' | 'left' | 'bottom';
+  backgroundColor?: BackgroundClipProperty;
-    backgroundColor?: BackgroundClipProperty;
+  overflow?: boolean;
-    overflow?: boolean;
+}>(props => ({
-  }) => ({
+  backgroundColor: props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
-    backgroundColor:
+  borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
-      props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
+  borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
-    borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
+  borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
-    borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
+  borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
-    borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
+  height: '100%',
-    borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
+  overflowX: 'hidden',
-    height: '100%',
+  overflowY: 'auto',
-    overflowX: 'hidden',
+  textOverflow: props.overflow ? 'ellipsis' : 'auto',
-    overflowY: 'auto',
+  whiteSpace: props.overflow ? 'nowrap' : 'normal',
-    textOverflow: props.overflow ? 'ellipsis' : 'auto',
+}));
-    whiteSpace: props.overflow ? 'nowrap' : 'normal',
-  }),
-);
 SidebarContainer.displayName = 'Sidebar:SidebarContainer';
 
 type SidebarProps = {

src/ui/components/SidebarLabel.tsx

@@ -9,7 +9,7 @@
 
 import {colors} from './colors';
 import Label from './Label';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const SidebarLabel = styled(Label)({
   color: colors.blackAlpha30,

src/ui/components/SmallText.tsx

@@ -7,18 +7,18 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import Text from './Text';
 
 /**
  * Subtle text that should not draw attention
  */
-const SmallText = styled(Text)(({center}: {center?: boolean}) => ({
+const SmallText = styled(Text)<{center?: boolean}>(props => ({
   color: colors.light20,
   size: 10,
   fontStyle: 'italic',
-  textAlign: center ? 'center' : undefined,
+  textAlign: props.center ? 'center' : undefined,
   width: '100%',
 }));
 SmallText.displayName = 'SmallText';

src/ui/components/StackTrace.tsx

@@ -13,7 +13,7 @@ import {colors} from './colors';
 import ManagedTable from './table/ManagedTable';
 import FlexRow from './FlexRow';
 import Glyph from './Glyph';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 import {BackgroundColorProperty} from 'csstype';
 import {
@@ -23,22 +23,17 @@ import {
   TableBodyColumn,
 } from './table/types';
 
-const Padder = styled('div')(
+const Padder = styled.div<{
-  ({
+  padded?: boolean;
-    padded,
+  backgroundColor?: BackgroundColorProperty;
-    backgroundColor,
+}>(({padded, backgroundColor}) => ({
-  }: {
+  padding: padded ? 10 : 0,
-    padded?: boolean;
+  backgroundColor,
-    backgroundColor?: BackgroundColorProperty;
+}));
-  }) => ({
-    padding: padded ? 10 : 0,
-    backgroundColor,
-  }),
-);
 Padder.displayName = 'StackTrace:Padder';
 
-const Container = styled('div')(
+const Container = styled.div<{isCrash?: boolean; padded?: boolean}>(
-  ({isCrash, padded}: {isCrash?: boolean; padded?: boolean}) => ({
+  ({isCrash, padded}) => ({
     backgroundColor: isCrash ? colors.redTint : 'transprent',
     border: padded
       ? `1px solid ${isCrash ? colors.red : colors.light15}`
@@ -49,7 +44,7 @@ const Container = styled('div')(
 );
 Container.displayName = 'StackTrace:Container';
 
-const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
+const Title = styled(FlexRow)<{isCrash?: boolean}>(({isCrash}) => ({
   color: isCrash ? colors.red : 'inherit',
   padding: 8,
   alignItems: 'center',
@@ -57,15 +52,15 @@ const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
 }));
 Title.displayName = 'StackTrace:Title';
 
-const Reason = styled(Text)(({isCrash}: {isCrash?: boolean}) => ({
+const Reason = styled(Text)<{isCrash?: boolean}>(({isCrash}) => ({
   color: isCrash ? colors.red : colors.light80,
   fontWeight: 'bold',
   fontSize: 13,
 }));
 Reason.displayName = 'StackTrace:Reason';
 
-const Line = styled(Text)(
+const Line = styled(Text)<{isCrash?: boolean; isBold?: boolean}>(
-  ({isCrash, isBold}: {isCrash?: boolean; isBold?: boolean}) => ({
+  ({isCrash, isBold}) => ({
     color: isCrash ? colors.red : colors.light80,
     fontWeight: isBold ? 'bold' : 'normal',
   }),

src/ui/components/StarButton.tsx

@@ -10,7 +10,7 @@
 import React, {useState, useCallback} from 'react';
 import {colors} from './colors';
 import Glyph from './Glyph';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const DownscaledGlyph = styled(Glyph)({
   maskSize: '12px 12px',

src/ui/components/StatusIndicator.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 import {BackgroundColorProperty, HeightProperty} from 'csstype';
@@ -18,8 +18,8 @@ type Props = {
   title?: string;
 };
 
-const StatusIndicator = styled('div')(
+const StatusIndicator = styled.div<Props>(
-  ({statusColor, diameter = 10, title}: Props) => ({
+  ({statusColor, diameter = 10, title}) => ({
     alignSelf: 'center',
     backgroundColor: statusColor,
     border: `1px solid ${colors.blackAlpha30}`,

src/ui/components/Tabs.tsx

@@ -8,7 +8,7 @@
  */
 
 import FlexColumn from './FlexColumn';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Orderable from './Orderable';
 import FlexRow from './FlexRow';
 import {colors} from './colors';
@@ -23,49 +23,47 @@ const TabList = styled(FlexRow)({
 });
 TabList.displayName = 'Tabs:TabList';
 
-const TabListItem = styled('div')(
+const TabListItem = styled.div<{
-  (props: {
+  active?: boolean;
-    active?: boolean;
+  width?: WidthProperty<number>;
-    width?: WidthProperty<number>;
+  container?: boolean;
-    container?: boolean;
+}>(props => ({
-  }) => ({
+  background: props.container
-    background: props.container
+    ? props.active
-      ? props.active
+      ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
-        ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
+      : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
-        : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
+    : props.active
-      : props.active
+    ? colors.light15
-      ? colors.light15
+    : colors.light02,
-      : colors.light02,
+  borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
-    borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
+  boxShadow:
-    boxShadow:
+    props.active && props.container
-      props.active && props.container
+      ? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
-        ? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
+      : 'none',
-        : 'none',
+  color: props.container && props.active ? colors.white : colors.dark80,
-    color: props.container && props.active ? colors.white : colors.dark80,
+  flex: props.container ? 'unset' : 1,
-    flex: props.container ? 'unset' : 1,
+  top: props.container ? -11 : 0,
-    top: props.container ? -11 : 0,
+  fontWeight: 500,
-    fontWeight: 500,
+  fontSize: 13,
-    fontSize: 13,
+  lineHeight: props.container ? '22px' : '28px',
-    lineHeight: props.container ? '22px' : '28px',
+  overflow: 'hidden',
-    overflow: 'hidden',
+  padding: '0 10px',
-    padding: '0 10px',
+  position: 'relative',
-    position: 'relative',
+  textAlign: 'center',
-    textAlign: 'center',
+  textOverflow: 'ellipsis',
-    textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
-    whiteSpace: 'nowrap',
+  '&:first-child': {
-    '&:first-child': {
+    borderTopLeftRadius: props.container ? 3 : 0,
-      borderTopLeftRadius: props.container ? 3 : 0,
+    borderBottomLeftRadius: props.container ? 3 : 0,
-      borderBottomLeftRadius: props.container ? 3 : 0,
+  },
-    },
+  '&:last-child': {
-    '&:last-child': {
+    borderTopRightRadius: props.container ? 3 : 0,
-      borderTopRightRadius: props.container ? 3 : 0,
+    borderBottomRightRadius: props.container ? 3 : 0,
-      borderBottomRightRadius: props.container ? 3 : 0,
+  },
-    },
+  '&:hover': {
-    '&:hover': {
+    backgroundColor: props.active ? colors.light15 : colors.light05,
-      backgroundColor: props.active ? colors.light15 : colors.light05,
+  },
-    },
+}));
-  }),
-);
 TabListItem.displayName = 'Tabs:TabListItem';
 
 const TabListAddItem = styled(TabListItem)({
@@ -76,7 +74,7 @@ const TabListAddItem = styled(TabListItem)({
 });
 TabListAddItem.displayName = 'Tabs:TabListAddItem';
 
-const CloseButton = styled('div')({
+const CloseButton = styled.div({
   color: '#000',
   float: 'right',
   fontSize: 10,
@@ -96,12 +94,12 @@ const CloseButton = styled('div')({
 });
 CloseButton.displayName = 'Tabs:CloseButton';
 
-const OrderableContainer = styled('div')({
+const OrderableContainer = styled.div({
   display: 'inline-block',
 });
 OrderableContainer.displayName = 'Tabs:OrderableContainer';
 
-const TabContent = styled('div')({
+const TabContent = styled.div({
   height: '100%',
   overflow: 'auto',
   width: '100%',
@@ -233,7 +231,7 @@ export default function Tabs(props: {
         continue;
       }
 
-      let closeButton: HTMLDivElement | undefined;
+      let closeButton: HTMLDivElement | undefined | null;
 
       tabs[key] = (
         <TabListItem
@@ -253,7 +251,7 @@ export default function Tabs(props: {
           {comp.props.label}
           {closable && (
             <CloseButton // eslint-disable-next-line react/jsx-no-bind
-              innerRef={ref => (closeButton = ref)} // eslint-disable-next-line react/jsx-no-bind
+              ref={ref => (closeButton = ref)} // eslint-disable-next-line react/jsx-no-bind
               onMouseDown={() => {
                 if (isActive && onActive) {
                   const index = keys.indexOf(key);

src/ui/components/TabsContainer.tsx

@@ -8,9 +8,9 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Container = styled('div')({
+const Container = styled.div({
   backgroundColor: '#E3E3E3',
   borderRadius: 4,
   boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',

src/ui/components/Text.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {
   ColorProperty,
   FontSizeProperty,
@@ -21,45 +21,42 @@ import {
 /**
  * A Text component.
  */
-const Text = styled('span')(
+const Text = styled.span<{
-  (props: {
+  color?: ColorProperty;
-    color?: ColorProperty;
+  bold?: boolean;
-    bold?: boolean;
+  italic?: boolean;
-    italic?: boolean;
+  underline?: boolean;
-    underline?: boolean;
+  align?: TextAlignProperty;
-    align?: TextAlignProperty;
+  size?: FontSizeProperty<number>;
-    size?: FontSizeProperty<number>;
+  code?: boolean;
-    code?: boolean;
+  family?: FontFamilyProperty;
-    family?: FontFamilyProperty;
+  selectable?: boolean;
-    selectable?: boolean;
+  wordWrap?: WordWrapProperty;
-    wordWrap?: WordWrapProperty;
+  whiteSpace?: WhiteSpaceProperty;
-    whiteSpace?: WhiteSpaceProperty;
+  cursor?: CursorProperty;
-    cursor?: CursorProperty;
+}>(props => ({
-  }) => ({
+  color: props.color ? props.color : 'inherit',
-    color: props.color ? props.color : 'inherit',
+  cursor: props.cursor ? props.cursor : 'auto',
-    cursor: props.cursor ? props.cursor : 'auto',
+  display: 'inline',
-    display: 'inline',
+  fontWeight: props.bold ? 'bold' : 'inherit',
-    fontWeight: props.bold ? 'bold' : 'inherit',
+  fontStyle: props.italic ? 'italic' : 'normal',
-    fontStyle: props.italic ? 'italic' : 'normal',
+  textAlign: props.align || 'left',
-    textAlign: props.align || 'left',
+  fontSize: props.size == null && props.code ? 12 : props.size,
-    fontSize: props.size == null && props.code ? 12 : props.size,
+  textDecoration: props.underline ? 'underline' : 'initial',
-    textDecoration: props.underline ? 'underline' : 'initial',
+  fontFamily: props.code
-    fontFamily: props.code
+    ? 'SF Mono, Monaco, Andale Mono, monospace'
-      ? 'SF Mono, Monaco, Andale Mono, monospace'
+    : props.family,
-      : props.family,
+  overflow: props.code ? 'auto' : 'visible',
-    overflow: props.code ? 'auto' : 'visible',
+  userSelect:
-    userSelect:
+    props.selectable || (props.code && typeof props.selectable === 'undefined')
-      props.selectable ||
+      ? 'text'
-      (props.code && typeof props.selectable === 'undefined')
+      : 'none',
-        ? 'text'
+  wordWrap: props.code ? 'break-word' : props.wordWrap,
-        : 'none',
+  whiteSpace:
-    wordWrap: props.code ? 'break-word' : props.wordWrap,
+    props.code && typeof props.whiteSpace === 'undefined'
-    whiteSpace:
+      ? 'pre'
-      props.code && typeof props.whiteSpace === 'undefined'
+      : props.whiteSpace,
-        ? 'pre'
+}));
-        : props.whiteSpace,
-  }),
-);
 Text.displayName = 'Text';
 
 export default Text;

src/ui/components/TextParagraph.tsx

@@ -7,12 +7,12 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A TextParagraph component.
  */
-const TextParagraph = styled('div')({
+const TextParagraph = styled.div({
   marginBottom: 10,
 
   '&:last-child': {

src/ui/components/Textarea.tsx

@@ -7,29 +7,23 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {inputStyle} from './Input';
 
-const Textarea = styled('textarea')(
+const Textarea = styled.textarea<{
-  ({
+  compact?: boolean;
-    compact,
+  readOnly?: boolean;
-    readOnly,
+  valid?: boolean;
-    valid,
+}>(({compact, readOnly, valid}) => ({
-  }: {
+  ...inputStyle({
-    compact?: boolean;
+    compact: compact || false,
-    readOnly?: boolean;
+    readOnly: readOnly || false,
-    valid?: boolean;
+    valid: valid !== false,
-  }) => ({
-    ...inputStyle({
-      compact: compact || false,
-      readOnly: readOnly || false,
-      valid: valid !== false,
-    }),
-    lineHeight: 'normal',
-    padding: compact ? '5px' : '8px',
-    resize: 'none',
   }),
-);
+  lineHeight: 'normal',
+  padding: compact ? '5px' : '8px',
+  resize: 'none',
+}));
 Textarea.displayName = 'Textarea';
 
 export default Textarea;

src/ui/components/ToggleSwitch.tsx

@@ -8,12 +8,12 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import Text from './Text';
 import FlexRow from './FlexRow';
 
-export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
+export const StyledButton = styled.div<{toggled: boolean}>(props => ({
   width: '30px',
   height: '16px',
   background: props.toggled ? colors.green : colors.grey,

src/ui/components/Toolbar.tsx

@@ -10,30 +10,31 @@
 import {colors} from './colors';
 import FlexRow from './FlexRow';
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A toolbar.
  */
-const Toolbar = styled(FlexRow)(
+const Toolbar = styled(FlexRow)<{
-  (props: {position?: 'bottom' | 'top'; compact?: boolean}) => ({
+  position?: 'bottom' | 'top';
-    backgroundColor: colors.light02,
+  compact?: boolean;
-    borderBottom:
+}>(props => ({
-      props.position === 'bottom'
+  backgroundColor: colors.light02,
-        ? 'none'
+  borderBottom:
-        : `1px solid ${colors.sectionHeaderBorder}`,
+    props.position === 'bottom'
-    borderTop:
+      ? 'none'
-      props.position === 'bottom'
+      : `1px solid ${colors.sectionHeaderBorder}`,
-        ? `1px solid ${colors.sectionHeaderBorder}`
+  borderTop:
-        : 'none',
+    props.position === 'bottom'
-    flexShrink: 0,
+      ? `1px solid ${colors.sectionHeaderBorder}`
-    height: props.compact ? 28 : 42,
+      : 'none',
-    lineHeight: '32px',
+  flexShrink: 0,
-    alignItems: 'center',
+  height: props.compact ? 28 : 42,
-    padding: 6,
+  lineHeight: '32px',
-    width: '100%',
+  alignItems: 'center',
-  }),
+  padding: 6,
-);
+  width: '100%',
+}));
 Toolbar.displayName = 'Toolbar';
 
 export const Spacer = styled(FlexBox)({

src/ui/components/Tooltip.tsx

@@ -8,11 +8,11 @@
  */
 
 import TooltipProvider, {TooltipOptions} from './TooltipProvider';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
-const TooltipContainer = styled('div')({
+const TooltipContainer = styled.div({
   display: 'contents',
 });
 TooltipContainer.displayName = 'Tooltip:TooltipContainer';
@@ -38,7 +38,7 @@ export default class Tooltip extends Component<TooltipProps, TooltipState> {
     TOOLTIP_PROVIDER: TooltipProvider;
   };
 
-  ref: HTMLDivElement | undefined;
+  ref: HTMLDivElement | undefined | null;
 
   state = {
     open: false,
@@ -66,14 +66,14 @@ export default class Tooltip extends Component<TooltipProps, TooltipState> {
     this.setState({open: false});
   };
 
-  setRef = (ref: HTMLDivElement | undefined) => {
+  setRef = (ref: HTMLDivElement | null) => {
     this.ref = ref;
   };
 
   render() {
     return (
       <TooltipContainer
-        innerRef={this.setRef}
+        ref={this.setRef}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}>
         {this.props.children}

src/ui/components/TooltipProvider.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import {Component} from 'react';
 import PropTypes from 'prop-types';
@@ -52,37 +52,35 @@ export type TooltipOptions = {
   delay?: number; // in milliseconds
 };
 
-const TooltipBubble = styled('div')(
+const TooltipBubble = styled.div<{
-  (props: {
+  top: TopProperty<number>;
-    top: TopProperty<number>;
+  left: LeftProperty<number>;
-    left: LeftProperty<number>;
+  bottom: BottomProperty<number>;
-    bottom: BottomProperty<number>;
+  right: RightProperty<number>;
-    right: RightProperty<number>;
+  options: {
-    options: {
+    backgroundColor: BackgroundColorProperty;
-      backgroundColor: BackgroundColorProperty;
+    lineHeight: LineHeightProperty<number>;
-      lineHeight: LineHeightProperty<number>;
+    padding: PaddingProperty<number>;
-      padding: PaddingProperty<number>;
+    borderRadius: BorderRadiusProperty<number>;
-      borderRadius: BorderRadiusProperty<number>;
+    width: WidthProperty<number>;
-      width: WidthProperty<number>;
+    maxWidth: MaxWidthProperty<number>;
-      maxWidth: MaxWidthProperty<number>;
+    color: ColorProperty;
-      color: ColorProperty;
+  };
-    };
+}>(props => ({
-  }) => ({
+  position: 'absolute',
-    position: 'absolute',
+  zIndex: 99999999999,
-    zIndex: 99999999999,
+  backgroundColor: props.options.backgroundColor,
-    backgroundColor: props.options.backgroundColor,
+  lineHeight: props.options.lineHeight,
-    lineHeight: props.options.lineHeight,
+  padding: props.options.padding,
-    padding: props.options.padding,
+  borderRadius: props.options.borderRadius,
-    borderRadius: props.options.borderRadius,
+  width: props.options.width,
-    width: props.options.width,
+  maxWidth: props.options.maxWidth,
-    maxWidth: props.options.maxWidth,
+  top: props.top,
-    top: props.top,
+  left: props.left,
-    left: props.left,
+  bottom: props.bottom,
-    bottom: props.bottom,
+  right: props.right,
-    right: props.right,
+  color: props.options.color,
-    color: props.options.color,
+}));
-  }),
-);
 TooltipBubble.displayName = 'TooltipProvider:TooltipBubble';
 
 // vertical offset on bubble when position is 'below'
@@ -96,31 +94,29 @@ const TAIL_AB_POSITION_HORIZONTAL_OFFSET = 15;
 // vertical offset on tail when position is 'toLeft' or 'toRight'
 const TAIL_LR_POSITION_HORIZONTAL_OFFSET = 5;
 
-const TooltipTail = styled('div')(
+const TooltipTail = styled.div<{
-  (props: {
+  top: TopProperty<number>;
-    top: TopProperty<number>;
+  left: LeftProperty<number>;
-    left: LeftProperty<number>;
+  bottom: BottomProperty<number>;
-    bottom: BottomProperty<number>;
+  right: RightProperty<number>;
-    right: RightProperty<number>;
+  options: {
-    options: {
+    backgroundColor: BackgroundColorProperty;
-      backgroundColor: BackgroundColorProperty;
+  };
-    };
+}>(props => ({
-  }) => ({
+  position: 'absolute',
-    position: 'absolute',
+  display: 'block',
-    display: 'block',
+  whiteSpace: 'pre',
-    whiteSpace: 'pre',
+  height: '10px',
-    height: '10px',
+  width: '10px',
-    width: '10px',
+  lineHeight: '0',
-    lineHeight: '0',
+  zIndex: 99999999998,
-    zIndex: 99999999998,
+  transform: 'rotate(45deg)',
-    transform: 'rotate(45deg)',
+  backgroundColor: props.options.backgroundColor,
-    backgroundColor: props.options.backgroundColor,
+  top: props.top,
-    top: props.top,
+  left: props.left,
-    left: props.left,
+  bottom: props.bottom,
-    bottom: props.bottom,
+  right: props.right,
-    right: props.right,
+}));
-  }),
-);
 TooltipTail.displayName = 'TooltipProvider:TooltipTail';
 
 type TooltipProps = {

src/ui/components/VBox.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexColumn from './FlexColumn';
 
 /**