diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index 511772ad3..e08984d9a 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/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 (
@@ -173,7 +181,7 @@ function ClaimPreviewTile(props: Props) {
{/* @endif */}
-
+
)}
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 24fa5f86a..0ebce3c0e 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/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;
diff --git a/ui/scss/init/_color.scss b/ui/scss/init/_color.scss
index ce5c91d19..70573ea47 100644
--- a/ui/scss/init/_color.scss
+++ b/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;