clean up styles

ui/component/channelThumbnail/view.jsx

@@ -10,25 +10,29 @@ type Props = {
   className?: string,
   thumbnailPreview: ?string,
   obscure?: boolean,
+  small?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri, className, thumbnailPreview, obscure } = props;
+  const { thumbnail, uri, className, thumbnailPreview, obscure, small = false } = props;
-  // Generate a random color class based on the first letter of the channel name
-  let initializer;
-  if (thumbnail) {
-    const { channelName } = parseURI(uri);
-    initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
-  } else {
-    // if we want to default a thumbnail
-    initializer = Math.floor(Math.random() * 104729); // 10000th prime number
-  }
-  const colorClassName = `channel-thumbnail__default--${initializer % 4}`;
   const showThumb = !obscure && !!thumbnail;
+
+  // Generate a random color class based on the first letter of the channel name
+  const { channelName } = parseURI(uri);
+
+  let initializer;
+  let colorClassName;
+  if (channelName) {
+    initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
+    colorClassName = `channel-thumbnail__default--${Math.abs(initializer % 4)}`;
+  } else {
+    colorClassName = `channel-thumbnail__default--4`;
+  }
   return (
     <div
       className={classnames('channel-thumbnail', className, {
         [colorClassName]: !showThumb,
+        'channel-thumbnail--small': small,
       })}
     >
       {!showThumb && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}

ui/component/comment/view.jsx

@@ -36,36 +36,47 @@ function Comment(props: Props) {
   // to debounce subsequent requests
   const shouldFetch =
     claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
+
   useEffect(() => {
     // If author was extracted from the URI, then it must be valid.
     if (authorUri && author && !isResolvingUri && shouldFetch) {
       resolveUri(authorUri);
     }
   }, [isResolvingUri, shouldFetch, author, authorUri, resolveUri]);
+
   return (
     <li className="comment">
       <div className="comment__author-thumbnail">
-        {authorUri ? <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} /> : <ChannelThumbnail />}
+        {authorUri ? <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} small /> : <ChannelThumbnail small />}
       </div>
 
       <div className="comment__body_container">
         <span className="comment__meta">
-          <Button
+          {!author ? (
-            className="button--uri-indicator truncated-text comment__author"
+            <span className="comment__author">{__('Anonymous')}</span>
-            navigate={authorUri}
+          ) : (
-            label={author || __('Anonymous')}
+            <Button
-          />
+              className="button--uri-indicator truncated-text comment__author"
+              navigate={authorUri}
+              label={author}
+            />
+          )}
+
           <time className="comment__time" dateTime={timePosted}>
             {relativeDate(timePosted)}
           </time>
         </span>
         <div>
           {message.length >= LENGTH_TO_COLLAPSE ? (
-            <Expandable className="comment__message">
+            <div className="comment__message">
-              <MarkdownPreview content={message} promptLinks />
+              <Expandable>
-            </Expandable>
+                <MarkdownPreview content={message} />
+              </Expandable>
+            </div>
           ) : (
-            <MarkdownPreview content={message} promptLinks />
+            <div className="comment__message">
+              <MarkdownPreview content={message} />
+            </div>
           )}
         </div>
       </div>

ui/scss/component/_channel.scss

@@ -37,6 +37,11 @@ $metadata-z-index: 1;
   margin-right: var(--spacing-medium);
 }
 
+.channel-thumbnail--small {
+  height: 3rem;
+  width: 3rem;
+}
+
 .channel__thumbnail--channel-page {
   position: absolute;
   height: var(--channel-thumbnail-width);
@@ -80,6 +85,10 @@ $metadata-z-index: 1;
   background-color: #ec8383;
 }
 
+.channel-thumbnail__default--4 {
+  background-color: #ccc;
+}
+
 .channel__primary-info {
   // Ensure the profile pic/title sit ontop of the default cover background
   z-index: $metadata-z-index;

ui/scss/component/_comments.scss

@@ -1,14 +1,14 @@
-.comments {
-  @extend .ul--no-style;
-}
-
 .comment {
   font-size: var(--font-multiplier-small);
   padding: var(--spacing-small) 0;
   flex-direction: row;
-  display: flex;
+  font-size: var(--font-small);
-  &:not(:last-of-type) {
+  padding: var(--spacing-medium) 0;
-    border-bottom: 1px solid var(--lbry-gray-1);
+  margin: 0;
+
+  &:first-of-type {
+    padding-top: 0;
+  }
 
   &:not(:last-of-type) {
     border-bottom: 1px solid var(--color-border);
@@ -16,44 +16,27 @@
 }
 
 .comment__body_container {
-  padding: var(--spacing-small) 0;
+  padding-right: var(--spacing-small);
-  display: inline-block;
-  width: 100%;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: available;
 }
 
 .comment__meta {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
   text-overflow: ellipsis;
-  time {
+  margin-bottom: var(--spacing-small);
-    opacity: 0.3;
-  }
 }
 
 .comment__message {
   white-space: pre-line;
+  margin-top: var(--spacing-small);
 }
 
 .comment__author {
-  margin-bottom: 1rem;
+  text-overflow: ellipsis;
-  text-overflow: ellipsis; // This is where the magic happens
+  padding-right: var(--spacing-small);
-  flex: 1;
-  flex-basis: 400px;
-  font-weight: 600;
-}
-
-.comment__author-thumbnail {
-  display: inline-block;
 }
 
 .comment__time {
-  flex-basis: 200px;
+  opacity: 0.3;
-  text-align: right;
+  white-space: nowrap;
-  justify-content: flex-end;
 }
 
 .comment__char-count {

ui/scss/component/_markdown-preview.scss

@@ -86,6 +86,10 @@
     padding: calc(var(--spacing-miniscule) - 4px) var(--spacing-miniscule);
   }
 
+  a {
+    @extend .button--link;
+  }
+
   a,
   button {
     display: inline-block;