Fix misc warnings

packages/web/src/App.tsx

@@ -283,7 +283,7 @@ function App(props: WithWidth) {
 
   if (userSettings === undefined || userLoggedIn === undefined) {
     return (
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <CircularProgress className={classes.loader} />
       </Grid>
     );
@@ -307,7 +307,7 @@ function App(props: WithWidth) {
               pageStart={-1}
               hasMore={hasMore}
               loader={(
-                <Grid container justify="center">
+                <Grid key="asdf" container justifyContent="center">
                   <CircularProgress className={classes.loader} />
                 </Grid>
               )}
@@ -323,7 +323,7 @@ function App(props: WithWidth) {
                   onNotification={setNotification}
                 />
               ) : (
-                <>
+                <Grid key="qwerty">
                   <div className={classes.placeholderIconContainer}>
                     <span className={`material-icons-outlined ${classes.placeholderIcon}`}>
                       insert_photo
@@ -332,7 +332,7 @@ function App(props: WithWidth) {
                   <Typography className={classes.placeholderText}>
                     {t('Upload your first image')}
                   </Typography>
-                </>
+                </Grid>
               )}
             </InfiniteScroll>
           </Container>

packages/web/src/components/ImageGridList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridList, GridListTile } from '@material-ui/core';
+import { ImageList, ImageListItem } from '@material-ui/core';
 import { Image } from '../types';
 import ImageThumbnail from './ImageThumbnail';
 
@@ -14,17 +14,17 @@ const ImageGridListTile = ({
   onTileClick: (url: string) => void;
   onNotification: (text: string) => void;
 }) => (
-  <GridList cellHeight={160} cols={cols}>
+  <ImageList rowHeight={160} cols={cols}>
     {images.map((image) => (
-      <GridListTile key={image.filename}>
+      <ImageListItem key={image.filename}>
         <ImageThumbnail
           image={image}
           onTileClick={onTileClick}
           onNotification={onNotification}
         />
-      </GridListTile>
+      </ImageListItem>
     ))}
-  </GridList>
+  </ImageList>
 );
 
 export default React.memo(ImageGridListTile, (prevProps, nextProps) => {

packages/web/src/components/ImageThumbnail.tsx

@@ -1,4 +1,4 @@
-import { ButtonBase, GridListTileBar, IconButton } from '@material-ui/core';
+import { ButtonBase, ImageListItemBar, IconButton } from '@material-ui/core';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -92,8 +92,8 @@ const ImageThumbnail = ({ image, onTileClick, onNotification }:{
             </picture>
           </a>
         </ButtonBase>
-        <GridListTileBar
-          titlePosition="top"
+        <ImageListItemBar
+          position="top"
           actionIcon={(
             <IconButton
               className={classes.icon}

packages/web/src/components/LoginView.tsx

@@ -46,7 +46,7 @@ const LoginView = (
         spacing={0}
         direction="column"
         alignItems="center"
-        justify="center"
+        justifyContent="center"
         style={{ minHeight: '80vh' }}
       >
         <Grid item xs={10} md={4}>