Update more things

package.json

@@ -10,14 +10,13 @@
     "enzyme-to-json": "^3.4.3",
     "eslint": "^6.6.0",
     "eslint-loader": "^3.0.2",
-    "eslint-plugin-babel": "^4.1.1",
-    "eslint-plugin-flowtype": "2.34.0",
+    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.16.0",
     "jest": "^24.9.0",
     "jest-junit": "^9.0.0",
-    "mockdate": "^2.0.2",
+    "mockdate": "^2.0.5",
     "prettier": "^1.19.1",
     "react-dev-utils": "^9.1.0",
     "react-test-renderer": "^16.11.0",
@@ -32,50 +31,51 @@
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
     "@babel/register": "^7.7.0",
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
+    "@rebass/grid": "^6.1.0",
     "@sentry/browser": "^5.8.0",
     "@sentry/integrations": "^5.8.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-idx": "^2.4.0",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "case-sensitive-paths-webpack-plugin": "2.2.0",
     "chalk": "1.1.3",
-    "chart.js": "^2.7.2",
-    "classnames": "^2.2.5",
+    "chart.js": "^2.9.2",
+    "classnames": "^2.2.6",
     "dompurify": "^2.0.7",
-    "dotenv": "4.0.0",
+    "dotenv": "8.2.0",
+    "emotion-theming": "^10.0.19",
     "file-loader": "^4.2.0",
-    "fs-extra": "3.0.1",
-    "grid-styled": "^2.0.0-8",
+    "fs-extra": "8.1.0",
     "html-webpack-plugin": "^3.2.0",
     "idx": "^2.5.6",
-    "lodash": "^4.17.13",
+    "lodash": "^4.17.15",
     "marked": "^0.7.0",
-    "moment": "^2.18.1",
+    "moment": "^2.24.0",
     "object-assign": "4.1.1",
-    "percentile": "^1.2.0",
-    "promise": "7.1.1",
-    "prop-types": "^15.6.2",
+    "percentile": "^1.2.2",
+    "promise": "8.0.3",
+    "prop-types": "^15.7.2",
     "react": "^16.11.0",
-    "react-chartjs-2": "^2.7.4",
+    "react-chartjs-2": "^2.8.0",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.11.0",
     "react-gravatar": "^2.6.3",
-    "react-icon-base": "^2.0.8",
-    "react-icons": "^2.2.7",
-    "react-loadable": "^5.3.1",
-    "react-redux": "5",
+    "react-icon-base": "^2.1.2",
+    "react-icons": "^3.8.0",
+    "react-loadable": "^5.5.0",
+    "react-redux": "7.1.3",
     "react-router": "3",
     "react-select": "^1.0.0-rc.10",
-    "react-syntax-highlighter": "^6.1.1",
+    "react-syntax-highlighter": "^11.0.2",
     "react-transition-group": "^4.3.0",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "style-loader": "0.18.2",
-    "styled-components": "^4.4.1",
     "sw-precache-webpack-plugin": "^0.11.5",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-manifest-plugin": "^2.2.0",
-    "whatwg-fetch": "2.0.3"
+    "whatwg-fetch": "3.0.0"
   },
   "scripts": {
     "start": "node scripts/start.js",
@@ -162,7 +162,8 @@
       "plugin:react/recommended"
     ],
     "rules": {
-      "react/no-deprecated": "off"
+      "react/no-deprecated": "off",
+      "react/prop-types": "off"
     }
   },
   "volta": {

webapp/components/AggregateTestList.jsx

@@ -1,11 +1,9 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Flex, Box} from 'grid-styled';
+import {Flex, Box} from '@rebass/grid/emotion';
 import {Link} from 'react-router';
