cools update

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

photo/src/testIL.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import IconButton from '@material-ui/core/IconButton';
+import InfoIcon from '@material-ui/icons/Info';
+import tileData from './tileData';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'space-around',
+        overflow: 'hidden',
+        backgroundColor: theme.palette.background.paper,
+    },
+    gridList: {
+        width: '100%',
+        height: '100%',
+    },
+    icon: {
+        color: 'rgba(255, 255, 255, 0.54)',
+    },
+}));
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ *   {
+ *     img: image,
+ *     title: 'Image',
+ *     author: 'author',
+ *   },
+ *   {
+ *     [etc...]
+ *   },
+ * ];
+ */
+export default function TitlebarGridList() {
+    const classes = useStyles();
+
+    return ( <
+        div className = { classes.root } >
+        <
+        GridList cellHeight = { 180 }
+        cols = { 5 }
+        className = { classes.gridList } >
+        <
+        GridListTile key = "Subheader"
+        cols = { 5 }
+        style = {
+            { height: 'auto' }
+        } >
+        <
+        ListSubheader component = "div" > December < /ListSubheader> < /
+        GridListTile > {
+            tileData.map((tile) => ( <
+                    GridListTile key = { tile.img } >
+                    <
+                    img src = { tile.img }
+                    alt = { tile.title }
+                    /> <
+                    GridListTileBar title = { tile.title }
+                    subtitle = { < span > by: { tile.author } < /span>}
+                        actionIcon = { <
+                            IconButton
+                            className = { classes.icon } >
+                            <
+                            InfoIcon / >
+                            <
+                            /IconButton>
+                        }
+                        /> < /
+                        GridListTile >
+                    ))
+            } <
+            /GridList> < /
+            div >
+        );
+    }

photo/src/testM.js

@@ -18,7 +18,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import MailIcon from '@material-ui/icons/Mail';
-import ImageList from './ImageList';
+import ImageList from './testIL';
 import PhotoIcon from '@material-ui/icons/Photo';
 import ShareIcon from '@material-ui/icons/Share';
 import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
@@ -141,6 +141,9 @@ export default function ButtonAppBar() {
         div className = { classes.root } >
         <
         AppBar position = "fixed"
+        style = {
+            { background: '#2196f3' }
+        }
         className = {
             clsx(classes.appBar, {
                 [classes.appBarShift]: open,
@@ -169,9 +172,6 @@ export default function ButtonAppBar() {
         startIcon = { < CloudUploadIcon / > } >
         Upload <
         /Button><IconButton style={{ color: '#ffffff' }} aria-label="delete"> <
-        CloudUploadIcon / >
-        <
-        /IconButton> <IconButton style={{ color: '#ffffff' }} aria-label="delete"> <
         HelpOutlineIcon / >
         <
         /IconButton> <IconButton style={{ color: '#ffffff' }} aria-label="delete"> <