improve styling on comment thumbnails on staked indicator placement

ui/component/channelStakedIndicator/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import { SIMPLE_SITE } from 'config';
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
@@ -58,6 +59,7 @@ function ChannelStakedIndicator(props: Props) {
   const icon = getChannelIcon(level);
 
   return (
+    SIMPLE_SITE && (
       <Tooltip
         label={
           <div className="channel-staked__tooltip">
@@ -82,6 +84,7 @@ function ChannelStakedIndicator(props: Props) {
           <LevelIcon icon={icon} large={large} isControlling={isControlling} />
         </div>
       </Tooltip>
+    )
   );
 }
 

ui/component/claimPreviewSubtitle/view.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import UriIndicator from 'component/uriIndicator';
 import DateTime from 'component/dateTime';
 import Button from 'component/button';
-import ChannelThumbnail from 'component/channelThumbnail';
 import { parseURI } from 'lbry-redux';
 
 type Props = {
@@ -17,7 +16,6 @@ type Props = {
 function ClaimPreviewSubtitle(props: Props) {
   const { pending, uri, claim, type, beginPublish } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
-  const channelUri = claim && claim.signing_channel && claim.signing_channel.permanent_url;
 
   let isChannel;
   let name;
@@ -29,7 +27,6 @@ function ClaimPreviewSubtitle(props: Props) {
     <div className="media__subtitle">
       {claim ? (
         <React.Fragment>
-          {!isChannel && channelUri && type !== 'small' && <ChannelThumbnail uri={channelUri} />}
           <UriIndicator uri={uri} link />{' '}
           {!pending &&
             claim &&

ui/scss/component/_channel.scss

@@ -371,9 +371,9 @@ $metadata-z-index: 1;
 .channel-staked__wrapper {
   display: flex;
   position: absolute;
-  bottom: -0.9rem;
-  left: -0.9rem;
   padding: 0.25rem;
+  bottom: -0.75rem;
+  left: -0.75rem;
   background-color: var(--color-card-background);
   border-radius: 50%;
 }

ui/scss/component/_claim-list.scss

@@ -249,8 +249,14 @@
   align-items: flex-start;
 
   .channel-thumbnail {
+    display: none;
     @include handleChannelGif(1.4rem);
     margin-right: 0;
+    margin-left: var(--spacing-s);
+
+    @media (min-width: $breakpoint-small) {
+      display: block;
+    }
   }
 }
 

ui/scss/component/_comments.scss

@@ -1,5 +1,5 @@
 $thumbnailWidth: 1.5rem;
-$thumbnailWidthSmall: 0rem;
+$thumbnailWidthSmall: 1rem;
 
 .comments {
   list-style-type: none;
@@ -50,11 +50,22 @@ $thumbnailWidthSmall: 0rem;
     @media (min-width: $breakpoint-small) {
       @include handleChannelGif($thumbnailWidth);
     }
+
+    .channel-staked__wrapper {
+      @media (max-width: $breakpoint-small) {
+        padding: 0;
+        left: 0;
+        bottom: -1rem;
+        padding: -1rem;
+        margin-left: 0;
+      }
+    }
   }
 }
 
 .comment__thumbnail-wrapper {
   flex: 0;
+  margin-top: var(--spacing-xxs);
 }
 
 .comment__content {