Begin rework of applications page

Author: gregpalace

app/components/Applications.tsx

@@ -1,5 +1,14 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Grid, IconButton, Modal, Paper } from '@material-ui/core';
+import {
+  Button,
+  Grid,
+  IconButton,
+  Modal,
+  Paper,
+  Card,
+  CardHeader,
+  CardContent,
+} from '@material-ui/core';
 import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
 import { makeStyles } from '@material-ui/core/styles';
 import { DashboardContext } from '../context/DashboardContext';
@@ -42,11 +51,7 @@ const Applications = () => {
       marginBottom: theme.spacing(1),
     },
     hover: {
-      position: 'relative',
-      top: '5%',
-      right: '5%',
-      height: 120,
-      width: 120,
+      color: 'white',
       boxShadow: 'none',
       '&:hover, &.Mui-focusVisible': { color: 'red' },
     },
@@ -58,21 +63,17 @@ const Applications = () => {
     <>
       {applications.map((app: string, i: number | any | string | undefined) => (
         <Grid item xs={6} key={i}>
-          <Paper
-            className={classes.paper}
-            id={i}
-            key={i}
-            onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app, i)}
-          >
-            {app}
-            <IconButton
-              aria-label="Delete"
-              onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app, i)}
-              color="primary"
-            >
-              <DeleteForeverOutlinedIcon className={classes.hover} />
-            </IconButton>
-          </Paper>
+          <Card className={classes.paper}>
+            <CardHeader
+              avatar={
+                <Button
+                  className={classes.hover}
+                  startIcon={<DeleteForeverOutlinedIcon />}
+                ></Button>
+              }
+            ></CardHeader>
+            <CardContent>{app}</CardContent>
+          </Card>
         </Grid>
       ))}
       <Modal open={open} onClose={() => setOpen(false)}>
@@ -83,3 +84,19 @@ const Applications = () => {
 };
 
 export default Applications;
+
+//           <IconButton
+//             className={classes.btnStyle}
+//             aria-label="Delete"
+//             onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app, i)}
+//             color="primary"
+//           >
+//             <DeleteForeverOutlinedIcon className={classes.hover} />
+//           </IconButton>
+
+// <Paper
+// className={classes.paper}
+// id={i}
+// key={i}
+// onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app, i)}
+// >

app/components/Occupied.tsx

@@ -13,7 +13,7 @@ const Occupied: React.FC = () => {
   const useStyles = makeStyles(theme => ({
     paper: {
       color: theme.palette.text.secondary,
-      // whiteSpace: 'nowrap',
+      height: 340,
       background: 'rgb(33, 34, 41)',
       boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
       '&:hover, &.Mui-focusVisible': { background: 'rgb(33, 34, 41)' },
@@ -52,11 +52,11 @@ const Occupied: React.FC = () => {
         <AddModal setOpen={setOpen} />
       </Modal>
       <Grid className={classes.grid} container spacing={3}>
+        <Button className={classes.paper} onClick={() => setOpen(true)}>
+          <AddCircleOutlineTwoToneIcon className={classes.icon} />
+        </Button>
         <Applications />
       </Grid>
-      <Button className={classes.paper} onClick={() => setOpen(true)}>
-        <AddCircleOutlineTwoToneIcon className={classes.icon} />
-      </Button>
     </div>
   );
 };