fix: minor improvements on video collection pages (#3205)

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@192.168.10.8>

Author: ahtesham-quraish

frontends/main/src/app-pages/VideoPlaylistCollectionPage/FeaturedVideo.tsx

@@ -19,7 +19,7 @@ const FeaturedGrid = styled.div(({ theme }) => ({
   display: "grid",
   gridTemplateColumns: "3.95fr 4.6fr",
   columnGap: "40px",
-  alignItems: "flex-start",
+  alignItems: "center",
   [theme.breakpoints.down("sm")]: {
     gridTemplateColumns: "1fr",
   },
@@ -60,14 +60,10 @@ const FeaturedTitle = styled.h2(({ theme }) => ({
   fontWeight: theme.typography.fontWeightBold,
   color: theme.custom.colors.darkGray2,
   letterSpacing: "-1.28px",
-  lineHeight: "110%",
+  lineHeight: "120%",
   margin: "0 0 16px",
   cursor: "pointer",
-  fontSize: "64px",
-  overflow: "hidden",
-  display: "-webkit-box",
-  WebkitLineClamp: 2,
-  WebkitBoxOrient: "vertical",
+  fontSize: "48px",
   transition: "color 0.2s",
   "& .mobile-title": {
     display: "none",

frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoCard.tsx

@@ -22,11 +22,11 @@ const VideoCardItem = styled(Link)({
   },
 
   "&:hover .play-overlay": {
-    opacity: 1,
+    opacity: 0.5,
   },
 
   "&:focus-visible .play-overlay": {
-    opacity: 1,
+    opacity: 0.5,
   },
 
   [theme.breakpoints.down("sm")]: {
@@ -108,8 +108,8 @@ const CardTitle = styled(Typography)(({ theme }) => ({
 }))
 
 const PlayIcon = styled(RiPlayCircleFill)({
-  width: 48,
-  height: 48,
+  width: 36,
+  height: 36,
 })
 
 const CardMetaRow = styled.div({

frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx

@@ -7,7 +7,7 @@ import Image from "next/image"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import { Typography, styled, theme, Skeleton, Breadcrumbs } from "ol-components"
 import VideoContainer from "./VideoContainer"
-import { RiShareForwardFill } from "@remixicon/react"
+import { RiShareForwardFill, RiPlayCircleFill } from "@remixicon/react"
 import { useQuery } from "@tanstack/react-query"
 import {
   useLearningResourcesDetail,
@@ -76,6 +76,11 @@ const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
   "& > span > span": { paddingBottom: 0, paddingLeft: "4px" },
 }))
 
+const PlayIcon = styled(RiPlayCircleFill)({
+  width: 36,
+  height: 36,
+})
+
 const ContentArea = styled.div(({ theme }) => ({
   padding: "56px 0 80px",
   [theme.breakpoints.down("sm")]: {
@@ -237,6 +242,18 @@ const MoreFromItem = styled(Link)({
   textDecoration: "none",
   "&:hover .mf-title": { color: theme.custom.colors.red },
 
+  "&:hover .video-card-title, &:focus-visible .video-card-title": {
+    color: theme.custom.colors.red,
+  },
+
+  "&:hover .play-overlay": {
+    opacity: 0.5,
+  },
+
+  "&:focus-visible .play-overlay": {
+    opacity: 0.5,
+  },
+
   "&:first-child": {
     padding: "0 0 24px 0",
   },
@@ -346,6 +363,18 @@ const DurationText = styled.span(({ theme }) => ({
   fontWeight: theme.typography.fontWeightBold,
 }))
 
+const PlayOverlay = styled.div({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#fff",
+  opacity: 0,
+  transition: "opacity 0.2s",
+  backgroundColor: "rgba(0, 0, 0, 0.18)",
+})
+
 const ScreenReaderOnly = styled.span({
   position: "absolute",
   width: 1,
@@ -660,6 +689,9 @@ const VideoDetailPage: React.FC<VideoDetailPageProps> = ({
                               {itemDuration && (
                                 <DurationBadge>{itemDuration}</DurationBadge>
                               )}
+                              <PlayOverlay className="play-overlay">
+                                <PlayIcon />
+                              </PlayOverlay>
                             </MoreFromThumbnailWrapper>
                             <MoreFromTextSide>
                               <MoreFromItemTitle className="mf-title">