From c2c69a2f7087caa34b40a4911e59e3aef58913a4 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Mon, 21 Oct 2019 14:34:26 +0300
Subject: [PATCH] update styling and wording for pinned post ribbons

---
 webapp/components/PostCard/PostCard.vue | 8 ++++----
 webapp/components/Ribbon/index.vue      | 8 ++++++++
 webapp/locales/de.json                  | 2 +-
 webapp/locales/en.json                  | 2 +-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index e1c63c121..f368fadbb 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/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>
diff --git a/webapp/components/Ribbon/index.vue b/webapp/components/Ribbon/index.vue
index c92935352..c8c09c194 100644
--- a/webapp/components/Ribbon/index.vue
+++ b/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>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 9c460bcd7..923bc487d 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -354,7 +354,7 @@
   },
   "post": {
     "name": "Beitrag",
-    "pinned": "Gepinnt",
+    "pinned": "Meldung",
     "moreInfo": {
       "name": "Mehr Info",
       "title": "Mehr Informationen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 2295ef44b..abfad576d 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -355,7 +355,7 @@
   },
   "post": {
     "name": "Post",
-    "pinned": "Pinned",
+    "pinned": "Announcement",
     "moreInfo": {
       "name": "More info",
       "title": "More information",