Switch to using makeStyles

src/AllRoutes.tsx

@@ -1,24 +1,22 @@
-import React, { Suspense } from 'react';
-import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
+import React, {Suspense} from 'react';
+import {BrowserRouter, Link, Route, Routes} from 'react-router-dom';
 import ActiveRepositoriesDrawer from './scenes/Header/ActiveRepositoriesDrawer';
 import AppBar from '@mui/material/AppBar';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
+import {makeStyles} from '@mui/styles';
 import BookIcon from '@mui/icons-material/Book';
 import MenuIcon from '@mui/icons-material/Menu';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import classNames from 'classnames';
 import ViewerTopRepositories from './scenes/Profile/ViewerTopRepositories';
 import CirrusLinearProgress from './components/common/CirrusLinearProgress';
 import ThemeSwitchButton from './components/common/ThemeSwitchButton';
-import { atom, useRecoilState } from 'recoil';
-import { localStorageEffect } from './utils/recoil';
-import { Container, Tooltip, useTheme } from '@mui/material';
+import {atom, useRecoilState} from 'recoil';
+import {localStorageEffect} from './utils/recoil';
+import {Container, Tooltip, useTheme} from '@mui/material';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import GCPStatus from './components/status/GCPStatus';
 import GitHubStatus from './components/status/GitHubStatus';
@@ -54,8 +52,8 @@ const AsyncApiExplorerRenderer = React.lazy(() => import('./components/explorer/
 
 const drawerWidth = 360;
 
-export const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     flex: {
       flex: 1,
     },
@@ -70,7 +68,7 @@ export const styles = theme =>
       marginLeft: 8,
     },
     titleShift: {
-      marginLeft: 2 * theme.spacing(1.0),
+      marginLeft: theme.spacing(2.0),
     },
     marginRight: {
       marginRight: theme.spacing(1.0),
@@ -131,17 +129,17 @@ export const styles = theme =>
       padding: 0,
       marginLeft: 0,
     },
-  });
+  };
+});
 
 const cirrusOpenDrawerState = atom({
   key: 'CirrusOpenDrawer',
   default: false,
   effects_UNSTABLE: [localStorageEffect('CirrusOpenDrawer')],
 });
 
-function AllRoutes(props: WithStyles<typeof styles>) {
-  let { classes } = props;
-
+function AllRoutes() {
+  let classes = useStyles();
   let theme = useTheme();
   const [openDrawer, setOpenDrawer] = useRecoilState(cirrusOpenDrawerState);
 
@@ -277,4 +275,4 @@ function AllRoutes(props: WithStyles<typeof styles>) {
   );
 }
 
-export default withStyles(styles)(AllRoutes);
+export default AllRoutes;

src/components/account/AccountInformation.tsx

@@ -1,33 +1,32 @@
 import React from 'react';
-import { createFragmentContainer } from 'react-relay';
-import { graphql } from 'babel-plugin-relay/macro';
+import {createFragmentContainer} from 'react-relay';
+import {graphql} from 'babel-plugin-relay/macro';
 
 import Avatar from '@mui/material/Avatar';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { navigateHelper } from '../../utils/navigateHelper';
-import { useNavigate } from 'react-router-dom';
-import { AccountInformation_viewer } from './__generated__/AccountInformation_viewer.graphql';
+import {navigateHelper} from '../../utils/navigateHelper';
+import {useNavigate} from 'react-router-dom';
+import {AccountInformation_viewer} from './__generated__/AccountInformation_viewer.graphql';
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import DirectionsRun from '@mui/icons-material/DirectionsRun';
 import Button from '@mui/material/Button';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
+import {makeStyles} from '@mui/styles';
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     authButton: {
       color: theme.palette.primary.contrastText,
       marginLeft: 10,
     },
-  });
+  };
+});
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   viewer: AccountInformation_viewer;
 }
 
@@ -43,7 +42,8 @@ function AccountInformation(props: Props) {
     setAnchorEl(null);
   };
 
