add refresh icon to refresh buttons

This commit is contained in:
Sean Yesmunt 2020-06-02 12:32:58 -04:00
parent 17b8aa0202
commit a0ace5ca58
6 changed files with 56 additions and 31 deletions

View file

@ -71,7 +71,7 @@ type RowDataItem = {
};
export default function getHomePageRowData(
authenticated,
authenticated: boolean,
showPersonalizedChannels: boolean,
showPersonalizedTags: boolean,
subscribedChannels: Array<Subscription>,

View file

@ -634,4 +634,11 @@ export const icons = {
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
</g>
),
[ICONS.REFRESH]: buildIcon(
<g>
<polyline points="23 4 23 10 17 10" />
<polyline points="1 20 1 14 7 14" />
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />{' '}
</g>
),
};

View file

@ -2,6 +2,7 @@
import type { Node } from 'react';
import * as MODALS from 'constants/modal_types';
import * as SETTINGS from 'constants/settings';
import * as ICONS from 'constants/icons';
import React from 'react';
import { Lbry } from 'lbry-redux';
import Button from 'component/button';
@ -307,7 +308,11 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
<I18nMessage
tokens={{
help_link: (
<Button button="link" href="https://lbry.com/faq/startup-troubleshooting" label={__("this link")} />
<Button
button="link"
href="https://lbry.com/faq/startup-troubleshooting"
label={__('this link')}
/>
),
}}
>
@ -316,7 +321,14 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
</p>
</React.Fragment>
}
actions={<Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />}
actions={
<Button
button="primary"
icon={ICONS.REFRESH}
label={__('Refresh')}
onClick={() => window.location.reload()}
/>
}
/>
)}
{/* Temp hack: don't show any modals on splash screen daemon is running;

View file

@ -1,4 +1,5 @@
// @flow
import * as ICONS from 'constants/icons';
import React, { useEffect } from 'react';
import { withRouter } from 'react-router';
import { TXO_LIST as TXO } from 'lbry-redux';
@ -175,7 +176,7 @@ function TxoList(props: Props) {
title={__(`Transactions`)}
titleActions={
<div className="card__actions--inline">
<Button button="alt" label={__('Refresh')} onClick={() => fetchTxoPage()} />
<Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
</div>
}
isBodyList

View file

@ -44,7 +44,9 @@ class UserVerify extends React.PureComponent<Props> {
rewards_program: (
<Button button="link" label={__('Rewards Program')} href="https://lbry.com/faq/rewards" />
),
Refresh: <Button onClick={() => fetchUser()} button="link" label={__('Refresh')} />,
Refresh: (
<Button icon={ICONS.REFRESH} onClick={() => fetchUser()} button="link" label={__('Refresh')} />
),
Skip: <Button {...skipButtonProps} button="link" label={__('Skip')} />,
}}
>

View file

@ -58,32 +58,35 @@ function FileListPublished(props: Props) {
<Page>
<div className="card-stack">
<WebUploadList />
<Card
title={__('Publishes')}
titleActions={
<div className="card__actions--inline">
<Button
button="alt"
label={__('Refresh')}
onClick={() => fetchClaimListMine(params.page, params.page_size)}
/>
<Button
icon={ICONS.PUBLISH}
button="secondary"
label={__('Publish')}
navigate="/$/publish"
onClick={() => clearPublish()}
/>
</div>
}
isBodyList
body={
<div>
<ClaimList isCardBody loading={fetching} persistedStorageKey="claim-list-published" uris={urls} />
<Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
</div>
}
/>
{!!(urls && urls.length) && (
<Card
title={__('Publishes')}
titleActions={
<div className="card__actions--inline">
<Button
button="alt"
label={__('Refresh')}
icon={ICONS.REFRESH}
onClick={() => fetchClaimListMine(params.page, params.page_size)}
/>
<Button
icon={ICONS.PUBLISH}
button="secondary"
label={__('Publish')}
navigate="/$/publish"
onClick={() => clearPublish()}
/>
</div>
}
isBodyList
body={
<div>
<ClaimList isCardBody loading={fetching} persistedStorageKey="claim-list-published" uris={urls} />
<Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
</div>
}
/>
)}
</div>
{!(urls && urls.length) && (
<React.Fragment>