update styling and wording for pinned post ribbons

webapp/components/PostCard/PostCard.vue

@@ -1,7 +1,7 @@
 <template>
   <ds-card
     :image="post.image | proxyApiUrl"
-    :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--target': isPinned }"
+    :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--pinned': isPinned }"
   >
     <!-- Post Link Target -->
     <nuxt-link
@@ -16,7 +16,7 @@
       <client-only>
         <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
       </client-only>
-      <hc-ribbon v-if="isPinned" :text="$t('post.pinned')" />
+      <hc-ribbon v-if="isPinned" class="ribbon--pinned" :text="$t('post.pinned')" />
       <hc-ribbon v-else :text="$t('post.name')" />
     </div>
     <ds-space margin-bottom="small" />
@@ -180,7 +180,7 @@ export default {
   }
 }
 
-.post--target {
-  border: 1px solid $color-primary;
+.post--pinned {
+  border: 1px solid $color-warning;
 }
 </style>

webapp/components/Ribbon/index.vue

@@ -46,4 +46,12 @@ export default {
     border-color: $background-color-secondary transparent transparent $background-color-secondary;
   }
 }
+
+.ribbon--pinned {
+  background-color: $color-warning-active;
+
+  &::before {
+    border-color: $color-warning transparent transparent $color-warning;
+  }
+}
 </style>

webapp/locales/de.json

@@ -354,7 +354,7 @@
   },
   "post": {
     "name": "Beitrag",
-    "pinned": "Gepinnt",
+    "pinned": "Meldung",
     "moreInfo": {
       "name": "Mehr Info",
       "title": "Mehr Informationen",

webapp/locales/en.json

@@ -355,7 +355,7 @@
   },
   "post": {
     "name": "Post",
-    "pinned": "Pinned",
+    "pinned": "Announcement",
     "moreInfo": {
       "name": "More info",
       "title": "More information",