From ee98531c0036516fa3131dde05a8d8db7255513c Mon Sep 17 00:00:00 2001
From: jessopb <36554050+jessopb@users.noreply.github.com>
Date: Thu, 21 Apr 2022 23:02:26 -0400
Subject: [PATCH] fix repost ribbon (#7549)

---
 static/app-strings.json                 |  2 ++
 ui/component/claimRepostAuthor/view.jsx | 22 ++++++++++++----------
 ui/scss/component/_claim-list.scss      | 14 +++++++++++---
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 1a8fc9997..a35b219a6 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2315,5 +2315,7 @@
   "Clear Views": "Clear Views",
   "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.",
+  "%anonymous%": "%anonymous%",
+  "Anon --[used in <%anonymous% Reposted>]--": "Anon",
   "--end--": "--end--"
 }
diff --git a/ui/component/claimRepostAuthor/view.jsx b/ui/component/claimRepostAuthor/view.jsx
index c4daeba81..f130c7ed6 100644
--- a/ui/component/claimRepostAuthor/view.jsx
+++ b/ui/component/claimRepostAuthor/view.jsx
@@ -31,16 +31,18 @@ function ClaimRepostAuthor(props: Props) {
   if (repostUrl && !repostChannelUrl) {
     return (
       <div className="claim-preview__repost-author">
-        <Icon icon={ICONS.REPOST} size={10} />
-        <span>
-          <I18nMessage
-            tokens={{
-              anonymous: <strong>{__('Anonymous --[used in <%anonymous% Reposted>]--')}</strong>,
-            }}
-          >
-            %anonymous% Reposted
-          </I18nMessage>
-        </span>
+        <div className="claim-preview__repost-ribbon claim-preview__repost-ribbon--anon">
+          <Icon icon={ICONS.REPOST} size={10} />
+          <span>
+            <I18nMessage
+              tokens={{
+                anonymous: <strong>{__('Anon --[used in <%anonymous% Reposted>]--')}</strong>,
+              }}
+            >
+              %anonymous%
+            </I18nMessage>
+          </span>
+        </div>
       </div>
     );
   }
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index b05b85dfc..4d070da2d 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -130,9 +130,9 @@
       position: absolute;
       display: block;
       width: 225px;
-      padding-top: 4px;
+      padding-top: 2px;
       padding-right: 8px;
-      background-color: var(--color-brand-blue);
+      background-color: var(--color-gray-7);
       color: var(--color-primary-contrast);
       text-align: center;
       z-index: 1;
@@ -142,6 +142,14 @@
       top: 10px;
       transform: rotate(-45deg);
 
+      &.claim-preview__repost-ribbon--anon {
+        left: -85px;
+        top: 12px;
+        .icon {
+          margin-right: var(--spacing-xxs);
+        }
+      }
+
       .button--uri-indicator {
         top: -3px;
       }
@@ -160,7 +168,7 @@
             overflow: hidden;
 
             &:hover {
-              color: var(--color-secondary);
+              color: var(--color-primary);
             }
           }
         }