Add Background Image To Hero And Minor Style Fixes

packages/app/src/App.tsx

@@ -5,12 +5,15 @@ import { Provider } from "react-redux";
 import store from "./store";
 import { Layout, VideoGallery, Hero, Tags, SeriesGallery, ChannelGallery } 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";
+
 export default function App() {
 	return (
 		<main className="main-section">
 			<Provider store={store}>
 				<Layout>
-					<Hero />
+					<Hero backgroundImg={backgroundImg} />
 					<VideoGallery title="Continue Watching" log />
 					<VideoGallery title="Top Trending Videos" />
 					<SeriesGallery title="Top Trending Series" />

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

@@ -1,15 +1,15 @@
-import { typography, colors } from "../../theme";
-import { makeStyles, StyleFn } from "../../utils";
-import { disabled, dimensionsFromProps } from "../../theme/fragments";
+import { typography, colors } from "../../theme"
+import { makeStyles, StyleFn } from "../../utils"
+import { disabled, dimensionsFromProps } from "../../theme/fragments"
 
 export type ButtonStyleProps = {
-	text?: string;
-	type?: "primary" | "secondary";
-	full?: boolean;
-	size?: "regular" | "small" | "smaller";
-	children?: React.ReactNode;
-	disabled?: boolean;
-};
+	text?: string
+	type?: "primary" | "secondary"
+	full?: boolean
+	size?: "regular" | "small" | "smaller"
+	children?: React.ReactNode
+	disabled?: boolean
+}
 
 const baseStyles: StyleFn = () => ({
 	borderWidth: "1px",
@@ -21,9 +21,9 @@ const baseStyles: StyleFn = () => ({
 	alignItems: "center",
 	color: colors.white,
 	"&::selected": {
-		background: "transparent",
-	},
-});
+		background: "transparent"
+	}
+})
 const colorFromType: StyleFn = (styles = {}, { type }: ButtonStyleProps) => {
 	switch (type) {
 		case "primary":
@@ -35,46 +35,45 @@ const colorFromType: StyleFn = (styles = {}, { type }: ButtonStyleProps) => {
 				"&:hover": {
 					backgroundColor: colors.blue[700],
 					borderColor: colors.blue[700],
-					color: colors.white,
+					color: colors.white
 				},
 				"&:active": {
 					backgroundColor: colors.blue[900],
 					borderColor: colors.blue[900],
-					color: colors.white,
-				},
-			};
+					color: colors.white
+				}
+			}
 
 		case "secondary":
 			return {
 				...styles,
-				color: colors.blue[500],
 				backgroundColor: colors.black,
 				borderColor: colors.blue[500],
 
 				"&:hover": {
 					borderColor: colors.blue[700],
-					color: colors.blue[300],
+					color: colors.blue[300]
 				},
 
 				"&:active": {
 					borderColor: colors.blue[700],
-					color: colors.blue[700],
-				},
-			};
+					color: colors.blue[700]
+				}
+			}
 
 		default:
-			return { ...styles };
+			return { ...styles }
 	}
-};
+}
 const paddingFromType: StyleFn = (
 	styles,
 	{
 		size = "regular",
 		children,
-		full = false,
+		full = false
 	}: { size: "regular" | "small" | "smaller"; children?: React.ReactNode; full: boolean }
 ) => {
-	const buttonHeight = size === "regular" ? "20px" : size === "small" ? "15px" : "10px";
+	const buttonHeight = size === "regular" ? "20px" : size === "small" ? "15px" : "10px"
 	return {
 		...styles,
 		margin: `0 ${full ? "0" : "15px"} 0 0`,
@@ -93,9 +92,9 @@ const paddingFromType: StyleFn = (
 				? typography.sizes.button.large
 				: size === "small"
 				? typography.sizes.button.medium
-				: typography.sizes.button.small,
-	};
-};
+				: typography.sizes.button.small
+	}
+}
 
 const iconStyles: StyleFn = (styles, { children, size }) => {
 	return {
@@ -110,15 +109,15 @@ const iconStyles: StyleFn = (styles, { children, size }) => {
 
 		flexShrink: 0,
 		"& > *": {
-			stroke: "currentColor",
-		},
-	};
-};
+			stroke: "currentColor"
+		}
+	}
+}
 
 export const useCSS = (props: ButtonStyleProps) => ({
 	container: makeStyles([baseStyles, colorFromType, dimensionsFromProps, paddingFromType, disabled])(props),
-	icon: makeStyles([iconStyles])(props),
-});
+	icon: makeStyles([iconStyles])(props)
+})
 
 // 	text,
 // 	type = "primary",

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

@@ -9,6 +9,7 @@ const container: StyleFn = () => ({
 	textAlign: "left",
 	color: colors.white,
 	display: "flex",
+	lineHeight: 1.33,
 	padding: `0 144px`,
 	"& > *": {
 		flexBasis: `50%`
@@ -16,12 +17,17 @@ const container: StyleFn = () => ({
 })
 
 const content: StyleFn = () => ({
-	margin: `auto 1.5rem`,
+	marginLeft: spacing.xxl,
+	marginBottom: 85,
 	maxWidth: breakpoints.medium,
 	overflowWrap: ""
 })
 
-const title: StyleFn = () => ({})
+const title: StyleFn = () => ({
+	lineHeight: 1.05,
+	letterSpacing: "-0.01em",
+	fontWeight: "bold"
+})
 
 const subtitle: StyleFn = () => ({
 	marginTop: `1rem`,

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

@@ -1,14 +1,15 @@
-import React, { Children } from "react";
+import React from "react";
 import { SerializedStyles } from "@emotion/core";
 import { useCSS, HeaderStyleProps } from "./Header.style";
 
 type HeaderProps = {
 	text: string;
-	subtext?: string;
-	img?: string;
-	cssTitle?: SerializedStyles;
-	cssSubtitle?: SerializedStyles;
-	children?: React.ReactNode;
+	subtext: string;
+	img: string;
+	css: SerializedStyles;
+	cssTitle: SerializedStyles;
+	cssSubtitle: SerializedStyles;
+	children: React.ReactNode;
 } & HeaderStyleProps;
 
 export default function Header({
@@ -16,13 +17,14 @@ export default function Header({
 	subtext = "",
 	children,
 	img,
+	css,
 	cssTitle,
 	cssSubtitle,
 	...styleProps
-}: HeaderProps) {
+}: Partial<HeaderProps>) {
 	const styles = useCSS({ ...styleProps });
 	return (
-		<div css={styles.container}>
+		<div css={[styles.container, css]}>
 			<div css={styles.content}>
 				<h1 css={[styles.title, cssTitle]}>{text}</h1>
 				{subtext && <p css={[styles.subtitle, cssSubtitle]}>{subtext}</p>}