diff --git a/custom/homepage.example.js b/custom/homepage.example.js
index 8d605e96b..4df2b4a80 100644
--- a/custom/homepage.example.js
+++ b/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,
diff --git a/ui/component/common/icon.jsx b/ui/component/common/icon.jsx
index a4b9982bf..9ead9feb6 100644
--- a/ui/component/common/icon.jsx
+++ b/ui/component/common/icon.jsx
@@ -63,15 +63,17 @@ class IconComponent extends React.PureComponent {
color = this.getIconColor(iconColor);
}
- const iconSize = size || 16;
-
let tooltipText;
if (tooltip) {
tooltipText = customTooltipText || this.getTooltip(icon);
}
const component = (
-
+
);
const inner = sectionIcon ? {component} : component;
diff --git a/ui/component/fileDrop/view.jsx b/ui/component/fileDrop/view.jsx
index 293e97bbe..6febc358a 100644
--- a/ui/component/fileDrop/view.jsx
+++ b/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]);
}
diff --git a/ui/modal/modalFileSelection/view.jsx b/ui/modal/modalFileSelection/view.jsx
index c79c825ed..65ea8fe4f 100644
--- a/ui/modal/modalFileSelection/view.jsx
+++ b/ui/modal/modalFileSelection/view.jsx
@@ -44,6 +44,7 @@ const ModalFileSelection = (props: Props) => {
}
const handleFileChange = (file?: WebFile) => {
+ // $FlowFixMe
setSelectedFile(file);
};
diff --git a/ui/page/channelsFollowingDiscover/view.jsx b/ui/page/channelsFollowingDiscover/view.jsx
index 1116d5e0a..53a56d706 100644
--- a/ui/page/channelsFollowingDiscover/view.jsx
+++ b/ui/page/channelsFollowingDiscover/view.jsx
@@ -15,7 +15,7 @@ type Props = {
blockedChannels: Array,
};
-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 = [];
+ let rowData: Array = [];
const notChannels = subscribedChannels
.map(({ uri }) => uri)
.concat(blockedChannels)
diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx
index a910b8459..39d770553 100644
--- a/ui/page/home/view.jsx
+++ b/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,
};
-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) {
)}
- {rowData.map(({ title, link, help, options = {} }) => (
+ {rowData.map(({ title, link, icon, help, options = {} }) => (
-
+
+ {icon}
{title}
{help}
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 8d65d70a6..fef41e860 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/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);
}
}
diff --git a/ui/util/homepage.js b/ui/util/homepage.js
index 15216f002..ce80c2b99 100644
--- a/ui/util/homepage.js
+++ b/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: ,
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: ,
+
options: {
pageSize: getPageSize(4),
tags: followedTags.map(tag => tag.name),