add styling to TypesPage

Author: zairuiy-coding

client/src/pages/TypesPage.js

@@ -1,53 +1,71 @@
-import { Box, Container } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
 import { NavLink } from 'react-router-dom';
 
 export default function TypesPage() {
   const types = ['Movies', 'Shorts', 'TV Series'];
 
-  // flexFormat provides the formatting options for a "flexbox" layout that enables the album cards to be displayed 
-  // side-by-side and wrap to the next line when the screen is too narrow.
-  // Flexboxes are incredibly powerful. You can learn more on MDN web docs linked below (or many other online 
-  // resources).
-  // https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
-  // const flexFormat = { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly', height: '15vh'};
-
   const flexFormat = {
     display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-evenly',
-    // justifyContent: 'center',
+    flexDirection: 'column', // Change to column to place subtitle and boxes vertically
     alignItems: 'center',
-    minHeight: '100vh', // Use minHeight to center vertically
+    minHeight: '90vh', // Adjust height to move content up
+    justifyContent: 'flex-start', // Move content to the start of the container
+    paddingTop: '150px', // Add some padding at the top
+  };
+
+  const boxContainerStyle = {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    width: '100%',
+  };
+
+  const boxStyle = {
+    background: 'grey', // Set the background color to grey
+    borderRadius: '16px',
+    border: '2px solid grey', // Set the border color to grey
+    color: 'white', // Set the text color to white
+    textAlign: 'center', // Center the text
+    fontSize: '22px',
+    margin: '20px', // Increase the spacing between boxes
+    padding: '20px', // Add padding to make the boxes larger
+    transition: 'transform 0.2s', // Add transition for hover effect
+  };
+
+  const boxHoverStyle = {
+    transform: 'scale(1.1)', // Increase the size slightly on hover
+  };
+
+  const subtitleStyle = {
+    marginBottom: '20px', // Adjust the spacing between subtitle and boxes
+    textAlign: 'center',
+    fontSize: '24px', // Add styling to the subtitle
+    fontWeight: 'bold',
   };
 
   return (
     <Container style={flexFormat}>
-      {types.map((type) =>
-        <Box
-          key={type}
-          p={3}
-          m={2}
-          // style={{ background: 'black', borderRadius: '16px', border: '2px solid #000' }}
-          style={{
-            background: 'black',
-            borderRadius: '16px',
-            border: '2px solid #000',
-            color: 'red', // Set the text color to red
-            textAlign: 'center', // Center the text
-            fontSize: '22px',
-          }}
-        >
-          {/* <h4><NavLink to={`/search_productions/${type}`}>{type}</NavLink></h4> */}
-          <h4>
-              <NavLink to={`/search_productions/${type}`} style={{ color: 'red' }}>
+      <Typography variant="h6" style={subtitleStyle}>
+        Choose a Production Type to Search For
+      </Typography>
+      <Container style={boxContainerStyle}>
+        {types.map((type) =>
+          <Box
+            key={type}
+            p={3}
+            m={2}
+            style={boxStyle}
+            sx={{
+              '&:hover': boxHoverStyle, // Apply hover effect
+            }}
+          >
+            <h4>
+              <NavLink to={`/search_productions/${type}`} style={{ color: 'white' }}>
                 {type}
               </NavLink>
-          </h4>
-        </Box>
-      )}
+            </h4>
+          </Box>
+        )}
+      </Container>
     </Container>
   );
-
-
 };