Align Gallery Header With Video Title and Channel Avatar

packages/app/src/App.tsx

@@ -10,11 +10,11 @@ const backgroundImg =
 
 export default function App() {
 	return (
-		<main className="main-section">
+		<main>
 			<Provider store={store}>
 				<Layout>
 					<Hero backgroundImg={backgroundImg} />
-					<VideoGallery title="Continue Watching" log />
+					<VideoGallery title="Continue Watching" />
 					<VideoGallery title="Top Trending Videos" />
 					<SeriesGallery title="Top Trending Series" />
 					<VideoGallery title="Featured Videos" />

packages/app/src/components/Hero.tsx

@@ -5,25 +5,25 @@ import { Header, Button } from "@joystream/components";
 type HeroProps = {
 	backgroundImg: string;
 };
-export default function Hero({ backgroundImg }: Partial<HeroProps>) {
+
+const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 	return (
-		<div
-			css={css`
-				background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${backgroundImg});
-				background-size: cover;
-				background-position: center;
+		<Header
+			title="A user governed video platform"
+			subtitle="Lorem ipsum sit amet, consectetur adipiscing elit. Proin non nisl sollicitudin, tempor diam."
+			backgroundImg={backgroundImg}
+			containerCss={css`
+				font-size: 18px;
+				line-height: 1.33;
+				& h1 {
+					font-size: 78px;
+					line-height: 0.94;
+				}
 			`}
 		>
-			<Header
-				text="A user governed video platform"
-				subtext="Lorem ipsum sit amet, consectetur adipiscing elit. Proin non nisl sollicitudin, tempor diam."
-				cssTitle={css`
-					font-size: 72px;
-					line-height: 0.94;
-				`}
-				cssSubtitle={css`
-					font-size: 18px;
-					line-height: 1.33;
+			<div
+				css={css`
+					display: flex;
 				`}
 			>
 				<Button>
@@ -36,7 +36,43 @@ export default function Hero({ backgroundImg }: Partial<HeroProps>) {
 					</span>
 				</Button>
 				<Button type="secondary">Share</Button>
-			</Header>
-		</div>
+			</div>
+		</Header>
 	);
-}
+};
+export default Hero;
+// export default function Hero({ backgroundImg }: Partial<HeroProps>) {
+// 	return (
+// 		<div
+// 			css={css`
+// 				background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${backgroundImg});
+// 				background-size: cover;
+// 				background-position: center;
+// 			`}
+// 		>
+// 			<Header
+// 				text="A user governed video platform"
+// 				subtext="Lorem ipsum sit amet, consectetur adipiscing elit. Proin non nisl sollicitudin, tempor diam."
+// 				cssTitle={css`
+// 					font-size: 72px;
+// 					line-height: 0.94;
+// 				`}
+// 				cssSubtitle={css`
+// 					font-size: 18px;
+// 					line-height: 1.33;
+// 				`}
+// 			>
+// 				<Button>
+// 					<span
+// 						css={css`
+// 							padding: 0 1rem;
+// 						`}
+// 					>
+// 						Play
+// 					</span>
+// 				</Button>
+// 				<Button type="secondary">Share</Button>
+// 			</Header>
+// 		</div>
+// 	);
+// }

packages/components/src/components/Gallery/Gallery.style.ts

@@ -14,7 +14,8 @@ const headingContainer: StyleFn = () => ({
 	alignItems: "baseline",
 	"& > h4": {
 		fontSize: typography.sizes.h4,
-		marginBlock: spacing.m
+		marginBlock: spacing.m,
+		marginLeft: spacing.m
 	}
 })
 

packages/components/src/components/Header/Header.style.ts

@@ -5,22 +5,20 @@ export type HeaderStyleProps = {
 	backgroundImg?: string
 }
 
-const container: StyleFn = () => ({
+const container: StyleFn = (_, { backgroundImg }) => ({
 	textAlign: "left",
 	color: colors.white,
-	display: "flex",
 	lineHeight: 1.33,
-	padding: `0 144px`,
-	"& > *": {
-		flexBasis: `50%`
-	}
+	height: 584,
+	backgroundImage: `linear-gradient(0deg, black 0%, rgba(0,0,0,0) 100%), url(${backgroundImg})`,
+	backgroundSize: "cover",
+	backgroundPosition: "center",
+	display: "flex",
+	flexDirection: "column"
 })
 
 const content: StyleFn = () => ({
-	marginLeft: spacing.xxl,
-	marginBottom: 85,
-	maxWidth: breakpoints.medium,
-	overflowWrap: ""
+	marginLeft: spacing.xxl
 })
 
 const title: StyleFn = () => ({
@@ -30,8 +28,7 @@ const title: StyleFn = () => ({
 })
 
 const subtitle: StyleFn = () => ({
-	marginTop: `1rem`,
-	maxWidth: `32rem`
+	marginTop: spacing.m
 })
 
 const imgContainer: StyleFn = (_, { backgroundImg }) => ({

packages/components/src/components/Header/Header.tsx

@@ -3,36 +3,22 @@ import { SerializedStyles } from "@emotion/core";
 import { useCSS, HeaderStyleProps } from "./Header.style";
 
 type HeaderProps = {
-	text: string;
-	subtext: string;
-	img: string;
-	css: SerializedStyles;
-	cssTitle: SerializedStyles;
-	cssSubtitle: SerializedStyles;
+	title: string;
+	subtitle: string;
+	backgroundImg: string;
+	containerCss: SerializedStyles;
 	children: React.ReactNode;
 } & HeaderStyleProps;
 
-export default function Header({
-	text,
-	subtext = "",
-	children,
-	img,
-	css,
-	cssTitle,
-	cssSubtitle,
-	...styleProps
-}: Partial<HeaderProps>) {
-	const styles = useCSS({ ...styleProps });
+export default function Header({ title, subtitle, children, backgroundImg, containerCss }: Partial<HeaderProps>) {
+	const styles = useCSS({ backgroundImg });
 	return (
-		<div css={[styles.container, css]}>
+		<section css={[styles.container, containerCss]}>
 			<div css={styles.content}>
-				<h1 css={[styles.title, cssTitle]}>{text}</h1>
-				{subtext && <p css={[styles.subtitle, cssSubtitle]}>{subtext}</p>}
+				<h1 css={styles.title}>{title}</h1>
+				{subtitle && <p css={styles.subtitle}>{subtitle}</p>}
 				{children}
 			</div>
-			<div css={styles.imgContainer}>
-				<img src={img} css={styles.img} />
-			</div>
-		</div>
+		</section>
 	);
 }

packages/components/src/components/NavButton/NavButton.style.ts

@@ -14,8 +14,6 @@ const baseStyles: StyleFn = () => ({
 	fontFamily: typography.fonts.base,
 	fontWeight: typography.weights.medium,
 	fontSize: typography.sizes.subtitle1,
-	margin: "1px",
-	padding: 0,
 	lineHeight: "50px",
 	"&:hover": {
 		borderColor: colors.blue[700]

packages/components/src/components/VideoPreview/VideoPreview.tsx

@@ -34,7 +34,7 @@ const VideoPreview: React.FC<Partial<VideoPreviewProps>> = ({
 	return (
 		<div css={styles.container} onClick={onClick}>
 			<div css={styles.coverContainer}>
-				<img src={poster} ref={imgRef} css={styles.cover} alt={`${title} by ${title} thumbnail`} />
+				<img src={poster} ref={imgRef} css={styles.cover} alt={`${title} by ${channel} thumbnail`} />
 			</div>
 			<div css={styles.infoContainer}>
 				{showChannel && (