-  let { viewer, classes } = props;
+  let { viewer } = props;
+  let classes = useStyles();
 
   if (!viewer) {
     return (
@@ -95,7 +95,7 @@ function AccountInformation(props: Props) {
   );
 }
 
-export default createFragmentContainer(withStyles(styles)(AccountInformation), {
+export default createFragmentContainer(AccountInformation, {
   viewer: graphql`
     fragment AccountInformation_viewer on User {
       avatarURL

src/components/account/OwnerRepositoryList.tsx

@@ -5,32 +5,32 @@ import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import Tooltip from '@mui/material/Tooltip';
 import LastDefaultBranchBuildRow from '../builds/LastDefaultBranchBuildRow';
-import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
+import {makeStyles} from '@mui/styles';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
-import { createFragmentContainer } from 'react-relay';
-import { graphql } from 'babel-plugin-relay/macro';
-import { OwnerRepositoryList_info } from './__generated__/OwnerRepositoryList_info.graphql';
-import createStyles from '@mui/styles/createStyles';
+import {createFragmentContainer} from 'react-relay';
+import {graphql} from 'babel-plugin-relay/macro';
+import {OwnerRepositoryList_info} from './__generated__/OwnerRepositoryList_info.graphql';
 
-let styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     toolbar: {
       paddingLeft: 14,
       background: theme.palette.action.disabledBackground,
     },
-  });
+  };
+});
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   info: OwnerRepositoryList_info;
 }
 
 let OwnerRepositoryList = (props: Props) => {
-  let { classes, info } = props;
+  let { info } = props;
+  let classes = useStyles();
 
   let organizationSettings = null;
 
@@ -67,7 +67,7 @@ let OwnerRepositoryList = (props: Props) => {
   );
 };
 
-export default createFragmentContainer(withStyles(styles)(OwnerRepositoryList), {
+export default createFragmentContainer(OwnerRepositoryList, {
   info: graphql`
     fragment OwnerRepositoryList_info on OwnerInfo {
       platform

src/components/account/UserProfile.tsx

@@ -1,23 +1,21 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { createFragmentContainer } from 'react-relay';
-import { graphql } from 'babel-plugin-relay/macro';
+import React, {useEffect} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {createFragmentContainer} from 'react-relay';
+import {graphql} from 'babel-plugin-relay/macro';
 import Tooltip from '@mui/material/Tooltip';
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
+import {makeStyles} from '@mui/styles';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
-import { navigateHelper } from '../../utils/navigateHelper';
+import {navigateHelper} from '../../utils/navigateHelper';
 import IconButton from '@mui/material/IconButton';
-import { UserProfile_user } from './__generated__/UserProfile_user.graphql';
-import { Helmet as Head } from 'react-helmet';
+import {UserProfile_user} from './__generated__/UserProfile_user.graphql';
+import {Helmet as Head} from 'react-helmet';
 import Settings from '@mui/icons-material/Settings';
 import OwnerPlatformIcon from '../icons/OwnerPlatformIcon';
-import { List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+import {List, ListItem, ListItemAvatar, ListItemText} from '@mui/material';
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     title: {
       backgroundColor: theme.palette.action.disabledBackground,
     },
@@ -28,16 +26,18 @@ const styles = theme =>
       display: 'flex',
       alignItems: 'center',
     },
-  });
+  };
+});
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   user: UserProfile_user;
 }
 
 function UserProfile(props: Props) {
   const navigate = useNavigate();
 
-  let { user, classes } = props;
+  let { user } = props;
+  let classes = useStyles();
 
   useEffect(() => {
     // in case of only one owner (like only the user with no organizations)
@@ -85,7 +85,7 @@ function UserProfile(props: Props) {
   );
 }
 
-export default createFragmentContainer(withStyles(styles)(UserProfile), {
+export default createFragmentContainer(UserProfile, {
   user: graphql`
     fragment UserProfile_user on User {
       relatedOwners {

src/components/account/ViewerBuildList.tsx

@@ -1,12 +1,11 @@
-import { useState } from 'react';
-import { useRefetchableFragment } from 'react-relay';
-import { graphql } from 'babel-plugin-relay/macro';
-import { useNavigate } from 'react-router-dom';
-import { Helmet as Head } from 'react-helmet';
-
-import { WithStyles } from '@mui/styles';
-import { Box, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import withStyles from '@mui/styles/withStyles';
+import {useState} from 'react';
+import {useRefetchableFragment} from 'react-relay';
+import {graphql} from 'babel-plugin-relay/macro';
+import {useNavigate} from 'react-router-dom';
+import {Helmet as Head} from 'react-helmet';
+
+import {makeStyles} from '@mui/styles';
+import {Box, ToggleButton, ToggleButtonGroup} from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -19,48 +18,51 @@ import RepositoryNameChip from '../chips/RepositoryNameChip';
 import BuildBranchNameChip from '../chips/BuildBranchNameChip';
 import BuildStatusChip from '../chips/BuildStatusChip';
 import BuildChangeChip from '../chips/BuildChangeChip';
-import { navigateBuildHelper } from '../../utils/navigateHelper';
+import {navigateBuildHelper} from '../../utils/navigateHelper';
 import usePageWidth from '../../utils/usePageWidth';
-import { isBuildFinalStatus } from '../../utils/status';
+import {isBuildFinalStatus} from '../../utils/status';
 import BuildsTable from '../../components/builds/BuildsTable';
 import MarkdownTypography from '../common/MarkdownTypography';
-import { ViewerBuildListRefetchQuery } from './__generated__/ViewerBuildListRefetchQuery.graphql';
-import { ViewerBuildList_viewer$key } from './__generated__/ViewerBuildList_viewer.graphql';
+import {ViewerBuildListRefetchQuery} from './__generated__/ViewerBuildListRefetchQuery.graphql';
+import {ViewerBuildList_viewer$key} from './__generated__/ViewerBuildList_viewer.graphql';
 
 // todo: move custom values to mui theme adjustments
-const styles = theme => ({
-  paper: {
-    marginTop: theme.spacing(4),
-    padding: theme.spacing(1.0, 2.5, 1.5),
-    boxShadow: '0 16px 52px rgb(0 0 0 / 13%)',
-    borderRadius: 4 * theme.shape.borderRadius,
-  },
-  header: {
-    paddingLeft: 14,
-    justifyContent: 'space-between',
-  },
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-  cell: {
-    width: '100%',
-    maxWidth: '600px',
-  },
-  emptyBuilds: {
-    margin: theme.spacing(1.0),
-    marginLeft: 14,
-  },
-  padding: {
-    margin: theme.spacing(0.5),
-  },
+const useStyles = makeStyles(theme => {
+  return {
+    paper: {
+      marginTop: theme.spacing(4),
+      padding: theme.spacing(1.0, 2.5, 1.5),
+      boxShadow: '0 16px 52px rgb(0 0 0 / 13%)',
+      borderRadius: 4 * theme.shape.borderRadius,
+    },
+    header: {
+      paddingLeft: 14,
+      justifyContent: 'space-between',
+    },
+    chip: {
+      margin: theme.spacing(0.5),
+    },
+    cell: {
+      width: '100%',
+      maxWidth: '600px',
+    },
+    emptyBuilds: {
+      margin: theme.spacing(1.0),
+      marginLeft: 14,
+    },
+    padding: {
+      margin: theme.spacing(0.5),
+    },
+  };
 });
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   viewer: ViewerBuildList_viewer$key;
 }
 
 function ViewerBuildList(props: Props) {
-  let { viewer, classes } = props;
+  let { viewer } = props;
+  let classes = useStyles();
   const pageWidth = usePageWidth();
   const isNewDesign = pageWidth > 900;
 
@@ -96,8 +98,6 @@ function ViewerBuildList(props: Props) {
   let navigate = useNavigate();
 
   function buildItem(build) {
-    let { classes } = props;
-
     return (
       <TableRow
         key={build.id}
@@ -194,4 +194,4 @@ function ViewerBuildList(props: Props) {
   );
 }
 
-export default withStyles(styles)(ViewerBuildList);
+export default ViewerBuildList;