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;