new images

src/pages/images.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardMedia from '@material-ui/core/CardMedia';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
+import Grid from '@material-ui/core/Grid';
+import CardContent from '@material-ui/core/CardContent';
 import Popover from '@material-ui/core/Popover';
 import Button from '@material-ui/core/Button';
 import Pagination from '@material-ui/lab/Pagination';
@@ -28,12 +32,17 @@ const useStyles = makeStyles(theme => ({
     zIndex: theme.zIndex.drawer + 1,
     color: '#fff',
   },
+  gridList: {
+    width: theme.zIndex.drawer + 1,
+    height: 450,
+  },
 }));
 
 export default function Images({ config }: { config: ConfigUploader }) {
   const classes = useStyles();
   const router = useRouter();
   const state = store.getState();
+
   const [loading, setLoading] = React.useState(true);
   const [chunks, setChunks] = React.useState([]);
   const [images, setImages] = React.useState<Image[]>([]);
@@ -96,20 +105,25 @@ export default function Images({ config }: { config: ConfigUploader }) {
         </Backdrop>
         {!loading ? (
           <Paper elevation={3} className={classes.padding}>
-            <GridList cols={3}>
+            <Grid container spacing={2}>
               {images.map(d => {
                 const t = new URL(window.location.href);
                 t.pathname = `${config ? config.route : '/u'}/${d.file}`;
                 return (
-                  <GridListTile key={d.id} cols={1}>
-                    <img
-                      src={t.toString()}
-                      onClick={e => setImageOpenPopover(e, d)}
-                    />
-                  </GridListTile>
+                  <Grid item xs={12} sm={6} key={d.id} onClick={e => setImageOpenPopover(e, d)}>
+                    <Card>
+                      <CardActionArea>
+                        <CardMedia
+                          component="img"
+                          height="140"
+                          image={t.toString()}
+                        />
+                      </CardActionArea>
+                    </Card>
+                  </Grid>
                 );
               })}
-            </GridList>
+            </Grid>
             <Pagination count={chunks.length} onChange={changePage} />
           </Paper>
         ) : null}