Update card styling

src/index.css

@@ -17,31 +17,24 @@
   background-size: cover;
   background-position: center center;
 }
-.card h2,
-.card p {
-  background: #172617;
-  transition: 0.1s;
+.card .MuiCardActionArea-focusHighlight {
+  background-color: rgb(23, 38, 23);
 }
-.card p {
-  height: 105px;
-}
-.card:hover h2,
-.card:focus h2 {
+.card a:hover p:last-child,
+.card a:focus p:last-child {
   text-decoration: underline;
-  background: rgb(50, 78, 50);
-}
-.card:hover p,
-.card:focus p {
-  background: rgb(50, 78, 50);
 }
-.card img {
-  transition: 0.1s;
+.icon-button-diy {
+  border-radius: 50%;
+  border: 1px solid;
+  height: 30px;
+  width: 30px;
+  display: inline-block;
+  padding: 2px;
+  margin-top: -4px;
+  vertical-align: top;
+  margin-left: 6px;
 }
-.card:hover img,
-.card:focus img {
-  opacity: 0.8;
-}
-
 /**
  * Map and controls
  */

src/pages/ui/Card.tsx

@@ -1,35 +1,55 @@
-import { Paper } from '@mui/material';
+import { ArrowForward } from '@mui/icons-material';
+import { Box, CardActionArea, Card as MuiCard } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 
 export const Card = ({ title, href, image, text }) => (
-  <Paper
+  <MuiCard
+    className="card"
+    variant="outlined"
+    square
     sx={{
       width: 300,
       minHeight: 450,
     }}
   >
-    <Link
-      className="card"
-      to={href}
-      style={{
-        textDecoration: 'none',
-      }}
-    >
-      <Typography variant="h2" sx={{ color: 'white', p: 2, m: 0 }}>
-        {title}
-      </Typography>
-      <img src={image} alt={title} width="100%" height="auto" style={{ display: 'block' }} />
-      <Typography
-        variant="body1"
-        sx={{
-          color: 'white',
-          p: 2,
-          m: 0,
+    <CardActionArea>
+      <Link
+        to={href}
+        style={{
+          textDecoration: 'none',
         }}
       >
-        {text}
-      </Typography>
-    </Link>
-  </Paper>
+        <Typography variant="h2" sx={{ color: '#222', p: 2, m: 0 }}>
+          {title}
+        </Typography>
+        <img src={image} alt={title} width="100%" height="auto" style={{ display: 'block' }} />
+        <Box height={165} sx={{ overflow: 'hidden' }}>
+          <Typography
+            variant="body1"
+            sx={{
+              color: '#222',
+              p: 2,
+              m: 0,
+            }}
+          >
+            {text}
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{
+              color: '#222',
+              p: 2,
+              m: 0,
+            }}
+          >
+            View {title.toLowerCase()}
+            <span className="icon-button-diy">
+              <ArrowForward />
+            </span>
+          </Typography>
+        </Box>
+      </Link>
+    </CardActionArea>
+  </MuiCard>
 );