Merge pull request #109 from kachun333/css-enhancement

Css enhancement

src/pages/Home/FeaturedContent/index.styled.ts

@@ -2,12 +2,19 @@ import { CardActionArea } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import BannerImage from "components/common/BannerImage";
 
-export const StyledCardActionArea = styled(CardActionArea)({
+export const StyledCardActionArea = styled(CardActionArea)(({ theme }) => ({
   width: "100%",
   aspectRatio: "3 / 2",
-});
+  "&:hover": {
+    background: `linear-gradient(to right, ${theme.palette.secondary.light}, ${theme.palette.primary.light})`,
+  },
+}));
 
-export const StyledCardImage = styled(BannerImage)({
+export const StyledCardImage = styled(BannerImage)(() => ({
   width: "100%",
   height: "100%",
-});
+  opacity: 1,
+  "&:hover": {
+    opacity: 0.95
+  },
+}));

src/pages/Home/index.tsx

@@ -17,16 +17,100 @@ function Home() {
       </S.HeroContainer>
       <Container>
         <S.AboutBox>
-          <Typography variant="h3" gutterBottom>
-            About
+          <Typography variant="h3" gutterBottom textAlign="center">
+            醇憶 Grad Mag
           </Typography>
-          <Typography variant="body1" gutterBottom>
-            This web app serves as a platform to unite KMPk 16/17 graduates. The
-            admin is currently migrating the physical graduation magazine to
-            this web app.
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            In halls of learning, friendships bloom,
+            <br />
+            A tapestry of memories, a sweet perfume.
+            <br />
+            As we stand on the brink of a new sunrise,
+            <br />
+            Reflecting on moments that made us wise.
+            <br />
           </Typography>
-          <Typography variant="body1" gutterBottom>
-            Stay tuned for more interesting content and features!
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            In the pages of our shared history,
+            <br />
+            Laughter echoes, a cherished melody.
+            <br />
+            Through late-night studies and early light,
+            <br />
+            Friends stood by, making every burden light.
+            <br />
+          </Typography>
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            In the classrooms where dreams took flight,
+            <br />
+            We found allies, their presence bright.
+            <br />
+            Through challenges faced and triumphs won,
+            <br />
+            Together we faced the setting sun.
+            <br />
+          </Typography>
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            Through seasons changing, friendships grew,
+            <br />
+            Roots deepened, like morning dew.
+            <br />
+            Through exams and projects, stress and glee,
+            <br />
+            Hand in hand, we faced what would be.
+            <br />
+          </Typography>
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            Now, in caps and gowns, we stand so tall,
+            <br />
+            Ready to heed the future&apos;s call.
+            <br />
+            Yet, let&apos;s not forget the ties that bind,
+            <br />
+            The friendships formed, one of a kind.
+            <br />
+          </Typography>
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            In the yearbook of life, our chapter&apos;s end,
+            <br />
+            But the echoes of our laughter, they&apos;ll transcend.
+            <br />
+            The memories we made, a priceless treasure,
+            <br />
+            Fuel for the journey, a source of pleasure.
+            <br />
+          </Typography>
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            So here&apos;s to you, my dear comrade,
+            <br />
+            For the times we laughed and times we had.
+            <br />
+            As we embark on paths anew,
+            <br />
+            May the bond of friendship ever true.
+            <br />
+          </Typography>
+          <br />
+          <Typography variant="body1" gutterBottom textAlign="center">
+            In the tapestry of life, we leave our mark,
+            <br />
+            A legacy of friendship, vibrant and stark.
+            <br />
+            So, here&apos;s to us, the Class of 16/17,
+            <br />
+            Forever bound by memories, forever a team.
+            <br />
+          </Typography>
+          <br />
+          <Typography variant="body2" gutterBottom textAlign="right">
+            This poem is generated by AI
           </Typography>
         </S.AboutBox>
         <FeaturedContent />

src/pages/graduates/GraduateCard/index.styled.ts

@@ -12,6 +12,9 @@ export const StyledImageContainer = styled("div")(({ theme }) => {
   const graduateCardMargin = theme.spacing(1);
   const margin = `${gridLayoutMargin} * 2 + ${graduateCardMargin} * 2`;
   return {
+    "&:hover": {
+      background: `linear-gradient(to right, ${theme.palette.secondary.light}, ${theme.palette.primary.light})`,
+    },
     [theme.breakpoints.up("sm")]: {
       width: 282,
       height: 188,
@@ -23,10 +26,14 @@ export const StyledImageContainer = styled("div")(({ theme }) => {
   };
 });
 
-export const StyledGraduateImage = styled(GraduateImage)({
+export const StyledGraduateImage = styled(GraduateImage)(() => ({
   height: "100%",
   width: "100%",
-});
+  opacity: 1,
+  "&:hover": {
+    opacity: 0.95
+  },
+}));
 
 /**
  * innerHTML will be hidden

src/pages/videos/Videos.tsx

@@ -3,8 +3,8 @@ import Grid from "@mui/material/Grid";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import YouTube, { YouTubeEvent } from "react-youtube";
 import { videosData } from "./videos.constants";
+import WrappedVideo from "./WrappedVideo";
 
 const PREFIX = "Videos";
 
@@ -36,16 +36,6 @@ const Root = styled("div")(({ theme }) => ({
 }));
 
 function Videos() {
-  const onReady = (event: YouTubeEvent<any>) => {
-    // access to player in all event handlers via event.target
-    event.target.pauseVideo();
-  };
-
-  const opts = {
-    height: "195",
-    width: "320",
-  };
-
   return (
     <Container className={classes.container}>
       {videosData.map((video) => (
@@ -62,7 +52,7 @@ function Videos() {
                 xs={iframe.xs || 12}
                 md={iframe.md || 4}
               >
-                <YouTube videoId={iframe.id} opts={opts} onReady={onReady} />
+                <WrappedVideo videoId={iframe.id} />
               </Grid>
             ))}
           </Grid>

src/pages/videos/WrappedVideo.tsx

@@ -0,0 +1,44 @@
+import Skeleton from "@mui/material/Skeleton";
+import React, { useState } from "react";
+import YouTube, { YouTubeEvent } from "react-youtube";
+
+interface WrappedVideoProps {
+  videoId: string;
+}
+
+const WrappedVideo: React.FC<WrappedVideoProps> = ({ videoId }) => {
+  const [isReady, setIsReady] = useState(false);
+
+  const opts = {
+    height: 195,
+    width: 320,
+  };
+
+  const onReady = (event: YouTubeEvent<any>) => {
+    setIsReady(true);
+    // access to player in all event handlers via event.target
+    event.target.pauseVideo();
+  };
+
+  const ytDisplay = isReady ? undefined : "none";
+
+  return (
+    <>
+      {!isReady && (
+        <Skeleton
+          variant="rectangular"
+          height={opts.height}
+          width={opts.width}
+        />
+      )}
+      <YouTube
+        style={{ display: ytDisplay }}
+        videoId={videoId}
+        opts={opts}
+        onReady={onReady}
+      />
+    </>
+  );
+};
+
+export default WrappedVideo;