diff --git a/.eslintrc.json b/.eslintrc.json index 86ec5da22..dd7c42530 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -36,6 +36,7 @@ "object-curly-spacing": 0, "one-var": 0, "prefer-promise-reject-errors": 0, + "react/jsx-indent": 0, "react-hooks/exhaustive-deps": "warn", "react-hooks/rules-of-hooks": "error", "space-before-function-paren": ["error", "never"], diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx index 6aa2f7e96..e750e4367 100644 --- a/src/ui/component/claimPreview/view.jsx +++ b/src/ui/component/claimPreview/view.jsx @@ -64,6 +64,7 @@ function ClaimPreview(props: Props) { const abandoned = !isResolvingUri && !claim; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; const showPublishLink = abandoned && placeholder === 'publish'; + const minimal = type === 'small' || type === 'tooltip'; let isValid; try { @@ -75,7 +76,7 @@ function ClaimPreview(props: Props) { const isChannel = isValid ? parseURI(uri).isChannel : false; let shouldHide = - placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw)); + placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw) || !claim); // This will be replaced once blocking is done at the wallet server level if (claim && !shouldHide && blackListedOutpoints) { @@ -133,7 +134,7 @@ function ClaimPreview(props: Props) { onClick={pending || type === 'inline' ? undefined : onClick} onContextMenu={handleContextMenu} className={classnames('claim-preview', { - 'claim-preview--small': type === 'small', + 'claim-preview--small': minimal, 'claim-preview--large': type === 'large', 'claim-preview--inline': type === 'inline', 'claim-preview--visited': !isChannel && hasVisitedUri, @@ -146,7 +147,7 @@ function ClaimPreview(props: Props) {
{claim ? : {__('Nothing here')}}
- {type !== 'small' && ( + {!minimal && (
{isChannel && } {!isChannel && } @@ -160,7 +161,7 @@ function ClaimPreview(props: Props) { {!isResolvingUri && (
{claim ? ( - + ) : (
{__('Publish something and claim this spot!')}
diff --git a/src/ui/component/recommendedContent/view.jsx b/src/ui/component/recommendedContent/view.jsx index 6763e0dd1..dd3c791d6 100644 --- a/src/ui/component/recommendedContent/view.jsx +++ b/src/ui/component/recommendedContent/view.jsx @@ -57,7 +57,7 @@ export default class RecommendedContent extends React.PureComponent { loading={isSearching} uris={recommendedContent} header={__('Related')} - empty={
{__('No related content found')}
} + empty={__('No related content found')} /> ); diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx index 4a929ce6a..3c7d54897 100644 --- a/src/ui/component/uriIndicator/view.jsx +++ b/src/ui/component/uriIndicator/view.jsx @@ -10,6 +10,7 @@ type Props = { channelUri: ?string, link: ?boolean, claim: ?Claim, + addTooltip: boolean, // Lint thinks we aren't using these, even though we are. // Possibly because the resolve function is an arrow function that is passed in props? resolveUri: string => void, @@ -17,6 +18,10 @@ type Props = { }; class UriIndicator extends React.PureComponent { + static defaultProps = { + addTooltip: true, + }; + componentDidMount() { this.resolve(this.props); } @@ -34,7 +39,7 @@ class UriIndicator extends React.PureComponent { }; render() { - const { link, isResolvingUri, claim } = this.props; + const { link, isResolvingUri, claim, addTooltip } = this.props; if (!claim) { return {isResolvingUri ? 'Validating...' : 'Unused'}; @@ -51,9 +56,12 @@ class UriIndicator extends React.PureComponent { if (channelClaim) { const { name, claim_id: claimId } = channelClaim; let channelLink; - if (claim.is_channel_signature_valid) { - channelLink = link ? buildURI({ channelName: name, claimId }) : false; - } + + // Disabling now because it mostly causes issues + // Add this back to ensure we only add links to signed channels + // if (claim.is_channel_signature_valid) { + channelLink = link ? buildURI({ channelName: name, claimId }) : false; + // } const inner = {name}; @@ -61,9 +69,15 @@ class UriIndicator extends React.PureComponent { return inner; } + const Wrapper = addTooltip + ? ({ children }) => ( + }>{children} + ) + : 'span'; + return ( ); } else { diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx index 2d3f2ebeb..548e0bfd9 100644 --- a/src/ui/page/file/view.jsx +++ b/src/ui/page/file/view.jsx @@ -226,7 +226,7 @@ class FilePage extends React.Component {
- {'claimIsMine' && ( + {claimIsMine && ( {viewCount} {viewCount !== 1 ? __('Views') : __('View')} @@ -285,7 +285,13 @@ class FilePage extends React.Component {
- +
+ + {channelUri ? ( + + ) : ( +
{__('Anonymous')}
+ )}
diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index 584eebabe..cca4869eb 100644 --- a/src/ui/scss/component/_claim-list.scss +++ b/src/ui/scss/component/_claim-list.scss @@ -107,6 +107,10 @@ .claim-preview { border-bottom: 1px solid rgba($lbry-teal-5, 0.1); + &:only-of-type { + border: none; + } + [data-mode='dark'] & { color: $lbry-white; border-color: var(--dm-color-04); @@ -179,7 +183,6 @@ padding: 0; padding-top: var(--spacing-large); border-bottom: none; - border-top: 1px solid $lbry-gray-1; .channel-thumbnail { width: var(--channel-thumbnail-width--small); diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss index 9d84898d5..7b18a8de5 100644 --- a/src/ui/scss/component/_form-field.scss +++ b/src/ui/scss/component/_form-field.scss @@ -60,7 +60,6 @@ fieldset-section { label { width: auto; text-transform: none; - font-size: var(--font-multiplier-medium); } } @@ -83,6 +82,7 @@ radio-element { color: lighten($lbry-black, 20%); margin-bottom: 0; margin-left: var(--spacing-miniscule); + font-size: var(--font-body); } } diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss index 92c32b298..8268bb429 100644 --- a/src/ui/scss/component/_header.scss +++ b/src/ui/scss/component/_header.scss @@ -76,7 +76,6 @@ } } - // TODO: dark [data-mode='dark'] & { &:hover { color: $lbry-teal-3; diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss index 2ed757951..15fe195b2 100644 --- a/src/ui/scss/component/_media.scss +++ b/src/ui/scss/component/_media.scss @@ -70,6 +70,10 @@ .media__actions--between { justify-content: space-between; + + &:last-of-type:not(:only-of-type) { + margin-bottom: var(--spacing-large); + } } .media__actions--nowrap { @@ -84,7 +88,6 @@ .media__action-group--large { display: flex; - margin-bottom: var(--spacing-medium); font-size: var(--font-multiplier-medium); > * { diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss index bfe237c8f..9d7493c6a 100644 --- a/src/ui/scss/component/_navigation.scss +++ b/src/ui/scss/component/_navigation.scss @@ -39,6 +39,10 @@ color: lighten($lbry-black, 20%); margin-top: var(--spacing-small); + .icon { + stroke: $lbry-gray-5; + } + &:hover { color: $lbry-teal-4; .icon { @@ -57,7 +61,7 @@ color: var(--dm-color-01); svg { - color: var(--dm-color-01); + stroke: var(--dm-color-01); } &:hover, @@ -65,7 +69,7 @@ color: $lbry-teal-4; .icon { - color: $lbry-teal-4; + stroke: $lbry-teal-4; } } }