make category header clickable

ui/page/home/view.jsx

@@ -8,6 +8,7 @@ import Page from 'component/page';
 import Button from 'component/button';
 import ClaimTilesDiscover from 'component/claimTilesDiscover';
 import getHomepage from 'homepage';
+import Icon from 'component/common/icon';
 
 type Props = {
   authenticated: boolean,
@@ -49,9 +50,11 @@ function HomePage(props: Props) {
       {rowData.map(({ title, link, icon, help, options = {} }) => (
         <div key={title} className="claim-grid__wrapper">
           <h1 className="claim-grid__header">
-            {icon}
-            <span className="claim-grid__title">{title}</span>
-            {help}
+            <Button navigate={link} button="link">
+              {icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
+              <span className="claim-grid__title">{title}</span>
+              {help}
+            </Button>
           </h1>
 
           <ClaimTilesDiscover {...options} />

ui/scss/component/_claim-list.scss

@@ -302,23 +302,30 @@
 }
 
 .claim-grid__header {
-  @extend .section__actions;
+  @extend .button--link;
   margin-bottom: var(--spacing-m);
+  display: inline-block;
 
   .icon__wrapper {
-    height: 2rem;
-    width: 2rem;
+    height: 1.5rem;
+    width: 1.5rem;
+    background-color: var(--color-primary-alt);
+    margin-right: var(--spacing-m);
+
+    .icon {
+      stroke: var(--color-primary);
+    }
   }
 }
 
+.claim-grid__header-icon {
+}
+
 .claim-grid__title {
+  margin-top: var(--spacing-m);
   margin-bottom: var(--spacing-m);
   font-weight: 300;
   font-size: var(--font-large);
-
-  &:not(:first-of-type) {
-    margin-top: var(--spacing-m);
-  }
 }
 
 .claim-grid__title--secondary {

ui/util/homepage.js

@@ -1,21 +1,18 @@
 // @flow
-import type { Node } from 'react';
 import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import * as CS from 'constants/claim_search';
-import React from 'react';
 import { parseURI } from 'lbry-redux';
 import moment from 'moment';
 import { toCapitalCase } from 'util/string';
 import { useIsLargeScreen } from 'effects/use-screensize';
-import Icon from 'component/common/icon';
 
 export type RowDataItem = {
   title: string,
   link?: string,
   help?: any,
   options?: {},
-  icon?: Node,
+  icon?: string,
 };
 
 export default function GetHomePageRowData(
@@ -156,7 +153,7 @@ export default function GetHomePageRowData(
   const RECENT_FROM_FOLLOWING = {
     title: __('Recent From Following'),
     link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
-    icon: <Icon sectionIcon icon={ICONS.SUBSCRIBE} size={14} />,
+    icon: ICONS.SUBSCRIBE,
     options: {
       orderBy: ['release_time'],
       releaseTime:
@@ -234,7 +231,7 @@ export default function GetHomePageRowData(
   const TRENDING_FOR_TAGS = {
     title: __('Trending For Your Tags'),
     link: `/$/${PAGES.TAGS_FOLLOWING}`,
-    icon: <Icon sectionIcon icon={ICONS.TAG} size={14} />,
+    icon: ICONS.TAG,
 
     options: {
       pageSize: getPageSize(4),