Fix Align Issues, Adjust Margins in VideoPreview

packages/app/src/App.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import { css } from "@emotion/core";
 import { Router } from "@reach/router";
 import { Provider } from "react-redux";
 
 import store from "./store";
-import { Layout, VideoGallery, Hero, Tags, SeriesGallery, ChannelGallery } from "./components";
+import { Layout, VideoGallery, Hero, Tags, SeriesGallery, ChannelGallery, Main } from "./components";
 
 const backgroundImg =
 	"https://s3-alpha-sig.figma.com/img/351c/9556/7bd65e79c56d66e273279ce04f8574aa?Expires=1593388800&Signature=PAvJw8izjlFlZRMv9V9zMNkyZPimYsj4PzJGXk0Q6mDPlV6Z87PLAT9xyImbi~p263Mu7bMcT8jdqjayXQq3iEgn1JxdYVCrHSyXgCrfmwxmWMZktEY-4kyO9M1RSWBlF9fsd19a45m0L9NtesyDU0IYz51tfYwE2OUE21TJmi4vdjiilPg6kRhPA3Z2N-Vj9ir9of7PtidoQwF-8b9fPejs7nDAHs3AX6YpIYTA36v2TGtS1emtxOCrO6JaRkr61yEdERo1RAVIeK36TeWXcCNE~mIIVoy~A9Abics4O2yQc0oxspu0Ac987NC-kGAHQS8FNeiAxWy7Ux49oNEMfQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA";
