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),