fix repost ribbon (#7549)

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--"
 }

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>
     );
   }

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);
             }
           }
         }