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
2019-12-11 09:41:32 -08:00
parent c3dfcbe601
commit c0f902f81a
119 changed files with 977 additions and 1004 deletions
--- a/.vscode/launch.json
+++ b/.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}"]
+   }
  ]
 }
--- a/docs/extending/styling-components.md
+++ b/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 MyImage = styled('img')({ ... });
-const MyInput = styled('input')({ ... });
+const MyText = styled.span({ ... });
+const MyImage = styled.img({ ... });
+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),
--- a/docs/tutorial/js-custom.md
+++ b/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%',
--- a/package.json
+++ b/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"
    ]
  },
--- a/src/NotificationsHub.tsx
+++ b/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)(
-  (props: {isSelected?: boolean}) => ({
+const NotificationContent = styled(FlexColumn)<{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,
--- a/src/chrome/BugReporterDialog.tsx
+++ b/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;
-  descriptionRef?: HTMLElement;
+  titleRef?: HTMLElement | null;
+  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}
          />
--- a/src/chrome/DoctorBar.tsx
+++ b/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',
--- a/src/chrome/ErrorBar.tsx
+++ b/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',
--- a/src/chrome/ListView.tsx
+++ b/src/chrome/ListView.tsx
@@ -66,24 +66,17 @@ const RowComponentContainer = styled(FlexColumn)({
  maxHeight: 500,
 });

-const Padder = styled('div')(
-  ({
-    paddingLeft,
-    paddingRight,
-    paddingBottom,
-    paddingTop,
-  }: {
-    paddingLeft?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingTop?: number;
-  }) => ({
-    paddingLeft: paddingLeft || 0,
-    paddingRight: paddingRight || 0,
-    paddingBottom: paddingBottom || 0,
-    paddingTop: paddingTop || 0,
-  }),
-);
+const Padder = styled.div<{
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingTop?: number;
+}>(({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
+  paddingLeft: paddingLeft || 0,
+  paddingRight: paddingRight || 0,
+  paddingBottom: paddingBottom || 0,
+  paddingTop: paddingTop || 0,
+}));

 type RowComponentProps = {
  name: string;
--- a/src/chrome/MainSidebar.tsx
+++ b/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)(
-  ({backgroundColor}: {backgroundColor?: BackgroundColorProperty}) => ({
-    marginRight: 8,
-    backgroundColor,
-    borderRadius: 3,
-    flexShrink: 0,
-    width: 18,
-    height: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-    top: '-1px',
-  }),
-);
+const PluginShape = styled(FlexBox)<{
+  backgroundColor?: BackgroundColorProperty;
+}>(({backgroundColor}) => ({
+  marginRight: 8,
+  backgroundColor,
+  borderRadius: 3,
+  flexShrink: 0,
+  width: 18,
+  height: 18,
+  justifyContent: 'center',
+  alignItems: 'center',
+  top: '-1px',
+}));

-const PluginName = styled(Text)(
-  (props: {isActive?: boolean; count?: number}) => ({
+const PluginName = styled(Text)<{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(
-  component: StyledOtherComponent<any, {}, any> | React.ComponentType<any>,
-) {
+function centerInSidebar(component: any) {
  return styled(component)({
    marginTop: '10px',
    marginBottom: '10px',
--- a/src/chrome/Popover.tsx
+++ b/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 (
--- a/src/chrome/RatingButton.tsx
+++ b/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',
--- a/src/chrome/Sheet.tsx
+++ b/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)'
--- a/src/chrome/TitleBar.tsx
+++ b/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,
--- a/src/chrome/UserAccount.tsx
+++ b/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}
        />
--- a/src/chrome/WelcomeScreen.tsx
+++ b/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',
--- a/src/chrome/tests/snapshots/ShareSheetPendingDialog.node.tsx.snap
+++ b/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]}
--- a/src/chrome/settings/ToggledSection.tsx
+++ b/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,
--- a/src/chrome/settings/configFields.tsx
+++ b/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,
--- a/src/index.tsx
+++ b/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';
--- a/src/init.tsx
+++ b/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 ? (
-            <WarningEmployee
-              onClick={() => {
-                setWarnEmployee(false);
-              }}
-            />
-          ) : (
-            <App logger={logger} bugReporter={bugReporter} />
-          )}
+          <CacheProvider value={cache}>
+            {warnEmployee ? (
+              <WarningEmployee
+                onClick={() => {
+                  setWarnEmployee(false);
+                }}
+              />
+            ) : (
+              <App logger={logger} bugReporter={bugReporter} />
+            )}
+          </CacheProvider>
        </Provider>
      </ContextMenuProvider>
    </TooltipProvider>
--- a/src/plugins/TableNativePlugin.tsx
+++ b/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',
--- a/src/plugins/cpu/index.tsx
+++ b/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',
--- a/src/plugins/crash_reporter/index.js
+++ b/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,
--- a/src/plugins/databases/index.js
+++ b/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',
--- a/src/plugins/fresco/ImagesCacheOverview.tsx
+++ b/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)(
-    (props: {selected: boolean; size: number}) => ({
+  static HoverOverlay = styled(FlexColumn)<{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,
--- a/src/plugins/fresco/ImagesSidebar.tsx
+++ b/src/plugins/fresco/ImagesSidebar.tsx
@@ -29,7 +29,7 @@ type ImagesSidebarProps = {

 type ImagesSidebarState = {};

-const DataDescriptionKey = styled('span')({
+const DataDescriptionKey = styled.span({
  color: colors.grapeDark1,
 });

--- a/src/plugins/fresco/MultipleSelect.tsx
+++ b/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',
--- a/src/plugins/fresco/tests/snapshots/index.node.tsx.snap
+++ b/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)>
-  <Styled(div)>
-    <Text
+  </ForwardRef(render)>
+  <ForwardRef(render)>
+    <ForwardRef(render)
      bold={true}
    >
      Stacktrace:
-    </Text>
-  </Styled(div)>
-  <Styled(div)>
-    <Text
+    </ForwardRef(render)>
+  </ForwardRef(render)>
+  <ForwardRef(render)>
+    <ForwardRef(render)
      code={true}
    >
      &lt;unavailable&gt;
-    </Text>
-  </Styled(div)>
+    </ForwardRef(render)>
+  </ForwardRef(render)>
 </React.Fragment>
 `;
--- a/src/plugins/layout/ToolbarIcon.tsx
+++ b/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,
--- a/src/plugins/logs/index.tsx
+++ b/src/plugins/logs/index.tsx
@@ -229,24 +229,22 @@ const HiddenScrollText = styled(Text)({
  },
 });

-const LogCount = styled('div')(
-  ({backgroundColor}: {backgroundColor: string}) => ({
-    backgroundColor,
-    borderRadius: '999em',
-    fontSize: 11,
-    marginTop: 4,
-    minWidth: 16,
-    height: 16,
-    color: colors.white,
-    textAlign: 'center',
-    lineHeight: '16px',
-    paddingLeft: 4,
-    paddingRight: 4,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  }),
-);
+const LogCount = styled.div<{backgroundColor: string}>(({backgroundColor}) => ({
+  backgroundColor,
+  borderRadius: '999em',
+  fontSize: 11,
+  marginTop: 4,
+  minWidth: 16,
+  height: 16,
+  color: colors.white,
+  textAlign: 'center',
+  lineHeight: '16px',
+  paddingLeft: 4,
+  paddingRight: 4,
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+}));

 function pad(chunk: any, len: number): string {
  let str = String(chunk);
--- a/src/plugins/navigation/components/AutoCompleteSheet.tsx
+++ b/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,
 });

--- a/src/plugins/navigation/components/BookmarksSidebar.tsx
+++ b/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%',
--- a/src/plugins/navigation/components/FavoriteButton.tsx
+++ b/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',
--- a/src/plugins/navigation/components/IconButton.tsx
+++ b/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`,
  },
--- a/src/plugins/navigation/components/NavigationInfoBox.tsx
+++ b/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,
--- a/src/plugins/navigation/components/RequiredParametersDialog.tsx
+++ b/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,
 });

--- a/src/plugins/navigation/components/SaveBookmarkDialog.tsx
+++ b/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',
 });

--- a/src/plugins/navigation/components/SearchBar.tsx
+++ b/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,
--- a/src/plugins/navigation/components/Timeline.tsx
+++ b/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) => {
--- a/src/plugins/network/RequestDetails.tsx
+++ b/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,
  });
--- a/src/plugins/reactdevtools/index.tsx
+++ b/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',
--- a/src/plugins/sandbox/index.tsx
+++ b/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',
--- a/src/plugins/seamammals/index.tsx
+++ b/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%',
--- a/src/plugins/sections/EventsTable.js
+++ b/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,
--- a/src/plugins/sections/Tree.js
+++ b/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,
--- a/src/plugins/sections/index.js
+++ b/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',
--- a/src/ui/components/Block.tsx
+++ b/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';
--- a/src/ui/components/Bordered.tsx
+++ b/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}`,
--- a/src/ui/components/Box.tsx
+++ b/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%',
--- a/src/ui/components/Button.tsx
+++ b/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')(
-  (props: {
-    windowIsFocused?: boolean;
-    compact?: boolean;
-    inButtonGroup?: boolean;
-    padded?: boolean;
-    pulse?: boolean;
-    disabled?: boolean;
-    dropdown?: Array<MenuItemConstructorOptions>;
-  }) => ({
-    backgroundColor:
-      props.windowIsFocused && !props.disabled
-        ? colors.white
-        : colors.macOSTitleBarButtonBackgroundBlur,
-    backgroundImage: backgroundImage(props),
-    borderStyle: 'solid',
-    borderWidth: 1,
+const StyledButton = styled.div<{
+  windowIsFocused?: boolean;
+  compact?: boolean;
+  inButtonGroup?: boolean;
+  padded?: boolean;
+  pulse?: boolean;
+  disabled?: boolean;
+  dropdown?: Array<MenuItemConstructorOptions>;
+}>(props => ({
+  backgroundColor:
+    props.windowIsFocused && !props.disabled
+      ? colors.white
+      : colors.macOSTitleBarButtonBackgroundBlur,
+  backgroundImage: backgroundImage(props),
+  borderStyle: 'solid',
+  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),
-    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,
+    pointerEvents: 'none',
+  },

-    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),
-      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`,
-    },
-  }),
-);
+  '&: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';
--- a/src/ui/components/ButtonGroup.tsx
+++ b/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': {
--- a/src/ui/components/ButtonGroupChain.tsx
+++ b/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')(
-  (props: {iconSize: number}) => ({
-    display: 'inline-flex',
-    marginLeft: 10,
-    '&:first-child>*:not(:first-child):nth-child(odd)': {
-      paddingLeft: props.iconSize + 6,
-    },
-    '&:first-child>*': {
-      borderRightStyle: 'none',
-      borderLeftStyle: 'none',
-    },
-    '&:first-child>:first-child': {
-      borderLeftStyle: 'solid',
-    },
-    '&:first-child>:last-child': {
-      borderRightStyle: 'solid',
-    },
-  }),
-);
+const ButtonGroupChainContainer = styled.div<{iconSize: number}>(props => ({
+  display: 'inline-flex',
+  marginLeft: 10,
+  '&:first-child>*:not(:first-child):nth-child(odd)': {
+    paddingLeft: props.iconSize + 6,
+  },
+  '&:first-child>*': {
+    borderRightStyle: 'none',
+    borderLeftStyle: 'none',
+  },
+  '&:first-child>:first-child': {
+    borderLeftStyle: 'solid',
+  },
+  '&:first-child>:last-child': {
+    borderRightStyle: 'solid',
+  },
+}));
 IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer';

 type Props = {
--- a/src/ui/components/CenteredView.tsx
+++ b/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',
--- a/src/ui/components/Checkbox.tsx
+++ b/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',
--- a/src/ui/components/CodeBlock.tsx
+++ b/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';
--- a/src/ui/components/ContextMenuProvider.tsx
+++ b/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';
--- a/src/ui/components/ErrorBlock.tsx
+++ b/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';

--- a/src/ui/components/ErrorBoundary.tsx
+++ b/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)({
--- a/src/ui/components/FlexBox.tsx
+++ b/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,
 }));
