Resize Hero Buttons

package.json

@@ -14,7 +14,7 @@
 	},
 	"lint-staged": {
 		"*.{ts, tsx, js, jsx, json}": [
-			"prettier"
+			"prettier --no-semi --trailing-comma none --write"
 		]
 	},
 	"devDependencies": {

packages/app/src/App.tsx

@@ -1,10 +1,9 @@
 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, Main } from "./components";
+import { Layout, VideoGallery, Hero, TagsGallery, 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";
@@ -24,13 +23,13 @@ export default function App() {
 						`}
 					>
 						<VideoGallery title="Continue Watching" />
-						<VideoGallery title="Top Trending Videos" />
+						<VideoGallery title="Top Trending Videos" action="See All" />
 						<SeriesGallery title="Top Trending Series" />
-						<VideoGallery title="Featured Videos" />
-						<Tags title="Top Categories" />
+						<VideoGallery title="Featured Videos" action="See All" />
+						<TagsGallery title="Top Categories" />
 						<ChannelGallery title="Trending Channels" />
 						<VideoGallery title="Top Trending Playlist" />
-						<VideoGallery title="Newest Videos" />
+						<VideoGallery title="Newest Videos" action="See All" />
 					</Main>
 				</Layout>
 			</Provider>

packages/app/src/components/ChannelGallery.tsx

@@ -78,22 +78,24 @@ const channels = [
 ];
 
 type ChannelGalleryProps = {
-	title?: string;
+	title: string;
+	action: string;
 };
-export default function ChannelGallery({ title }: ChannelGalleryProps) {
-	return (
-		<Gallery title={title}>
-			{channels.map((chan) => (
-				<ChannelPreview
-					channel={chan.channel}
-					channelAvatar={chan.channelAvatar}
-					key={chan.channel}
-					views={chan.views}
-					outerCss={css`
-						margin: 1rem 1.5rem;
-					`}
-				/>
-			))}
-		</Gallery>
-	);
-}
+
+const ChannelGallery: React.FC<Partial<ChannelGalleryProps>> = ({ title, action }) => (
+	<Gallery title={title} action={action}>
+		{channels.map((chan) => (
+			<ChannelPreview
+				channel={chan.channel}
+				channelAvatar={chan.channelAvatar}
+				key={chan.channel}
+				views={chan.views}
+				outerCss={css`
+					margin: 1rem 1.5rem;
+				`}
+			/>
+		))}
+	</Gallery>
+);
+
+export default ChannelGallery;

packages/app/src/components/Hero.tsx

@@ -30,16 +30,23 @@ const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 					}
 				`}
 			>
-				<Button>
-					<span
-						css={css`
-							padding: 0 1rem;
-						`}
-					>
-						Play
-					</span>
+				<Button
+					containerCss={css`
+						width: 116px;
+						height: 48px;
+					`}
+				>
+					Play
+				</Button>
+				<Button
+					type="secondary"
+					containerCss={css`
+						width: 96px;
+						height: 48px;
+					`}
+				>
+					Share
 				</Button>
-				<Button type="secondary">Share</Button>
 			</div>
 		</Header>
 	);

packages/app/src/components/SeriesGallery.tsx

@@ -3,7 +3,8 @@ import { css } from "@emotion/core";
 import { Gallery, SeriesPreview } from "@joystream/components";
 
 type SeriesGalleryProps = {
-	title?: string;
+	title: string;
+	action: string;
 };
 
 const series = [
@@ -56,20 +57,21 @@ const series = [
 			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
 	},
 ];
-export default function SeriesGallery({ title }: SeriesGalleryProps) {
-	return (
-		<Gallery title={title}>
-			{series.map((series) => (
-				<SeriesPreview
-					key={series.series}
-					channel={series.channel}
-					poster={series.poster}
-					series={series.series}
-					outerCss={css`
-						margin: auto 1.5rem auto 0;
-					`}
-				/>
-			))}
-		</Gallery>
-	);
-}
+
+const SeriesGallery: React.FC<Partial<SeriesGalleryProps>> = ({ title, action }) => (
+	<Gallery title={title} action={action}>
+		{series.map((series) => (
+			<SeriesPreview
+				key={series.series}
+				channel={series.channel}
+				poster={series.poster}
+				series={series.series}
+				outerCss={css`
+					margin: auto 1.5rem auto 0;
+				`}
+			/>
+		))}
+	</Gallery>
+);
+
+export default SeriesGallery;

