Align Cards and Add Card Actions

Author: gregpalace

app/components/Applications.tsx

@@ -1,14 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import {
-  Button,
-  Grid,
-  IconButton,
-  Modal,
-  Paper,
-  Card,
-  CardHeader,
-  CardContent,
-} from '@material-ui/core';
+import { Button, Grid, Modal, Card, CardHeader, CardContent, CardActions } from '@material-ui/core';
 import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
 import { makeStyles } from '@material-ui/core/styles';
 import { DashboardContext } from '../context/DashboardContext';
@@ -48,13 +39,19 @@ const Applications = () => {
       background: 'rgb(33, 34, 41)',
       border: '2px solid black',
       boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-      marginBottom: theme.spacing(1),
     },
     hover: {
       color: 'white',
       boxShadow: 'none',
       '&:hover, &.Mui-focusVisible': { color: 'red' },
     },
+    btnStyle: {
+      position: 'relative',
+      top: 50,
+      margin: '0 auto',
+      color: 'rgb(255, 243, 72)',
+      backgroundColor: 'grey',
+    },
   }));
 
   const classes = useStyles();
@@ -63,7 +60,11 @@ const Applications = () => {
     <>
       {applications.map((app: string, i: number | any | string | undefined) => (
         <Grid item xs={6} key={i}>
-          <Card className={classes.paper}>
+          <Card
+            className={classes.paper}
+            variant="outlined"
+            onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app, i)}
+          >
             <CardHeader
               avatar={
                 <Button
@@ -73,6 +74,11 @@ const Applications = () => {
               }
             ></CardHeader>
             <CardContent>{app}</CardContent>
+            <CardActions>
+              <Button className={classes.btnStyle} size="large">
+                Click to View
+              </Button>
+            </CardActions>
           </Card>
         </Grid>
       ))}
@@ -84,19 +90,3 @@ 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

@@ -14,13 +14,17 @@ const Occupied: React.FC = () => {
     paper: {
       color: theme.palette.text.secondary,
       height: 340,
+      top: 10,
+      width: '49%',
+      marginLeft: '.5%',
       background: 'rgb(33, 34, 41)',
       boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
       '&:hover, &.Mui-focusVisible': { background: 'rgb(33, 34, 41)' },
     },
     grid: {
       margin: '0 auto',
       maxWidth: '75vw',
+      maxHeight: '75vh',
     },
     icon: {
       width: '100px',
@@ -31,6 +35,7 @@ const Occupied: React.FC = () => {
     },
     heroContent: {
       padding: theme.spacing(8, 0, 6),
+      backgroundColor: '#e8e8e8',
     },
   }));
 
@@ -40,7 +45,6 @@ const Occupied: React.FC = () => {
     <div>
       <Typography
         className={classes.heroContent}
-        // component="h1"
         variant="h1"
         align="center"
         color="textPrimary"
@@ -52,10 +56,10 @@ const Occupied: React.FC = () => {
         <AddModal setOpen={setOpen} />
       </Modal>
       <Grid className={classes.grid} container spacing={3}>
+        <Applications />
         <Button className={classes.paper} onClick={() => setOpen(true)}>
           <AddCircleOutlineTwoToneIcon className={classes.icon} />
         </Button>
-        <Applications />
       </Grid>
     </div>
   );