Add Hover Effect to Cards

Author: gregpalace

app/components/Applications.tsx

@@ -13,6 +13,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { DashboardContext } from '../context/DashboardContext';
 
 import ServicesModal from '../modals/ServicesModal';
+import '../stylesheets/Applications.css';
 
 const Applications = () => {
   const { applications, getApplications, deleteApp } = useContext(DashboardContext);
@@ -44,14 +45,15 @@ const Applications = () => {
       color: 'white',
       fontSize: '3rem',
       whiteSpace: 'nowrap',
-      background: 'rgb(33, 34, 41)',
+      backgroundColor: '#24262f',
       border: '2px solid black',
       boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
       '&:hover, &.Mui-focusVisible': { background: 'rgba(33, 34, 41, 0.75)' },
     },
     hover: {
       color: 'white',
       boxShadow: 'none',
+      '&:hover, &.Mui-focusVisible': { color: 'red' },
     },
     btnStyle: {
       position: 'relative',
@@ -68,28 +70,31 @@ const Applications = () => {
     <>
       {applications.map((app: string, i: number | any | string | undefined) => (
         <Grid item xs={6} key={i}>
-          <Card
-            className={classes.paper}
-            variant="outlined"
-            onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app, i)}
-          >
-            <CardHeader
-              avatar={
-                <IconButton
-                  className={classes.hover}
-                  aria-label="Delete"
-                  onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app, i)}
-                >
-                  <DeleteForeverOutlinedIcon />
-                </IconButton>
-              }
-            ></CardHeader>
-            <CardContent>
-              <Typography variant="h2">{app}</Typography>
-            </CardContent>
-          </Card>
+          <div id="card-hover">
+            <Card
+              className={classes.paper}
+              variant="outlined"
+              onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app, i)}
+            >
+              <CardHeader
+                avatar={
+                  <IconButton
+                    className={classes.hover}
+                    aria-label="Delete"
+                    onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app, i)}
+                  >
+                    <DeleteForeverOutlinedIcon />
+                  </IconButton>
+                }
+              ></CardHeader>
+              <CardContent>
+                <Typography variant="h2">{app}</Typography>
+              </CardContent>
+            </Card>
+          </div>
         </Grid>
       ))}
+
       <Modal open={open} onClose={() => setOpen(false)}>
         <ServicesModal i={index} app={app} />
       </Modal>
@@ -98,3 +103,5 @@ const Applications = () => {
 };
 
 export default Applications;
+
+//name, desc, creation date

app/components/Occupied.tsx

@@ -5,7 +5,6 @@ import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoT
 
 import AddModal from '../modals/AddModal';
 import Applications from './Applications';
-// import '../stylesheets/Occupied.css';
 
 const Occupied: React.FC = () => {
   const [open, setOpen] = useState(false);
@@ -15,7 +14,7 @@ const Occupied: React.FC = () => {
       color: theme.palette.text.secondary,
       height: 340,
       width: '100%',
-      background: 'rgb(33, 34, 41)',
+      backgroundColor: '#24262f',
       boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
       '&:hover, &.Mui-focusVisible': {
         backgroundColor: 'rgba(33, 34, 41, 0.75)',
@@ -34,6 +33,8 @@ const Occupied: React.FC = () => {
       '&:hover, &.Mui-focusVisible': { color: 'rgb(255, 243, 72)' },
     },
     heroContent: {
+      fontWeight: 700,
+      color: '#333',
       padding: theme.spacing(8, 0, 6),
       backgroundColor: '#e8e8e8',
     },
@@ -42,10 +43,10 @@ const Occupied: React.FC = () => {
   const classes = useStyles();
 
   return (
-    <div>
+    <>
       <Typography
         className={classes.heroContent}
-        variant="h1"
+        variant="h2"
         align="center"
         color="textPrimary"
         gutterBottom
@@ -64,7 +65,7 @@ const Occupied: React.FC = () => {
         </Grid>
         <Applications />
       </Grid>
-    </div>
+    </>
   );
 };
 

app/index.tsx

@@ -2,5 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './stylesheets/index.scss';
 import App from './App';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core';
 
-ReactDOM.render(<App />, document.getElementById('app'));
+const theme = createMuiTheme({
+  typography: {
+    fontFamily: ['Nunito sans', 'sans-serif'].join(','),
+  },
+});
+
+ReactDOM.render(
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>,
+  document.getElementById('app')
+);

app/stylesheets/Applications.css

@@ -1,18 +1,38 @@
-.app-btn {
-  width: 80%;
-  height: 50px;
-  background-color: #24262F;
-  padding: 2%;
-  margin: 10px 0 10px 0;
-  font-size: 2.5vh;
-  border: none;
-  text-align: center;
-  color: white;
-  transition: 0.1s;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-.app-btn:hover {
+#card-hover {
   cursor: pointer;
-  background-color: #494FEE;
-}
+  position: relative;
+  font-size: 28px;
+  border-top-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  transition: all 1s;
+  &:after,
+  &:before {
+    content: ' ';
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    border: 0px solid #fff;
+    transition: all 1s;
+  }
+  &:after {
+    top: -1px;
+    left: -1px;
+    border-top: 5px solid black;
+    border-left: 5px solid black;
+  }
+  &:before {
+    bottom: -1px;
+    right: -1px;
+    border-bottom: 5px solid black;
+    border-right: 5px solid black;
+  }
+  &:hover {
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    &:before,
+    &:after {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

app/stylesheets/Home.scss

@@ -1,7 +1,7 @@
 @import './constants.scss';
 
 .home {
-  background-color: #f4f4f4;
+  background-color: #f2f2f2;
   height: 100%;
   display: flex;
   align-items: center;