ClaimPreviewTile: add attribute to show "LIVE" tag.

It would have been a clean implementation through `renderProperties`, but due to the need to adjust the opacity of `claim-preview__file-property-overlay` (the parent elemtn), I ended up having to create a new `live` attribute.

ui/component/claimPreviewTile/view.jsx

@@ -41,6 +41,7 @@ type Props = {
   showMature: boolean,
   showHiddenByUser?: boolean,
   properties?: (Claim) => void,
+  live?: boolean,
 };
 
 function ClaimPreviewTile(props: Props) {
@@ -62,6 +63,7 @@ function ClaimPreviewTile(props: Props) {
     showMature,
     showHiddenByUser,
     properties,
+    live,
   } = props;
   const isRepost = claim && claim.repost_channel_url;
   const shouldFetch = claim === undefined;
@@ -155,12 +157,18 @@ function ClaimPreviewTile(props: Props) {
     );
   }
 
+  let liveProperty = null;
+  if (live === true) {
+    liveProperty = (claim) => <>LIVE</>;
+  }
+
   return (
     <li
       role="link"
       onClick={handleClick}
       className={classnames('card claim-preview--tile', {
         'claim-preview__wrapper--channel': isChannel,
+        'claim-preview__live': live,
       })}
     >
       <NavLink {...navLinkProps}>
@@ -173,7 +181,7 @@ function ClaimPreviewTile(props: Props) {
               </div>
               {/* @endif */}
               <div className="claim-preview__file-property-overlay">
-                <FileProperties uri={uri} small properties={properties} />
+                <FileProperties uri={uri} small properties={liveProperty || properties} />
               </div>
             </React.Fragment>
           )}

ui/scss/component/_claim-list.scss

@@ -621,6 +621,19 @@
   }
 }
 
+.claim-preview__live {
+  .claim-preview__file-property-overlay {
+    opacity: 1; // The original 0.7 is not visible over bright thumbnails
+    color: var(--color-white-alt);
+    background-color: var(--color-live);
+  }
+
+  .file-properties {
+    font-weight: var(--font-weight-bold);
+    margin-top: 2px; // Even out bottom spacing due to all caps "LIVE".
+  }
+}
+
 .claim-link {
   @include font-sans;
   position: relative;

ui/scss/init/_color.scss

@@ -13,6 +13,7 @@
   --color-cost: #ffd580;
   --color-focus: #93cff2;
   --color-notification: #f02849;
+  --color-live: #cc190f;
 
   --color-black: #111;
   --color-white: #fdfdfd;