@@ -14,14 +15,23 @@ export default function App() {
 			<Provider store={store}>
 				<Layout>
 					<Hero backgroundImg={backgroundImg} />
-					<VideoGallery title="Continue Watching" />
-					<VideoGallery title="Top Trending Videos" />
-					<SeriesGallery title="Top Trending Series" />
-					<VideoGallery title="Featured Videos" />
-					<Tags title="Top Categories" />
-					<ChannelGallery title="Trending Channels" />
-					<VideoGallery title="Top Trending Playlist" />
-					<VideoGallery title="Newest Videos" />
+					<Main
+						containerCss={css`
+							margin: 1rem 0;
+							& > * {
+								margin-bottom: 3rem;
+							}
+						`}
+					>
+						<VideoGallery title="Continue Watching" />
+						<VideoGallery title="Top Trending Videos" />
+						<SeriesGallery title="Top Trending Series" />
+						<VideoGallery title="Featured Videos" />
+						<Tags title="Top Categories" />
+						<ChannelGallery title="Trending Channels" />
+						<VideoGallery title="Top Trending Playlist" />
+						<VideoGallery title="Newest Videos" />
+					</Main>
 				</Layout>
 			</Provider>
 		</main>

packages/app/src/components/Hero.tsx

@@ -24,6 +24,10 @@ const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 			<div
 				css={css`
 					display: flex;
+					margin-top: 40px;
+					& > * {
+						margin-right: 1rem;
+					}
 				`}
 			>
 				<Button>

packages/app/src/components/Main.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { css, SerializedStyles } from "@emotion/core";
+
+type MainProps = {
+	children: React.ReactNode;
+	containerCss: SerializedStyles;
+};
+const Main: React.FC<Partial<MainProps>> = ({ children, containerCss }) => (
+	<main
+		css={[
+			css`
+				padding: 0 2rem;
+			`,
+			containerCss,
+		]}
+	>
+		{children}
+	</main>
+);
+
+export default Main;

packages/app/src/components/VideoGallery.tsx

@@ -5,7 +5,6 @@ import { VideoPreview, Gallery, theme } from "@joystream/components";
 
 type VideoGalleryProps = {
 	title: string;
-	log?: boolean;
 };
 
 const videoPlaceholders = [
@@ -14,7 +13,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -23,7 +22,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -31,7 +30,7 @@ const videoPlaceholders = [
 		title: "Sample Video Title",
 		channel: "Channel Name",
 		showChannel: true,
-		time: "2 weeks ago",
+		createdAt: "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",
@@ -41,7 +40,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -50,7 +49,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -59,7 +58,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -68,7 +67,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -77,7 +76,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -86,7 +85,7 @@ const videoPlaceholders = [
 		channel: "Channel Name",
 		showChannel: true,
 		views: "345k",
-		time: "2 weeks ago",
+		createdAt: "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",
 	},
@@ -94,7 +93,7 @@ const videoPlaceholders = [
 
 const articleStyles = css`
 	max-width: 320px;
-	margin: auto ${theme.spacing.m};
+	margin-right: 1.25rem;
 `;
 
 export default function VideoGallery({ title = "" }: VideoGalleryProps) {
@@ -116,9 +115,10 @@ export default function VideoGallery({ title = "" }: VideoGalleryProps) {
 						channel={video.channel}
 						showChannel={video.showChannel}
 						views={video.views}
-						time={video.time}
+						createdAt={video.createdAt}
 						imgRef={idx === 0 ? imgRef : null}
 						poster={video.poster}
+						showMeta={true}
 					/>
 				</article>
 			))}

packages/app/src/components/index.ts

@@ -2,5 +2,6 @@ export { default as Layout } from "./Layout"
 export { default as VideoGallery } from "./VideoGallery"
 export { default as Hero } from "./Hero"
 export { default as Tags } from "./Tags"
+export { default as Main } from "./Main"
 export { default as SeriesGallery } from "./SeriesGallery"
 export { default as ChannelGallery } from "./ChannelGallery"

packages/components/src/components/Button/Button.style.ts

@@ -14,7 +14,7 @@ export type ButtonStyleProps = {
 const baseStyles: StyleFn = () => ({
 	borderWidth: "1px",
 	borderStyle: "solid",
-	fontFamily: typography.fonts.base,
+	fontFamily: typography.fonts.headers,
 	fontWeight: typography.weights.medium,
 	display: "inline-flex",
 	justifyContent: "center",
@@ -90,7 +90,6 @@ const paddingFromType: StyleFn = (
 	const buttonHeight = size === "regular" ? "20px" : size === "small" ? "15px" : "10px"
 	return {
 		...styles,
-		margin: `0 ${full ? "0" : "15px"} 0 0`,
 		padding:
 			size === "regular"
 				? children
@@ -132,139 +131,3 @@ export const useCSS = (props: ButtonStyleProps) => ({
 	container: makeStyles([baseStyles, colorFromType, dimensionsFromProps, paddingFromType, disabled])(props),
 	icon: makeStyles([iconStyles])(props)
 })
-
-// 	text,
-// 	type = "primary",
-// 	width = "normal",
-// 	size = "regular",
-// 	disabled = false,
-// }: ButtonStyleProps) => {
-//
-
-// 	const primaryButton = {
-// 		container: css`
-// 			border: 1px solid ${colors.blue[500]};
-// 			color: ${colors.white};
-// 			background-color: ${colors.blue[500]};
-
-// 			padding: ${size === "regular"
-// 				? !!text
-// 					? "14px 17px"
-// 					: "14px"
-// 				: size === "small"
-// 				? !!text
-// 					? "12px 14px"
-// 					: "12px"
-// 				: "10px"};
-// 			font-size: ${size === "regular"
-// 				? typography.sizes.button.large
-// 				: size === "small"
-// 				? typography.sizes.button.medium
-// 				: typography.sizes.button.small};
-//
-//
-// 		`,
-// 	};
-
-// 	const secondaryButton = {
-// 		container: css`
-// 			border: 1px solid ${colors.blue[500]};
-
-// 			background-color: ${colors.black};
-// 			justify-content: center;
-// 			padding: ${size === "regular"
-// 				? !!text
-// 					? "14px 17px"
-// 					: "14px"
-// 				: size === "small"
-// 				? !!text
-// 					? "12px 14px"
-// 					: "12px"
-// 				: "10px"};
-// 			font-size: ${size === "regular"
-// 				? typography.sizes.button.large
-// 				: size === "small"
-// 				? typography.sizes.button.medium
-// 				: typography.sizes.button.small};
-// 			margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
-// 			height: ${buttonHeight};
-// 			max-height: ${buttonHeight};
-
-// 			&:hover {
-// 				background-color: ${colors.black};
-// 				border-color: ${colors.blue[700]};
-// 				color: ${colors.blue[300]};
-// 			}
-
-// 			&:active {
-// 				background-color: ${colors.black};
-// 				border-color: ${colors.blue[700]};
-// 				color: ${colors.blue[700]};
-// 			}
-// 		`,
-// 	};
-
-// 	const disabledButton = {
-// 		container: css`
-// 			border: 1px solid ${colors.white};
-// 			color: ${colors.white};
-// 			background-color: ${colors.gray[100]};
-// 			justify-content: center;
-// 			padding: ${size === "regular"
-// 				? !!text
-// 					? "14px 17px"
-// 					: "14px"
-// 				: size === "small"
-// 				? !!text
-// 					? "12px 14px"
-// 					: "12px"
-// 				: "10px"};
-// 			display: ${width === "normal" ? "inline-flex" : "flex"};
-// 			align-items: center;
-// 			cursor: ${disabled ? "not-allowed" : "default"};
-// 			font-family: ${typography.fonts.base};
-// 			font-weight: ${typography.weights.medium};
-// 			font-size: ${size === "regular"
-// 				? typography.sizes.button.large
-// 				: size === "small"
-// 				? typography.sizes.button.medium
-// 				: typography.sizes.button.small};
-// 			margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
-// 			height: ${buttonHeight};
-// 			max-height: ${buttonHeight};
-
-// 			&:hover {
-// 				background-color: ${colors.gray[100]};
-// 				border-color: ${colors.white};
-// 				color: ${colors.white};
-// 			}
-
-// 			&:active {
-// 				background-color: ${colors.gray[100]};
-// 				border-color: ${colors.white};
-// 				color: ${colors.white};
-// 			}
-
-// 			&::selection {
-// 				background: transparent;
-// 			}
-// 		`,
-// 	};
-
-// 	const icon = css`
-// 		margin-right: ${!!text ? "10px" : "0"};
-// 		font-size: ${size === "regular"
-// 			? typography.sizes.icon.large
-// 			: size === "small"
-// 			? typography.sizes.icon.medium
-// 			: typography.sizes.icon.small};
-
-// 		& > path:nth-of-type(1) {
-// 			color: inherit;
-// 			flex-shrink: 0;
-// 		}
-// 	`;
-
-// 	const result = disabled ? disabledButton : type === "primary" ? primaryButton : secondaryButton;
-// 	return { icon, ...result };
-// };

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

@@ -9,8 +9,7 @@ const container: StyleFn = () => ({
 })
 const itemsContainer: StyleFn = () => ({
 	display: "flex",
-	overflow: "hidden",
-	padding: "1rem 0"
+	overflow: "hidden"
 })
 
 const navBase: StyleFn = () => ({
@@ -21,13 +20,13 @@ const navBase: StyleFn = () => ({
 	position: "absolute"
 })
 
-const navLeft: StyleFn = styles => ({
+const navLeft: StyleFn = (styles) => ({
 	...styles,
 	left: 0,
 	top: `calc(50% - ${Math.round((parseInt(spacing.xxxxl) + 1) / 2)}px)`
 })
 
-const navRight: StyleFn = styles => ({
+const navRight: StyleFn = (styles) => ({
 	...styles,
 	right: 0,
 	top: `calc(50% - ${Math.round((parseInt(spacing.xxxxl) + 1) / 2)}px)`

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

@@ -2,8 +2,6 @@ import { colors, spacing, typography } from "../../theme"
 import { makeStyles, StyleFn } from "../../utils"
 
 const container: StyleFn = () => ({
-	marginBottom: spacing.xxl,
-	padding: spacing.m,
 	display: "flex",
 	flexDirection: "column"
 })
@@ -12,10 +10,14 @@ const headingContainer: StyleFn = () => ({
 	display: "flex",
 	justifyContent: "space-between",
 	alignItems: "baseline",
+	marginBottom: spacing.m,
 	"& > h4": {
-		fontSize: typography.sizes.h4,
-		marginBlock: spacing.m,
-		marginLeft: spacing.m
+		fontSize: "1.25rem",
+		margin: 0
+	},
+	"& > button": {
+		fontSize: "0.875rem",
+		padding: 0
 	}
 })
 

packages/components/src/components/Gallery/Gallery.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SerializedStyles } from "@emotion/core";
+import { SerializedStyles, css } from "@emotion/core";
 import { useCSS } from "./Gallery.style";
 import Button from "../Button";
 import Carousel from "../Carousel";

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

@@ -14,44 +14,33 @@ const container: StyleFn = (_, { backgroundImg }) => ({
 	backgroundSize: "cover",
 	backgroundPosition: "center",
 	display: "flex",
-	flexDirection: "column"
+	flexDirection: "column",
+	justifyContent: "flex-end"
 })
 
 const content: StyleFn = () => ({
-	marginLeft: spacing.xxl
+	marginLeft: spacing.xxl,
+	marginBottom: 85,
+	maxWidth: "39.25rem"
 })
 
 const title: StyleFn = () => ({
 	lineHeight: 1.05,
 	letterSpacing: "-0.01em",
-	fontWeight: "bold"
+	fontWeight: "bold",
+	margin: 0
 })
 
 const subtitle: StyleFn = () => ({
+	maxWidth: "34rem",
 	marginTop: spacing.m
 })
 
-const imgContainer: StyleFn = (_, { backgroundImg }) => ({
-	backgroundImage: `url(${backgroundImg})`,
-	backgroundRepeat: "repeat-y",
-	backgroundPosition: "bottom",
-	width: "100%",
-	maxWidth: breakpoints.large
-})
-
-const img: StyleFn = () => ({
-	width: `100%`,
-	minWidth: 500,
-	maxWidth: 800
-})
-
 export const useCSS = (props: HeaderStyleProps) => ({
 	container: makeStyles([container])(props),
 	content: makeStyles([content])(props),
 	title: makeStyles([title])(props),
-	subtitle: makeStyles([subtitle])(props),
-	imgContainer: makeStyles([imgContainer])(props),
-	img: makeStyles([img])(props)
+	subtitle: makeStyles([subtitle])(props)
 })
 // export let makeStyles = ({
 //   background = ""

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

@@ -1,5 +1,5 @@
 import { css } from "@emotion/core";
-import { typography, colors } from "./../../theme";
+import { typography, colors, spacing } from "./../../theme";
 
 export type VideoPreviewStyleProps = {
 	showChannel: boolean;
@@ -37,17 +37,30 @@ export let makeStyles = ({
 			object-fit: cover;
 		`,
 		infoContainer: css`
-			display: grid;
-			grid-template: auto / ${showChannel ? "45px auto" : "auto"};
-			margin: 10px 0 0;
+			display: flex;
+			margin-top: ${spacing.s};
 		`,
 		avatar: css`
-			grid-column: 1 / 1;
 			width: 40px;
 			height: 40px;
 		`,
 		textContainer: css`
-			grid-column: ${showChannel ? "2 / 2" : "1 / 1"};
+			margin-left: ${spacing.xs};
+			line-height: 1.25;
+			& > h3 {
+				font-size: 1rem;
+				font-family: ${typography.fonts.headers};
+				margin: 0;
+			}
+			& > span {
+				font-size: 0.875rem;
+				line-height: 1.43;
+				margin: 0;
+			}
+
+			span:first-of-type {
+				margin-bottom: ${spacing.xs};
+			}
 		`,
 		title: css`
 			margin: 0;

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

@@ -8,10 +8,10 @@ type VideoPreviewProps = {
 	channelImg: string;
 	showChannel: boolean;
 	showMeta: boolean;
-	time: string;
+	createdAt: string;
 	views: string;
 	poster: string;
-	onClick: any;
+	onClick: (e: React.MouseEvent<HTMLElement>) => void;
 	imgRef: React.Ref<HTMLImageElement>;
 	onChannelClick: (e: React.MouseEvent<HTMLElement>) => void;
 } & VideoPreviewStyleProps;
@@ -22,7 +22,7 @@ const VideoPreview: React.FC<Partial<VideoPreviewProps>> = ({
 	channelImg,
 	showChannel,
 	showMeta,
-	time,
+	createdAt,
 	views,
 	imgRef,
 	poster,
@@ -41,15 +41,7 @@ const VideoPreview: React.FC<Partial<VideoPreviewProps>> = ({
 					<Avatar size="small" img={channelImg} outerStyles={styles.avatar} onClick={onChannelClick} />
 				)}
 				<div css={styles.textContainer}>
-					<h3
-						css={styles.title}
-						onClick={(event) => {
-							event.stopPropagation();
-							onClick();
-						}}
-					>
-						{title}
-					</h3>
+					<h3 onClick={onClick}>{title}</h3>
 					{showChannel && (
 						<span css={styles.channel} onClick={onChannelClick}>
 							{channel}
@@ -57,7 +49,7 @@ const VideoPreview: React.FC<Partial<VideoPreviewProps>> = ({
 					)}
 					{showMeta && (
 						<span css={styles.meta}>
-							{time}・{views} views
+							{createdAt}・{views} views
 						</span>
 					)}
 				</div>