Add More Placeholders Images

packages/app/src/components/Hero.tsx

@@ -11,6 +11,7 @@ export default function Hero({ backgroundImg }: Partial<HeroProps>) {
 			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
@@ -18,9 +19,11 @@ export default function Hero({ backgroundImg }: Partial<HeroProps>) {
 				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>

packages/app/src/components/VideoGallery.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { css } from "@emotion/core";
 
-import { Carousel, VideoPreview, VideoPlayer, theme } from "@joystream/components";
+import { VideoPreview, theme } from "@joystream/components";
 import Gallery from "./Gallery";
 
 type VideoGalleryProps = {
@@ -9,18 +9,89 @@ type VideoGalleryProps = {
 	log?: boolean;
 };
 
-function Video() {
-	return (
-		<VideoPreview
-			title="Sample Video Title"
-			channel="Channel Name"
-			showChannel={true}
-			views="345k"
-			time="2 weeks ago"
-			poster="https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1592784000&Signature=aJk1gbAXBZiLM9AJzmnVlIBumH-2CksuaJurQwg6RSjKRwtUYWFC1-A~4n8YlJ2b7elUpxfywTeQprP6Cp0i23RLGM-O0gYHVn0JS61NJ8r4BFf49~CehI0A30iAauYbY52itIvy~KFZnA-GucA1MihuJssT0oTqDNOQEL~Ux~Q3ArmKjqEe6EZgQ72lBRw74EIQ7dEeZZ2A5DiO4t6j0-lQBQ-ii4zeH3jYgDac1ulio-k0Jd9eMblTHcc9K3vwFjDvfq9r27iIiUEcNg1jpA6hgpVAOVo3471A~1ULl6yWYFNOFgyPn6007PECrROWj8k1WYQ-zjSbNI5zaDmBBA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
-		/>
-	);
-}
+const videoPlaceholders = [
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1592784000&Signature=aJk1gbAXBZiLM9AJzmnVlIBumH-2CksuaJurQwg6RSjKRwtUYWFC1-A~4n8YlJ2b7elUpxfywTeQprP6Cp0i23RLGM-O0gYHVn0JS61NJ8r4BFf49~CehI0A30iAauYbY52itIvy~KFZnA-GucA1MihuJssT0oTqDNOQEL~Ux~Q3ArmKjqEe6EZgQ72lBRw74EIQ7dEeZZ2A5DiO4t6j0-lQBQ-ii4zeH3jYgDac1ulio-k0Jd9eMblTHcc9K3vwFjDvfq9r27iIiUEcNg1jpA6hgpVAOVo3471A~1ULl6yWYFNOFgyPn6007PECrROWj8k1WYQ-zjSbNI5zaDmBBA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/bd94/067c/4750be7f93ae65cf6828daa25ae301f0?Expires=1593388800&Signature=ItXPW-xlNDLNziv7Maamv-n6HRo4UNRnfaQGBGUhHQUKZYplg2RtRlf198c-U5rDBU0Oe9UBbC8JUAMZRs1jnKs1I~UTBS0Dpq-qn1wR-q0ZJZRNmUHmiOjQ9j9GekidMJHEq-rh7qZB38ttdI72Db46WOeuA6NxvRYqe8j1CUXKpgNL-nfLcvofSYQWpTZ6n1aA4IpzlzT2ginbOhesp2yJHkgBbkIQm9It~SnTl7EoVzzDErD5KjmltO4nUBWTKYmgEdf0zEaNPQn8fF2vtKUQtz9TkdwyeVjHqhSd9aptH2vdKSZhbm8KO15BIs1ZczuQ05YQJ2RJfU8fbu5NUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		time: "2 weeks ago",
+		views: "345k",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/8e21/18b4/c0d8f1114b47062b35c47fb568fb48a5?Expires=1593388800&Signature=ZaBi7Wf9-bGZbtyqlbCl-TNCZDiWaaoiO3tMyYJVliHhuCvafyheMpBUPn8XSZQsntvmSW2A1rfLfPw-e-t1tCUw6uBIOWexRRhoNDfHWvXLUy4bcij2-D54Mo7LyL1ASLLzoTTDVCLoESNFEb3X8ntBWNOOVIy-1qLYuBdeP1vdJmcov5I4U46ge0sSPvetv0SS~3wW4CYO7zZ8Wi1CrA8mxQiMsnXCl97Vat5ngT46QZzZwVOtcmXH8KxQcn-e0MWBZFMAB5vzs2SdAX~l~3z7McrULM9-wPavJiw7dH4fUbVH7qQ-oS9dZ0t2sod3dRPGTj73Su3WVL2RlnQUqg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/f712/25ac/62a18f581f6a5aae66ac4e9b7b21fafc?Expires=1593388800&Signature=YO2e7eBwPVF05C4tlUeWVmq5o3KOpo9yyoM1khSbywLj1Kv1BIIFdjD6IBLO9Oifm8A-Ws2IlypjWuykVe9nydcoCp28VzQ~ifYtfr97plLxVcOYiYMu7HDIEpPK4UKZi3AFSvqdIAUrr-YBu2noRt8Kg-BbzMG2DV3zKTAga2zMJ-cYu5-xiW6gctEr8nl6QF7luvBYZkHTYRaMTXpsRdN-b2VoW7BX1mxm1FDWyhZ9aaEqZ8dIE3ct8t6J2ybxryrMVxLpjP-T0124N27Z9Xp4WzSTOSjfBjn~Q7mtqHk141~pq1-dQe1dO2V7JQN3AvTt4eEeCvpXQqbA0VMPnw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/e0d6/4163/147cd1502ba0a99ea7258f31be9812b3?Expires=1593388800&Signature=av5e4oaaYXVDxA9U0DAQKuwA-vyC4VRaGYz2lO5IIaz-CP55B717sXn-V6H6JzMNZ7JavA9q8~uMK-r9jd-yxoia1UopEiUeSkZgQlbBhd4DEVBPoMhMF3nC--mZ4bQnVvK9xN933TCm9z46jkAOZ7U8UYp5TlA829Rnmgw3QkaNlPLW5UkgU04k6pAae5Y3t9pAnwErmDCDjHuaXKrCjCuG0zwk84f0JQAcZt4VojD8kVDFCf0IOHdZtIQMUk47CQfdWJ2KDBkm1oOcVAweTSHXdwzpiFQ~o1i-hZVYtgzIiGTE6IqW3qsksqiLtWwMsui2dvWXVu2actRRwR~OTg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/63ab/b514/2a10cf17ceaf00972e7c12c18cacd832?Expires=1593388800&Signature=WRk44Vxkc1mYbXSdGroHP8Hvd4dfhtWMukS~2yfNlY6KSb94ZzeFaKID8dMj4wznZo-sSp~lAagV7NJMFO9QLCEw0E7YeX3TnOWeFDrx63wkc388h-srSxxrNVUpB6WUCfkPtdusDrfKOx2HvM6zZLlSgYs4-McX2VTJ-g7bKx2Pzt64mox6wTGlbXWREkV2sbLSBSF6P0fpwge3VPt5jX1E~vDJ8X4mtZgN1DRIQMtc2dfZhZhyL1jNeIZe5WJyOcY9b2E3KL54pWt13UGsI08nTzloqOPFAt~fHwbwUbwWeelbjkzSABh55KYVNePerISUIy~esGJ11px7l9oWTw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+	{
+		title: "Sample Video Title",
+		channel: "Channel Name",
+		showChannel: true,
+		views: "345k",
+		time: "2 weeks ago",
+		poster:
+			"https://s3-alpha-sig.figma.com/img/b327/39be/143853e8ca345927ee54a7ca9acaed0c?Expires=1593388800&Signature=G1vikiLUBwdBdrzS3RC1WScSJSAAD7FEteNX4bfPf0VQL0w9fsMfha31S-l6EHxU~WTh3GAic8X5furwHjwLbE2nVUIiA0q6Rizxfd8kT97Z-9uQzPbCkla6a1qIX-7wq19t2evAVST--Sz7wfEYVCUTdZaEmqgBsJnYI3fl7nzrwLhaaTTN3liOTltgvlQn8btRClliTWENyHBwu6cwvMHuX6ePt5swhIj4gz34F0MyY~PtnsFbBHFerShd3t2DYsMqDv8CEB089v6IYZh87Rnqk7jJFZC2ZBULhjlwKQpboJOI35cov3aGOnuTe5vcmULLSfEXuV5kWJrtzJnQlA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+	},
+];
 
 const articleStyles = css`
 	max-width: 320px;
@@ -28,12 +99,19 @@ const articleStyles = css`
 `;
 
 export default function VideoGallery({ title = "", log = false }: VideoGalleryProps) {
-	const items = Array.from({ length: 15 }, (_, i) => i);
+	const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders);
 	return (
 		<Gallery title={title} log={log}>
-			{items.map((item) => (
-				<article css={articleStyles} key={`${title}- ${item}`}>
-					<Video />
+			{videos.map((video, idx) => (
+				<article css={articleStyles} key={`${title}- ${video.title} - ${idx}`}>
+					<VideoPreview
+						title={video.title}
+						channel={video.channel}
+						showChannel={video.showChannel}
+						views={video.views}
+						time={video.time}
+						poster={video.poster}
+					/>
 				</article>
 			))}
 		</Gallery>

packages/components/src/components/Carousel/Carousel.style.ts

@@ -1,29 +1,43 @@
-import { StyleFn, makeStyles } from "../../utils";
+import { StyleFn, makeStyles } from "../../utils"
+import { spacing } from "src/theme"
 
 export type CarouselStyleProps = {
-	navTopPosition?: string;
-};
+	navTopPosition?: string
+}
 
 const container: StyleFn = () => ({
 	position: "relative",
 	display: "flex",
-	alignItems: "center",
-});
+	alignItems: "center"
+})
 const innerContainer: StyleFn = () => ({
 	display: "flex",
 	overflow: "hidden",
-	padding: "1rem",
-});
+	padding: "1rem"
+})
 
 const navLeft: StyleFn = () => ({
 	order: -1,
-});
+	position: "relative",
+	zIndex: 1,
+	left: 48,
+	minWidth: spacing.xxxxl,
+	minHeight: spacing.xxxxl,
+	marginTop: -80
+})
 
-const navRight: StyleFn = () => ({});
+const navRight: StyleFn = () => ({
+	position: "relative",
+	zIndex: 1,
+	right: 48,
+	minWidth: spacing.xxxxl,
+	minHeight: spacing.xxxxl,
+	marginTop: -80
+})
 
 export const useCSS = (props: CarouselStyleProps) => ({
 	container: makeStyles([container])(props),
 	innerContainer: makeStyles([innerContainer])(props),
 	navLeft: makeStyles([navLeft])(props),
-	navRight: makeStyles([navRight])(props),
-});
+	navRight: makeStyles([navRight])(props)
+})

packages/components/src/components/Carousel/Carousel.tsx

@@ -84,6 +84,11 @@ export default function Carousel({ children, scrollAmount = 200, log, ...stylePr
 					<animated.div
 						style={props}
 						key={`Carousel-${idx}`}
+						css={css`
+							&::after {
+								background-color: red;
+							}
+						`}
 						ref={(el) => {
 							elementsRefs.current[idx] = el;
 							return el;
@@ -93,26 +98,28 @@ export default function Carousel({ children, scrollAmount = 200, log, ...stylePr
 					</animated.div>
 				))}
 			</div>
-			<div
-				css={[
+			<NavButton
+				outerCss={[
 					styles.navLeft,
 					css`
 						opacity: ${distance === MIN_DISTANCE ? 0 : 1};
 					`,
 				]}
-			>
-				<NavButton type="primary" direction="left" onClick={() => handleScroll("left")} />
-			</div>
-			<div
-				css={[
+				type="primary"
+				direction="left"
+				onClick={() => handleScroll("left")}
+			/>
+			<NavButton
+				outerCss={[
 					styles.navRight,
 					css`
 						opacity: ${distance - scrollAmount < -MAX_DISTANCE ? 0 : 1};
 					`,
 				]}
-			>
-				<NavButton type="primary" direction="right" onClick={() => handleScroll("right")} />
-			</div>
+				type="primary"
+				direction="right"
+				onClick={() => handleScroll("right")}
+			/>
 		</div>
 	);
 }

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

@@ -16,8 +16,6 @@ const baseStyles: StyleFn = () => ({
 	fontSize: typography.sizes.subtitle1,
 	margin: "1px",
 	padding: 0,
-	width: "50px",
-	height: "50px",
 	lineHeight: "50px",
 	"&:hover": {
 		borderColor: colors.blue[700]

packages/components/src/components/NavButton/NavButton.tsx

@@ -1,20 +1,20 @@
 import React from "react";
+import { SerializedStyles } from "@emotion/core";
 import { useCSS, NavButtonStyleProps } from "./NavButton.style";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ChevronRightIcon from "../../../assets/chevron-right-big.svg";
 import ChevronLeftIcon from "../../../assets/chevron-left-big.svg";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
 type NavButtonProps = {
-	direction?: "right" | "left";
-	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+	direction: "right" | "left";
+	outerCss: SerializedStyles | SerializedStyles[];
+	onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 } & NavButtonStyleProps;
 
-export default function NavButton({ direction = "right", onClick, ...styleProps }: NavButtonProps) {
+export default function NavButton({ direction = "right", onClick, outerCss, ...styleProps }: Partial<NavButtonProps>) {
 	let styles = useCSS(styleProps);
 	return (
-		<div css={styles} onClick={onClick}>
+		<button css={[styles, outerCss]} onClick={onClick}>
 			{direction === "right" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-		</div>
+		</button>
 	);
 }

packages/components/src/components/SeriesPreview/SeriesPreview.style.tsx

@@ -24,10 +24,18 @@ const info: StyleFn = () => ({
 	flexDirection: "column",
 	justifyContent: "center",
 	alignItems: "center",
+	marginBottom: spacing.l,
+});
+
+const text: StyleFn = () => ({
+	display: "flex",
+	flexDirection: "column",
+	marginTop: spacing.xs,
 	"& > h4": {
 		margin: 0,
 	},
 	"& > span": {
+		marginTop: spacing.xxs,
 		fontSize: typography.sizes.subtitle2,
 	},
 });
@@ -40,5 +48,6 @@ const avatar: StyleFn = () => ({
 export const useCSS = (props: SeriesPreviewStyleProps) => ({
 	container: makeStyles([container])(props),
 	info: makeStyles([info])(props),
+	text: makeStyles([text])(props),
 	avatar: makeStyles([avatar])(props),
 });

packages/components/src/components/SeriesPreview/SeriesPreview.tsx

@@ -24,8 +24,10 @@ export default function SeriesPreview({
 		<article css={[styles.container, outerCss]}>
 			<div css={styles.info}>
 				<Avatar img={channelAvatar} outerStyles={styles.avatar} />
-				<h4>{series}</h4>
-				<span>{channel}</span>
+				<div css={styles.text}>
+					<h4>{series}</h4>
+					<span>{channel}</span>
+				</div>
 			</div>
 		</article>
 	);

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

@@ -5,10 +5,17 @@ export type VideoPreviewStyleProps = {
 	showChannel?: boolean;
 	poster?: string;
 	width?: number;
+	darken?: boolean;
 	height?: number;
 };
 
-export let makeStyles = ({ showChannel = false, width = 320, height = 190, poster = "" }: VideoPreviewStyleProps) => {
+export let makeStyles = ({
+	showChannel = false,
+	width = 320,
+	height = 190,
+	poster = "",
+	darken = false,
+}: VideoPreviewStyleProps) => {
 	const withPoster = poster ? `url(${poster})` : `linear-gradient(${colors.gray[300]}, ${colors.gray[700]})`;
 
 	return {