packages/app/src/components/Tags.tsx → packages/app/src/components/TagsGallery.tsx

@@ -21,15 +21,16 @@ const tags = [
 ];
 
 type TagsProps = {
-	title?: string;
+	title: string;
+	action: string;
 };
 
-export default function Tags({ title }: TagsProps) {
-	return (
-		<Gallery title={title}>
-			{tags.map((tag) => (
-				<TagButton key={tag}>{tag}</TagButton>
-			))}
-		</Gallery>
-	);
-}
+const TagsGallery: React.FC<Partial<TagsProps>> = ({ title, action }) => (
+	<Gallery title={title} action={action}>
+		{tags.map((tag) => (
+			<TagButton key={tag}>{tag}</TagButton>
+		))}
+	</Gallery>
+);
+
+export default TagsGallery;

packages/app/src/components/VideoGallery.tsx

@@ -5,6 +5,7 @@ import { VideoPreview, Gallery, theme } from "@joystream/components";
 
 type VideoGalleryProps = {
 	title: string;
+	action: string;
 };
 
 const videoPlaceholders = [
@@ -96,7 +97,7 @@ const articleStyles = css`
 	margin-right: 1.25rem;
 `;
 
-export default function VideoGallery({ title = "" }: VideoGalleryProps) {
+const VideoGallery: React.FC<Partial<VideoGalleryProps>> = ({ title, action }) => {
 	const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders);
 	const [controlsTop, setControlsTop] = useState<SerializedStyles>(css``);
 	const imgRef = useCallback((node: HTMLImageElement) => {
@@ -107,7 +108,7 @@ export default function VideoGallery({ title = "" }: VideoGalleryProps) {
 		}
 	}, []);
 	return (
-		<Gallery title={title} action="See All" leftControlCss={controlsTop} rightControlCss={controlsTop}>
+		<Gallery title={title} action={action} leftControlCss={controlsTop} rightControlCss={controlsTop}>
 			{videos.map((video, idx) => (
 				<article css={articleStyles} key={`${title}- ${video.title} - ${idx}`}>
 					<VideoPreview
@@ -124,4 +125,6 @@ export default function VideoGallery({ title = "" }: VideoGalleryProps) {
 			))}
 		</Gallery>
 	);
-}
+};
+
+export default VideoGallery;

packages/app/src/components/index.ts

@@ -1,7 +1,7 @@
 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 TagsGallery } from "./TagsGallery"
 export { default as Main } from "./Main"
 export { default as SeriesGallery } from "./SeriesGallery"
 export { default as ChannelGallery } from "./ChannelGallery"

packages/components/src/components/Button/Button.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { SerializedStyles } from "@emotion/core";
 import { ButtonStyleProps, useCSS } from "./Button.style";
 import BlockIcon from "../../../assets/block.svg";
 
@@ -6,22 +7,26 @@ type ButtonProps = {
 	children?: React.ReactNode;
 	icon?: boolean;
 	disabled?: boolean;
+	containerCss: SerializedStyles;
 	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 } & ButtonStyleProps;
 
-export default function Button({
+const Button: React.FC<Partial<ButtonProps>> = ({
 	children,
 	icon,
 	type = "primary",
 	disabled = false,
+	containerCss,
 	onClick = () => {},
 	...styleProps
-}: ButtonProps) {
+}) => {
 	let styles = useCSS({ disabled, type, children, ...styleProps });
 	return (
-		<button css={styles.container} onClick={onClick} disabled={disabled}>
+		<button css={[styles.container, containerCss]} onClick={onClick} disabled={disabled}>
 			{icon && <BlockIcon css={styles.icon} />}
 			{children}
 		</button>
 	);
-}
+};
+
+export default Button;