comment cleanup

ui/component/channelThumbnail/index.js

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
-import { makeSelectThumbnailForUri, doResolveUri, makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectThumbnailForUri, doResolveUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
 import ChannelThumbnail from './view';
 
 const select = (state, props) => ({
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
+  isResolving: makeSelectIsUriResolving(props.uri)(state),
 });
 
 export default connect(select, {

ui/component/channelThumbnail/view.jsx

@@ -15,6 +15,7 @@ type Props = {
   allowGifs?: boolean,
   claim: ?ChannelClaim,
   doResolveUri: string => void,
+  isResolving: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
@@ -28,6 +29,7 @@ function ChannelThumbnail(props: Props) {
     allowGifs = false,
     claim,
     doResolveUri,
+    isResolving,
   } = props;
   const [thumbError, setThumbError] = React.useState(false);
   const shouldResolve = claim === undefined;
@@ -61,6 +63,7 @@ function ChannelThumbnail(props: Props) {
       className={classnames('channel-thumbnail', className, {
         [colorClassName]: !showThumb,
         'channel-thumbnail--small': small,
+        'channel-thumbnail--resolving': isResolving,
       })}
     >
       {!showThumb && (

ui/scss/component/_channel.scss

@@ -60,6 +60,10 @@ $metadata-z-index: 1;
   margin-right: var(--spacing-m);
 }
 
+.channel-thumbnail--resolving {
+  background-color: var(--color-gray-3);
+}
+
 .channel-thumbnail--small {
   height: 3rem;
   width: 3rem;
@@ -83,6 +87,7 @@ $metadata-z-index: 1;
 .channel-thumbnail__custom {
   width: 100%;
   object-fit: cover;
+  background-color: var(--color-thumbnail-background);
 }
 
 .channel-thumbnail__default {

ui/scss/component/_comments.scss

@@ -128,6 +128,7 @@ $thumbnailWidthSmall: 2rem;
 
 .comment__message {
   word-break: break-word;
+  max-width: 35rem;
 }
 
 .comment__author {

ui/scss/themes/dark.scss

@@ -54,6 +54,7 @@
   --color-purchased-alt: var(--color-purchased);
   --color-purchased-text: var(--color-gray-5);
   --color-comment-highlighted: #484734;
+  --color-thumbnail-background: var(--color-gray-5);
 
   // Text
   --color-text: #eeeeee;

ui/scss/themes/light.scss

@@ -28,6 +28,7 @@
   --color-comment-threadline: var(--color-gray-2);
   --color-comment-threadline-hover: var(--color-gray-4);
   --color-comment-threadline-border: var(--color-gray-2);
+  --color-thumbnail-background: var(--color-gray-1);
 
   // Icons
   --color-follow-bg: #ffd4da;