fix repost ribbon #7549

Merged
jessopb merged 1 commit from fix-repostRibbon into master 2022-04-22 05:02:26 +02:00
3 changed files with 25 additions and 13 deletions
Showing only changes of commit 48a77d3faa - Show all commits

View file

@ -2315,5 +2315,7 @@
"Clear Views": "Clear Views", "Clear Views": "Clear Views",
"Show Video View Progress": "Show Video View Progress", "Show Video View Progress": "Show Video View Progress",
"Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.": "Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.", "Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.": "Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.",
"%anonymous%": "%anonymous%",
"Anon --[used in <%anonymous% Reposted>]--": "Anon",
"--end--": "--end--" "--end--": "--end--"
} }

View file

@ -31,16 +31,18 @@ function ClaimRepostAuthor(props: Props) {
if (repostUrl && !repostChannelUrl) { if (repostUrl && !repostChannelUrl) {
return ( return (
<div className="claim-preview__repost-author"> <div className="claim-preview__repost-author">
<Icon icon={ICONS.REPOST} size={10} /> <div className="claim-preview__repost-ribbon claim-preview__repost-ribbon--anon">
<span> <Icon icon={ICONS.REPOST} size={10} />
<I18nMessage <span>
tokens={{ <I18nMessage
anonymous: <strong>{__('Anonymous --[used in <%anonymous% Reposted>]--')}</strong>, tokens={{
}} anonymous: <strong>{__('Anon --[used in <%anonymous% Reposted>]--')}</strong>,
> }}
%anonymous% Reposted >
</I18nMessage> %anonymous%
</span> </I18nMessage>
</span>
</div>
</div> </div>
); );
} }

View file

@ -130,9 +130,9 @@
position: absolute; position: absolute;
display: block; display: block;
width: 225px; width: 225px;
padding-top: 4px; padding-top: 2px;
padding-right: 8px; padding-right: 8px;
background-color: var(--color-brand-blue); background-color: var(--color-gray-7);
color: var(--color-primary-contrast); color: var(--color-primary-contrast);
text-align: center; text-align: center;
z-index: 1; z-index: 1;
@ -142,6 +142,14 @@
top: 10px; top: 10px;
transform: rotate(-45deg); transform: rotate(-45deg);
&.claim-preview__repost-ribbon--anon {
left: -85px;
top: 12px;
.icon {
margin-right: var(--spacing-xxs);
}
}
.button--uri-indicator { .button--uri-indicator {
top: -3px; top: -3px;
} }
@ -160,7 +168,7 @@
overflow: hidden; overflow: hidden;
&:hover { &:hover {
color: var(--color-secondary); color: var(--color-primary);
} }
} }
} }