-import styled from 'styled-components';
-import ExpandIcon from 'react-icons/lib/md/expand-more';
-import CollapseIcon from 'react-icons/lib/md/expand-less';
-import HistoryIcon from 'react-icons/lib/md/history';
+import styled from '@emotion/styled';
+import {MdExpandLess, MdExpandMore, MdHistory} from 'react-icons/md';
 
 import Collapsable from './Collapsable';
 import {AggregateDuration} from './ObjectDuration';
@@ -43,9 +41,9 @@ class TestListItem extends Component {
               {test.name}
               <span className="toggle">
                 {this.state.expanded ? (
-                  <CollapseIcon size={12} />
+                  <MdExpandLess size={12} />
                 ) : (
-                  <ExpandIcon size={12} />
+                  <MdExpandMore size={12} />
                 )}
               </span>
             </TestLink>
@@ -64,7 +62,7 @@ class TestListItem extends Component {
           </Box>
           <Box width={40} style={{textAlign: 'right'}}>
             <Link to={`/${repo.full_name}/tests/${test.hash}`}>
-              <HistoryIcon size={20} />
+              <MdHistory size={20} />
             </Link>
           </Box>
         </Flex>

webapp/components/Badge.jsx

@@ -1,4 +1,5 @@
-import styled, {css} from 'styled-components';
+import {css} from '@emotion/core';
+import styled from '@emotion/styled';
 
 export default styled.span`
   font-size: 65%;

webapp/components/Breadcrumbs.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Link} from 'react-router';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const Breadcrumbs = styled.div`
   display: inline-block;

webapp/components/BuildCoverage.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Link} from 'react-router';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Section from '../components/Section';
 import {ResultGrid, Column, Header, Row} from '../components/ResultGrid';
@@ -251,9 +251,8 @@ export default class BuildCoverage extends Component {
             {!!result.build && (
               <p>
                 Data from{' '}
-                <Link to={`${repo.full_name}/builds/${result.build.number}`}>{`${
-                  repo.owner_name
-                }/${repo.name}#${result.build.number}`}</Link>
+                <Link
+                  to={`${repo.full_name}/builds/${result.build.number}`}>{`${repo.owner_name}/${repo.name}#${result.build.number}`}</Link>
               </p>
             )}
             <p>

webapp/components/BuildDetailsBase.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, {css} from 'styled-components';
+import {css} from '@emotion/core';
+import styled from '@emotion/styled';
 
 import AsyncPage from '../components/AsyncPage';
 import Badge from '../components/Badge';
@@ -12,7 +13,7 @@ import TabbedNav from '../components/TabbedNav';
 import TabbedNavItem from '../components/TabbedNavItem';
 import TimeSince from '../components/TimeSince';
 
-import MdClock from 'react-icons/lib/md/access-time';
+import {MdAccessTime} from 'react-icons/md';
 
 export default class BuildDetailsBase extends AsyncPage {
   static contextTypes = {
@@ -60,7 +61,7 @@ export default class BuildDetailsBase extends AsyncPage {
               </DurationWrapper>
             )}
             <Time>
-              <MdClock size="16" style={{marginRight: 5}} />
+              <MdAccessTime size="16" style={{marginRight: 5}} />
               {build.status === 'queued' || build.status === 'unknown' ? (
                 <span>
                   created <TimeSince date={build.created_at} />

webapp/components/BuildListItem.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import {Flex, Box} from 'grid-styled';
+import styled from '@emotion/styled';
+import {Flex, Box} from '@rebass/grid/emotion';
 
 import ListItemLink from './ListItemLink';
 import ObjectAuthor from './ObjectAuthor';
@@ -37,7 +37,7 @@ export default class BuildListItem extends Component {
         <Row>
           <Column>
             <Flex>
-              <Box width={15} mr={8}>
+              <Box width={15} mr={2}>
                 <ObjectResult data={build} />
               </Box>
               <Box flex="1" style={{minWidth: 0}}>

webapp/components/BuildOverviewBase.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import marked from 'marked';
 import {sanitize} from 'dompurify';
 
@@ -121,9 +121,7 @@ export default class BuildOverviewBase extends AsyncPage {
               <Button
                 size="small"
                 type="light"
-                href={`https://github.com/${repo.owner_name}/${repo.name}/commit/${
-                  revision.sha
-                }`}>
+                href={`https://github.com/${repo.owner_name}/${repo.name}/commit/${revision.sha}`}>
                 View on GitHub
               </Button>
             </div>

webapp/components/BundleList.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Flex, Box} from 'grid-styled';
-import styled from 'styled-components';
+import {Flex, Box} from '@rebass/grid/emotion';
+import styled from '@emotion/styled';
 
 import Collapsable from './Collapsable';
 import FileSize from './FileSize';

webapp/components/Button.jsx

@@ -1,5 +1,6 @@
 import {Link} from 'react-router';
-import styled, {css} from 'styled-components';
+import {css} from '@emotion/core';
+import styled from '@emotion/styled';
 
 // TODO(dcramer): how do we avoid copy pasta?
 export const ButtonGroup = styled.div`

webapp/components/ChangeRequestListItem.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import {Flex, Box} from 'grid-styled';
+import styled from '@emotion/styled';
+import {Flex, Box} from '@rebass/grid/emotion';
 
 import BuildListItem from './BuildListItem';
 import ListItemLink from './ListItemLink';
@@ -50,7 +50,7 @@ export default class ChangeRequestListItem extends Component {
         <Row>
           <Column>
             <Flex>
-              <Box width={15} mr={8} />
+              <Box width={15} mr={2} />
               <Box flex="1" style={{minWidth: 0}}>
                 <Message>{changeRequest.message.split('\n')[0]}</Message>
                 <Meta>

webapp/components/Collapsable.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import {Column, Row} from './ResultGrid';
 

webapp/components/Container.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default styled.div`
   display: flex;

webapp/components/Content.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default styled.div`
   background: #fff;

webapp/components/Fieldset.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default styled.fieldset`
   border: 0;

webapp/components/Footer.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 class UnstyledFooter extends Component {
   render() {

webapp/components/FormActions.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default styled.div`
   border-top: 1px solid #e9ebec;

webapp/components/Header.jsx

@@ -1,15 +1,14 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Link} from 'react-router';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import {connect} from 'react-redux';
 import Select from 'react-select';
 
 import {logout} from '../actions/auth';
 import Logo from '../assets/Logo';
 
-import MdSettings from 'react-icons/lib/md/settings';
-import MdLogout from 'react-icons/lib/md/exit-to-app';
+import {MdExitToApp, MdSettings} from 'react-icons/md';
 
 const NavLink = styled(Link)`
   display: inline-block;
@@ -64,7 +63,7 @@ class UnstyledHeader extends Component {
               <MdSettings size={24} />
             </NavLink>
             <NavLink onClick={props.logout}>
-              <MdLogout size={24} />
+              <MdExitToApp size={24} />
             </NavLink>
           </div>
         )}

webapp/components/HorizontalHeader.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Link} from 'react-router';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Logo from '../assets/Logo';
 

webapp/components/Input.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default styled.input`
   padding: 4px 8px;

webapp/components/Label.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default styled.label`
   font-size: 13px;

webapp/components/ListItemLink.jsx

@@ -1,5 +1,5 @@
 import {Link} from 'react-router';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const ListItemLink = styled(Link)`
   display: block;

webapp/components/Nav.jsx

@@ -1,5 +1,5 @@
 import {Link} from 'react-router';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const Nav = styled.div`
   display: inline-block;

webapp/components/NavHeading.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default styled(({...props}) => {
   return <div {...props}>{props.children}</div>;

webapp/components/ObjectAuthor.jsx

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import idx from 'idx';
 import Gravatar from 'react-gravatar';
-import MdPerson from 'react-icons/lib/md/person';
+import {MdPerson} from 'react-icons/md';
 
 const Avatar = styled.span`
   img {