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;
}
}
}