diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx index dcbaff85f..4029cbd1e 100644 --- a/src/renderer/component/common/form-components/form-field.jsx +++ b/src/renderer/component/common/form-components/form-field.jsx @@ -20,7 +20,7 @@ type Props = { placeholder?: string | number, children?: React.Node, stretch?: boolean, - fixClass?: string, // class applied to prefix/postfix label + affixClass?: string, // class applied to prefix/postfix label }; export class FormField extends React.PureComponent<Props> { @@ -36,7 +36,7 @@ export class FormField extends React.PureComponent<Props> { type, children, stretch, - fixClass, + affixClass, ...inputProps } = this.props; @@ -94,13 +94,13 @@ export class FormField extends React.PureComponent<Props> { })} > {prefix && ( - <label htmlFor={name} className={classnames('form-field__prefix', fixClass)}> + <label htmlFor={name} className={classnames('form-field__prefix', affixClass)}> {prefix} </label> )} {input} {postfix && ( - <label htmlFor={name} className={classnames('form-field__postfix', fixClass)}> + <label htmlFor={name} className={classnames('form-field__postfix', affixClass)}> {postfix} </label> )} diff --git a/src/renderer/component/fileList/view.jsx b/src/renderer/component/fileList/view.jsx index 37905f276..cf1b22ae8 100644 --- a/src/renderer/component/fileList/view.jsx +++ b/src/renderer/component/fileList/view.jsx @@ -171,7 +171,7 @@ class FileList extends React.PureComponent<Props, State> { {!hideFilter && ( <FormField prefix={__('Sort by')} - fixClass="form-field--align-center" + affixClass="form-field--align-center" type="select" value={sortBy} onChange={this.handleSortChanged} diff --git a/src/renderer/component/transactionList/view.jsx b/src/renderer/component/transactionList/view.jsx index 94dfd33b6..0ab002bee 100644 --- a/src/renderer/component/transactionList/view.jsx +++ b/src/renderer/component/transactionList/view.jsx @@ -96,7 +96,7 @@ class TransactionList extends React.PureComponent<Props, State> { type="select" value={filter} onChange={this.handleFilterChanged} - fixClass="form-field--align-center" + affixClass="form-field--align-center" prefix={__('Show')} postfix={ <Button diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx index 1be7976fb..1d7942676 100644 --- a/src/renderer/component/walletSend/view.jsx +++ b/src/renderer/component/walletSend/view.jsx @@ -56,10 +56,10 @@ class WalletSend extends React.PureComponent<Props> { label={__('Amount')} postfix={__('LBC')} className="input--price-amount" - fixClass="form-field--fix-no-height" + affixClass="form-field--fix-no-height" min="0" step="any" - placeholder="5" + placeholder="12.34" onChange={handleChange} onBlur={handleBlur} value={values.amount} diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index d4f8237f2..83d30fb84 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -115,8 +115,7 @@ class FilePage extends React.Component<Props> { const shouldObscureThumbnail = obscureNsfw && metadata.nsfw; const { height, channel_name: channelName, value } = claim; const mediaType = Lbry.getMediaType(contentType); - const isPlayable = - Object.values(player.mime).indexOf(mediaType) !== -1 || mediaType === 'audio'; + const isPlayable = Object.values(player.mime).includes(contentType) || mediaType === 'audio'; const channelClaimId = value && value.publisherSignature && value.publisherSignature.certificateId; let subscriptionUri; @@ -196,19 +195,22 @@ class FilePage extends React.Component<Props> { )} </div> </div> - <div className="card__actions card__actions--end"> - {!claimIsMine && ( - <Button - button="alt" - icon="Send" - label={__('Enjoy this? Send a tip')} - onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })} - /> - )} - {speechSharable && ( - <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} /> - )} - </div> + {!claimIsMine || + (speechSharable && ( + <div className="card__actions card__actions--end"> + {!claimIsMine && ( + <Button + button="alt" + icon="Send" + label={__('Enjoy this? Send a tip')} + onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })} + /> + )} + {speechSharable && ( + <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} /> + )} + </div> + ))} <FormRow alignRight> <FormField type="checkbox" diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 45161152e..de1d5e449 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -121,7 +121,7 @@ input::placeholder { opacity: 0.5; } -label { +label[for] { cursor: pointer; } diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 1909e3ffe..fc2b6fe68 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -42,6 +42,7 @@ $large-breakpoint: 1760px; --color-divider: #e3e3e3; --color-help: rgba(0, 0, 0, 0.54); --color-error: #a94442; + --color-nsfw: #bf4440; --color-download: var(--color-white); --color-download-overlay: var(--color-black); --color-bg: #fafafa; diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss index 4d3ac9d3c..6fe2194ee 100644 --- a/src/renderer/scss/component/_content.scss +++ b/src/renderer/scss/component/_content.scss @@ -88,7 +88,7 @@ color: var(--color-white); &.content__empty--nsfw { - background-color: var(--color-error); + background-color: var(--color-nsfw); } }