large claim-grid header text + optional icon

custom/homepage.example.js

@@ -63,7 +63,7 @@ import { toCapitalCase } from 'util/string';
 import React from 'react';
 import Icon from 'component/common/icon';
 
-type RowDataItem = {
+export type RowDataItem = {
   title: string,
   link?: string,
   help?: any,

ui/component/common/icon.jsx

@@ -63,15 +63,17 @@ class IconComponent extends React.PureComponent<Props> {
       color = this.getIconColor(iconColor);
     }
 
-    const iconSize = size || 16;
-
     let tooltipText;
     if (tooltip) {
       tooltipText = customTooltipText || this.getTooltip(icon);
     }
 
     const component = (
-      <Icon size={sectionIcon ? 20 : iconSize} className={classnames(`icon icon--${icon}`, className)} color={color} />
+      <Icon
+        size={size || (sectionIcon ? 20 : 16)}
+        className={classnames(`icon icon--${icon}`, className)}
+        color={color}
+      />
     );
 
     const inner = sectionIcon ? <span className={`icon__wrapper icon__wrapper--${icon}`}>{component}</span> : component;

ui/component/fileDrop/view.jsx

@@ -138,6 +138,7 @@ function FileDrop(props: Props) {
         setFiles([]);
       } else if (files.length === 1) {
         // Handle single file selection
+        // $FlowFixMe
         setTarget(files[0]);
         handleFileSelected(files[0]);
       }

ui/modal/modalFileSelection/view.jsx

@@ -44,6 +44,7 @@ const ModalFileSelection = (props: Props) => {
   }
 
   const handleFileChange = (file?: WebFile) => {
+    // $FlowFixMe
     setSelectedFile(file);
   };
 

ui/page/channelsFollowingDiscover/view.jsx

@@ -15,7 +15,7 @@ type Props = {
   blockedChannels: Array<string>,
 };
 
-type RowDataItem = {
+type ChannelsFollowingItem = {
   title: string,
   link?: string,
   help?: any,
@@ -24,7 +24,7 @@ type RowDataItem = {
 
 function ChannelsFollowingDiscover(props: Props) {
   const { followedTags, subscribedChannels, blockedChannels } = props;
-  let rowData: Array<RowDataItem> = [];
+  let rowData: Array<ChannelsFollowingItem> = [];
   const notChannels = subscribedChannels
     .map(({ uri }) => uri)
     .concat(blockedChannels)

ui/page/home/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import type { RowDataItem } from 'homepage';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import { SITE_NAME } from 'config';
@@ -14,13 +15,6 @@ type Props = {
   subscribedChannels: Array<Subscription>,
 };
 
-type RowDataItem = {
-  title: string,
-  link?: string,
-  help?: any,
-  options?: {},
-};
-
 function HomePage(props: Props) {
   const { followedTags, subscribedChannels, authenticated } = props;
   const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
@@ -52,9 +46,10 @@ function HomePage(props: Props) {
           </p>
         </div>
       )}
-      {rowData.map(({ title, link, help, options = {} }) => (
+      {rowData.map(({ title, link, icon, help, options = {} }) => (
         <div key={title} className="claim-grid__wrapper">
-          <h1 className="section__actions">
+          <h1 className="claim-grid__header">
+            {icon}
             <span className="claim-grid__title">{title}</span>
             {help}
           </h1>

ui/scss/component/_claim-list.scss

@@ -301,11 +301,23 @@
   }
 }
 
-.claim-grid__title {
+.claim-grid__header {
+  @extend .section__actions;
   margin-bottom: var(--spacing-m);
 
+  .icon__wrapper {
+    height: 2rem;
+    width: 2rem;
+  }
+}
+
+.claim-grid__title {
+  margin-bottom: var(--spacing-m);
+  font-weight: 300;
+  font-size: var(--font-large);
+
   &:not(:first-of-type) {
-    margin-top: var(--spacing-xl);
+    margin-top: var(--spacing-m);
   }
 }
 

ui/util/homepage.js

@@ -1,16 +1,21 @@
 // @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';
 
-type RowDataItem = {
+export type RowDataItem = {
   title: string,
   link?: string,
   help?: any,
   options?: {},
+  icon?: Node,
 };
 
 export default function GetHomePageRowData(
@@ -151,6 +156,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} />,
     options: {
       orderBy: ['release_time'],
       releaseTime:
@@ -228,6 +234,8 @@ 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} />,
+
     options: {
       pageSize: getPageSize(4),
       tags: followedTags.map(tag => tag.name),