--- a/src/ui/components/FlexCenter.tsx
+++ b/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.
--- a/src/ui/components/FlexColumn.tsx
+++ b/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
--- a/src/ui/components/FlexRow.tsx
+++ b/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
--- a/src/ui/components/FocusableBox.tsx
+++ b/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)({
--- a/src/ui/components/Glyph.tsx
+++ b/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')(
-  (props: {size: number; color?: string; src: string}) => ({
-    height: props.size,
-    verticalAlign: 'middle',
-    width: props.size,
-    backgroundColor: props.color,
-    display: 'inline-block',
-    maskImage: `url('${props.src}')`,
-    maskSize: '100% 100%',
-    WebkitMaskImage: `url('${props.src}')`,
-    WebkitMaskSize: '100% 100%',
-    flexShrink: 0,
-  }),
-);
+const ColoredIconCustom = styled.div<{
+  size: number;
+  color?: string;
+  src: string;
+}>(props => ({
+  height: props.size,
+  verticalAlign: 'middle',
+  width: props.size,
+  backgroundColor: props.color,
+  display: 'inline-block',
+  maskImage: `url('${props.src}')`,
+  maskSize: '100% 100%',
+  WebkitMaskImage: `url('${props.src}')`,
+  WebkitMaskSize: '100% 100%',
+  flexShrink: 0,
+}));
 ColoredIconCustom.displayName = 'Glyph:ColoredIconCustom';

 function ColoredIcon(
--- a/src/ui/components/HBox.tsx
+++ b/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)(
-  ({verticalAlign}: {verticalAlign: string}) => ({
+const HBoxContainer = styled(FlexRow)<{verticalAlign: string}>(
+  ({verticalAlign}) => ({
    shrink: 0,
    alignItems: verticalAlign,
  }),
--- a/src/ui/components/Heading.tsx
+++ b/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',
--- a/src/ui/components/HorizontalRule.tsx
+++ b/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',
--- a/src/ui/components/Info.tsx
+++ b/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)(
-  ({type, small}: Pick<InfoProps, 'type' | 'small'>) => ({
+const InfoWrapper = styled(FlexColumn)<Pick<InfoProps, 'type' | 'small'>>(
+  ({type, small}) => ({
    padding: small ? '0 4px' : 10,
    borderRadius: 4,
    color: color[type],
--- a/src/ui/components/Input.tsx
+++ b/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')(
-  ({
-    compact,
-    valid,
-    readOnly,
-  }: {
-    compact?: boolean;
-    valid?: boolean;
-    readOnly?: boolean;
-  }) => ({
-    ...inputStyle({
-      compact: compact || false,
-      valid: valid !== false,
-      readOnly: readOnly === true,
-    }),
-    padding: compact ? '0 5px' : '0 10px',
+const Input = styled.input<{
+  compact?: boolean;
+  valid?: boolean;
+  readOnly?: boolean;
+}>(({compact, valid, readOnly}) => ({
+  ...inputStyle({
+    compact: compact || false,
+    valid: valid !== false,
+    readOnly: readOnly === true,
  }),
-);
+  padding: compact ? '0 5px' : '0 10px',
+}));

 Input.displayName = 'Input';

--- a/src/ui/components/Interactive.tsx
+++ b/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;
-  nextLeft: number | null | undefined;
-  nextEvent: MouseEvent | null | undefined;
+  nextTop?: number | null;
+  nextLeft?: number | null;
+  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
--- a/src/ui/components/Label.tsx
+++ b/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',
 });
--- a/src/ui/components/Link.tsx
+++ b/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',
--- a/src/ui/components/LoadingIndicator.tsx
+++ b/src/ui/components/LoadingIndicator.tsx
@@ -7,8 +7,8 @@
 * @format
 */

-import styled from 'react-emotion';
-import {keyframes} from 'react-emotion';
+import styled from '@emotion/styled';
+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,
--- a/src/ui/components/Markdown.tsx
+++ b/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}> {
--- a/src/ui/components/MarkerTimeline.tsx
+++ b/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)(
-  (props: {
-    positionY: number;
-    onClick: Function | undefined;
-    number: number | undefined;
-    threadColor: string;
-    selected: boolean;
-    cut: boolean;
-  }) => ({
+const Point = styled(FlexRow)<{
+  positionY: number;
+  onClick: MouseEventHandler | undefined;
+  number: number | undefined;
+  threadColor: string;
+  selected: 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,
-    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',
-      width: 11,
-      top: -20,
-      left: 0,
-      height: 2,
-      background: colors.white,
-      borderTop: `1px solid ${colors.light30}`,
-      borderBottom: `1px solid ${colors.light30}`,
-      transform: `skewY(-10deg)`,
-    },
-  }),
-);
+    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,
--- a/src/ui/components/ModalOverlay.tsx
+++ b/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>
    );
--- a/src/ui/components/MultiLineInput.tsx
+++ b/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',
 }));
--- a/src/ui/components/Orderable.tsx
+++ b/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')(
-  (props: {orientation: 'vertical' | 'horizontal'}) => ({
-    display: props.orientation === 'vertical' ? 'block' : 'inline-block',
-  }),
-);
+const OrderableItemContainer = styled.div<{
+  orientation: 'vertical' | 'horizontal';
+}>(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) {
--- a/src/ui/components/Panel.tsx
+++ b/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)(
-    (props: {floating?: boolean; collapsed?: boolean}) => ({
-      flexShrink: 0,
-      padding: props.floating ? 10 : 0,
-      borderBottom: props.collapsed ? 'none' : BORDER,
-    }),
-  );
+  static PanelContainer = styled(FlexColumn)<{
+    floating?: boolean;
+    collapsed?: boolean;
+  }>(props => ({
+    flexShrink: 0,
+    padding: props.floating ? 10 : 0,
+    borderBottom: props.collapsed ? 'none' : BORDER,
+  }));

-  static PanelHeader = styled(FlexBox)(
-    (props: {floating?: boolean; padded?: boolean}) => ({
+  static PanelHeader = styled(FlexBox)<{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)(
-    (props: {floating?: boolean; padded?: boolean}) => ({
+  static PanelBody = styled(FlexColumn)<{floating?: boolean; padded?: boolean}>(
+    props => ({
      backgroundColor: '#fff',
      border: props.floating ? BORDER : 'none',
      borderBottomLeftRadius: 2,
--- a/src/ui/components/Popover.tsx
+++ b/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}
--- a/src/ui/components/ResizeSensor.tsx
+++ b/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);
    }
  }
--- a/src/ui/components/RoundedSection.tsx
+++ b/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)',
--- a/src/ui/components/Select.tsx
+++ b/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';
--- a/src/ui/components/Sidebar.tsx
+++ b/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)(
-  (props: {
-    position: 'right' | 'top' | 'left' | 'bottom';
-    backgroundColor?: BackgroundClipProperty;
-    overflow?: boolean;
-  }) => ({
-    backgroundColor:
-      props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
-    borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
-    borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
-    borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
-    borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
-    height: '100%',
-    overflowX: 'hidden',
-    overflowY: 'auto',
-    textOverflow: props.overflow ? 'ellipsis' : 'auto',
-    whiteSpace: props.overflow ? 'nowrap' : 'normal',
-  }),
-);
+const SidebarContainer = styled(FlexColumn)<{
+  position: 'right' | 'top' | 'left' | 'bottom';
+  backgroundColor?: BackgroundClipProperty;
+  overflow?: boolean;
+}>(props => ({
+  backgroundColor: props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
+  borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
+  borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
+  borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
+  borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
+  height: '100%',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  textOverflow: props.overflow ? 'ellipsis' : 'auto',
+  whiteSpace: props.overflow ? 'nowrap' : 'normal',
+}));
 SidebarContainer.displayName = 'Sidebar:SidebarContainer';

 type SidebarProps = {
--- a/src/ui/components/SidebarLabel.tsx
+++ b/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,
--- a/src/ui/components/SmallText.tsx
+++ b/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';
--- a/src/ui/components/StackTrace.tsx
+++ b/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')(
-  ({
-    padded,
-    backgroundColor,
-  }: {
-    padded?: boolean;
-    backgroundColor?: BackgroundColorProperty;
-  }) => ({
-    padding: padded ? 10 : 0,
-    backgroundColor,
-  }),
-);
+const Padder = styled.div<{
+  padded?: boolean;
+  backgroundColor?: BackgroundColorProperty;
+}>(({padded, backgroundColor}) => ({
+  padding: padded ? 10 : 0,
+  backgroundColor,
+}));
 Padder.displayName = 'StackTrace:Padder';

-const Container = styled('div')(
-  ({isCrash, padded}: {isCrash?: boolean; padded?: boolean}) => ({
+const Container = styled.div<{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)(
-  ({isCrash, isBold}: {isCrash?: boolean; isBold?: boolean}) => ({
+const Line = styled(Text)<{isCrash?: boolean; isBold?: boolean}>(
+  ({isCrash, isBold}) => ({
    color: isCrash ? colors.red : colors.light80,
    fontWeight: isBold ? 'bold' : 'normal',
  }),
--- a/src/ui/components/StarButton.tsx
+++ b/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',
--- a/src/ui/components/StatusIndicator.tsx
+++ b/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')(
-  ({statusColor, diameter = 10, title}: Props) => ({
+const StatusIndicator = styled.div<Props>(
+  ({statusColor, diameter = 10, title}) => ({
    alignSelf: 'center',
    backgroundColor: statusColor,
    border: `1px solid ${colors.blackAlpha30}`,
--- a/src/ui/components/Tabs.tsx
+++ b/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')(
-  (props: {
-    active?: boolean;
-    width?: WidthProperty<number>;
-    container?: boolean;
-  }) => ({
-    background: props.container
-      ? props.active
-        ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
-        : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
-      : props.active
-      ? colors.light15
-      : colors.light02,
-    borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
-    boxShadow:
-      props.active && props.container
-        ? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
-        : 'none',
-    color: props.container && props.active ? colors.white : colors.dark80,
-    flex: props.container ? 'unset' : 1,
-    top: props.container ? -11 : 0,
-    fontWeight: 500,
-    fontSize: 13,
-    lineHeight: props.container ? '22px' : '28px',
-    overflow: 'hidden',
-    padding: '0 10px',
-    position: 'relative',
-    textAlign: 'center',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    '&:first-child': {
-      borderTopLeftRadius: props.container ? 3 : 0,
-      borderBottomLeftRadius: props.container ? 3 : 0,
-    },
-    '&:last-child': {
-      borderTopRightRadius: props.container ? 3 : 0,
-      borderBottomRightRadius: props.container ? 3 : 0,
-    },
-    '&:hover': {
-      backgroundColor: props.active ? colors.light15 : colors.light05,
-    },
-  }),
-);
+const TabListItem = styled.div<{
+  active?: boolean;
+  width?: WidthProperty<number>;
+  container?: boolean;
+}>(props => ({
+  background: props.container
+    ? props.active
+      ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
+      : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
+    : props.active
+    ? colors.light15
+    : colors.light02,
+  borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
+  boxShadow:
+    props.active && props.container
+      ? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
+      : 'none',
+  color: props.container && props.active ? colors.white : colors.dark80,
+  flex: props.container ? 'unset' : 1,
+  top: props.container ? -11 : 0,
+  fontWeight: 500,
+  fontSize: 13,
+  lineHeight: props.container ? '22px' : '28px',
+  overflow: 'hidden',
+  padding: '0 10px',
+  position: 'relative',
+  textAlign: 'center',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  '&:first-child': {
+    borderTopLeftRadius: props.container ? 3 : 0,
+    borderBottomLeftRadius: props.container ? 3 : 0,
+  },
+  '&:last-child': {
+    borderTopRightRadius: props.container ? 3 : 0,
+    borderBottomRightRadius: props.container ? 3 : 0,
+  },
+  '&:hover': {
+    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);
--- a/src/ui/components/TabsContainer.tsx
+++ b/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)',
--- a/src/ui/components/Text.tsx
+++ b/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')(
-  (props: {
-    color?: ColorProperty;
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-    align?: TextAlignProperty;
-    size?: FontSizeProperty<number>;
-    code?: boolean;
-    family?: FontFamilyProperty;
-    selectable?: boolean;
-    wordWrap?: WordWrapProperty;
-    whiteSpace?: WhiteSpaceProperty;
-    cursor?: CursorProperty;
-  }) => ({
-    color: props.color ? props.color : 'inherit',
-    cursor: props.cursor ? props.cursor : 'auto',
-    display: 'inline',
-    fontWeight: props.bold ? 'bold' : 'inherit',
-    fontStyle: props.italic ? 'italic' : 'normal',
-    textAlign: props.align || 'left',
-    fontSize: props.size == null && props.code ? 12 : props.size,
-    textDecoration: props.underline ? 'underline' : 'initial',
-    fontFamily: props.code
-      ? 'SF Mono, Monaco, Andale Mono, monospace'
-      : props.family,
-    overflow: props.code ? 'auto' : 'visible',
-    userSelect:
-      props.selectable ||
-      (props.code && typeof props.selectable === 'undefined')
-        ? 'text'
-        : 'none',
-    wordWrap: props.code ? 'break-word' : props.wordWrap,
-    whiteSpace:
-      props.code && typeof props.whiteSpace === 'undefined'
-        ? 'pre'
-        : props.whiteSpace,
-  }),
-);
+const Text = styled.span<{
+  color?: ColorProperty;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  align?: TextAlignProperty;
+  size?: FontSizeProperty<number>;
+  code?: boolean;
+  family?: FontFamilyProperty;
+  selectable?: boolean;
+  wordWrap?: WordWrapProperty;
+  whiteSpace?: WhiteSpaceProperty;
+  cursor?: CursorProperty;
+}>(props => ({
+  color: props.color ? props.color : 'inherit',
+  cursor: props.cursor ? props.cursor : 'auto',
+  display: 'inline',
+  fontWeight: props.bold ? 'bold' : 'inherit',
+  fontStyle: props.italic ? 'italic' : 'normal',
+  textAlign: props.align || 'left',
+  fontSize: props.size == null && props.code ? 12 : props.size,
+  textDecoration: props.underline ? 'underline' : 'initial',
+  fontFamily: props.code
+    ? 'SF Mono, Monaco, Andale Mono, monospace'
+    : props.family,
+  overflow: props.code ? 'auto' : 'visible',
+  userSelect:
+    props.selectable || (props.code && typeof props.selectable === 'undefined')
+      ? 'text'
+      : 'none',
+  wordWrap: props.code ? 'break-word' : props.wordWrap,
+  whiteSpace:
+    props.code && typeof props.whiteSpace === 'undefined'
+      ? 'pre'
+      : props.whiteSpace,
+}));
 Text.displayName = 'Text';

 export default Text;
--- a/src/ui/components/TextParagraph.tsx
+++ b/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': {
--- a/src/ui/components/Textarea.tsx
+++ b/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')(
-  ({
-    compact,
-    readOnly,
-    valid,
-  }: {
-    compact?: boolean;
-    readOnly?: boolean;
-    valid?: boolean;
-  }) => ({
-    ...inputStyle({
-      compact: compact || false,
-      readOnly: readOnly || false,
-      valid: valid !== false,
-    }),
-    lineHeight: 'normal',
-    padding: compact ? '5px' : '8px',
-    resize: 'none',
+const Textarea = styled.textarea<{
+  compact?: boolean;
+  readOnly?: boolean;
+  valid?: boolean;
+}>(({compact, readOnly, valid}) => ({
+  ...inputStyle({
+    compact: compact || false,
+    readOnly: readOnly || false,
+    valid: valid !== false,
  }),
-);
+  lineHeight: 'normal',
+  padding: compact ? '5px' : '8px',
+  resize: 'none',
+}));
 Textarea.displayName = 'Textarea';

 export default Textarea;
--- a/src/ui/components/ToggleSwitch.tsx
+++ b/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,
--- a/src/ui/components/Toolbar.tsx
+++ b/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)(
-  (props: {position?: 'bottom' | 'top'; compact?: boolean}) => ({
-    backgroundColor: colors.light02,
-    borderBottom:
-      props.position === 'bottom'
-        ? 'none'
-        : `1px solid ${colors.sectionHeaderBorder}`,
-    borderTop:
-      props.position === 'bottom'
-        ? `1px solid ${colors.sectionHeaderBorder}`
-        : 'none',
-    flexShrink: 0,
-    height: props.compact ? 28 : 42,
-    lineHeight: '32px',
-    alignItems: 'center',
-    padding: 6,
-    width: '100%',
-  }),
-);
+const Toolbar = styled(FlexRow)<{
+  position?: 'bottom' | 'top';
+  compact?: boolean;
+}>(props => ({
+  backgroundColor: colors.light02,
+  borderBottom:
+    props.position === 'bottom'
+      ? 'none'
+      : `1px solid ${colors.sectionHeaderBorder}`,
+  borderTop:
+    props.position === 'bottom'
+      ? `1px solid ${colors.sectionHeaderBorder}`
+      : 'none',
+  flexShrink: 0,
+  height: props.compact ? 28 : 42,
+  lineHeight: '32px',
+  alignItems: 'center',
+  padding: 6,
+  width: '100%',
+}));
 Toolbar.displayName = 'Toolbar';

 export const Spacer = styled(FlexBox)({
--- a/src/ui/components/Tooltip.tsx
+++ b/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}
--- a/src/ui/components/TooltipProvider.tsx
+++ b/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')(
-  (props: {
-    top: TopProperty<number>;
-    left: LeftProperty<number>;
-    bottom: BottomProperty<number>;
-    right: RightProperty<number>;
-    options: {
-      backgroundColor: BackgroundColorProperty;
-      lineHeight: LineHeightProperty<number>;
-      padding: PaddingProperty<number>;
-      borderRadius: BorderRadiusProperty<number>;
-      width: WidthProperty<number>;
-      maxWidth: MaxWidthProperty<number>;
-      color: ColorProperty;
-    };
-  }) => ({
-    position: 'absolute',
-    zIndex: 99999999999,
-    backgroundColor: props.options.backgroundColor,
-    lineHeight: props.options.lineHeight,
-    padding: props.options.padding,
-    borderRadius: props.options.borderRadius,
-    width: props.options.width,
-    maxWidth: props.options.maxWidth,
-    top: props.top,
-    left: props.left,
-    bottom: props.bottom,
-    right: props.right,
-    color: props.options.color,
-  }),
-);
+const TooltipBubble = styled.div<{
+  top: TopProperty<number>;
+  left: LeftProperty<number>;
+  bottom: BottomProperty<number>;
+  right: RightProperty<number>;
+  options: {
+    backgroundColor: BackgroundColorProperty;
+    lineHeight: LineHeightProperty<number>;
+    padding: PaddingProperty<number>;
+    borderRadius: BorderRadiusProperty<number>;
+    width: WidthProperty<number>;
+    maxWidth: MaxWidthProperty<number>;
+    color: ColorProperty;
+  };
+}>(props => ({
+  position: 'absolute',
+  zIndex: 99999999999,
+  backgroundColor: props.options.backgroundColor,
+  lineHeight: props.options.lineHeight,
+  padding: props.options.padding,
+  borderRadius: props.options.borderRadius,
+  width: props.options.width,
+  maxWidth: props.options.maxWidth,
+  top: props.top,
+  left: props.left,
+  bottom: props.bottom,
+  right: props.right,
+  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')(
-  (props: {
-    top: TopProperty<number>;
-    left: LeftProperty<number>;
-    bottom: BottomProperty<number>;
-    right: RightProperty<number>;
-    options: {
-      backgroundColor: BackgroundColorProperty;
-    };
-  }) => ({
-    position: 'absolute',
-    display: 'block',
-    whiteSpace: 'pre',
-    height: '10px',
-    width: '10px',
-    lineHeight: '0',
-    zIndex: 99999999998,
-    transform: 'rotate(45deg)',
-    backgroundColor: props.options.backgroundColor,
-    top: props.top,
-    left: props.left,
-    bottom: props.bottom,
-    right: props.right,
-  }),
-);
+const TooltipTail = styled.div<{
+  top: TopProperty<number>;
+  left: LeftProperty<number>;
+  bottom: BottomProperty<number>;
+  right: RightProperty<number>;
+  options: {
+    backgroundColor: BackgroundColorProperty;
+  };
+}>(props => ({
+  position: 'absolute',
+  display: 'block',
+  whiteSpace: 'pre',
+  height: '10px',
+  width: '10px',
+  lineHeight: '0',
+  zIndex: 99999999998,
+  transform: 'rotate(45deg)',
+  backgroundColor: props.options.backgroundColor,
+  top: props.top,
+  left: props.left,
+  bottom: props.bottom,
+  right: props.right,
+}));
 TooltipTail.displayName = 'TooltipProvider:TooltipTail';

 type TooltipProps = {
--- a/src/ui/components/VBox.tsx
+++ b/src/ui/components/VBox.tsx
@@ -7,7 +7,7 @@
 * @format
 */

-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexColumn from './FlexColumn';

 /**
--- a/Show More
+++ b/Show More