Add Tertiary Button And See All Button

packages/app/src/components/Gallery.tsx

@@ -1,29 +1,43 @@
 import React from "react";
 import { css } from "@emotion/core";
 
-import { Carousel, theme } from "@joystream/components";
+import { Carousel, Button, theme } from "@joystream/components";
 
-type VideoGalleryProps = {
-	title?: string;
-	children?: React.ReactNode;
-	log?: boolean;
+type GalleryProps = {
+	title: string;
+	children: React.ReactNode;
+	onSeeAll: () => void;
+	seeAll: boolean;
 };
 
-const sectionStyles = css`
-	margin-bottom: 2rem;
-	padding: 1rem;
-
-	& > h4 {
-		font-size: ${theme.typography.sizes.h4};
-		margin-block: 1rem;
-	}
-`;
+const styles = {
+	section: css`
+		margin-bottom: 2rem;
+		padding: 1rem;
+	`,
+	headingContainer: css`
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		& > h4 {
+			font-size: ${theme.typography.sizes.h4};
+			margin-block: 1rem;
+		}
+	`,
+};
 
-export default function Gallery({ title = "", log = false, children }: VideoGalleryProps) {
+export default function Gallery({ title = "", children, seeAll = false, onSeeAll }: Partial<GalleryProps>) {
 	return (
-		<section css={sectionStyles}>
-			<h4>{title}</h4>
-			<Carousel log={log}>{children}</Carousel>
+		<section css={styles.section}>
+			<div css={styles.headingContainer}>
+				<h4>{title}</h4>
+				{seeAll && (
+					<Button type="tertiary" onClick={onSeeAll}>
+						See All
+					</Button>
+				)}
+			</div>
+			<Carousel>{children}</Carousel>
 		</section>
 	);
 }

packages/app/src/components/VideoGallery.tsx

@@ -101,7 +101,7 @@ const articleStyles = css`
 export default function VideoGallery({ title = "", log = false }: VideoGalleryProps) {
 	const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders);
 	return (
-		<Gallery title={title} log={log}>
+		<Gallery title={title} seeAll>
 			{videos.map((video, idx) => (
 				<article css={articleStyles} key={`${title}- ${video.title} - ${idx}`}>
 					<VideoPreview

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

@@ -4,7 +4,7 @@ import { disabled, dimensionsFromProps } from "../../theme/fragments"
 
 export type ButtonStyleProps = {
 	text?: string
-	type?: "primary" | "secondary"
+	type?: "primary" | "secondary" | "tertiary"
 	full?: boolean
 	size?: "regular" | "small" | "smaller"
 	children?: React.ReactNode
@@ -61,6 +61,20 @@ const colorFromType: StyleFn = (styles = {}, { type }: ButtonStyleProps) => {
 				}
 			}
 
+		case "tertiary":
+			return {
+				...styles,
+				backgroundColor: "transparent",
+				borderColor: "transparent",
+				color: colors.blue[500],
+				"&:hover": {
+					color: colors.blue[300]
+				},
+				"&:active": {
+					color: colors.blue[700]
+				}
+			}
+
 		default:
 			return { ...styles }
 	}

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

@@ -1,6 +1,5 @@
 import { StyleFn, makeStyles } from "../../utils"
-import { spacing } from "src/theme"
-
+import { spacing } from "../../theme"
 export type CarouselStyleProps = {
 	navTopPosition?: string
 }