From 8d310d7ac93073896e2877d5738e925a9a876292 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sun, 8 Sep 2019 20:34:04 +0200
Subject: [PATCH] style(#324): improve tags style

---
 .../card/app-feed-card-tags/app-feed-card-tags.scss    | 10 ++++++----
 .../card/app-feed-card-tags/app-feed-card-tags.tsx     |  2 +-
 .../feed/card/app-feed-card/app-feed-card.tsx          |  4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.scss b/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.scss
index 1abc18bd0..c688e0be0 100644
--- a/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.scss
+++ b/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.scss
@@ -10,15 +10,17 @@ app-feed-card-tags {
   height: 42px;
 
   div.chips {
-    background: var(--card-tags-background, rgba(var(--ion-color-primary-rgb), 0.08));
-    color: var(--card-tags-color, var(--ion-color-primary-shade));
+    background: var(--card-tags-background, rgba(var(--ion-color-medium-rgb), 0.08));
+    color: var(--card-tags-color, var(--ion-color-medium));
     border-radius: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 4px 8px;
-    margin: 4px 4px 4px 0;
-    height: 100%;
+
+    &:not(:first-of-type) {
+      margin: 0 4px;
+    }
 
     font-size: var(--font-size-normal);
 
diff --git a/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.tsx b/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.tsx
index eb4326827..3e4cd1b89 100644
--- a/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.tsx
+++ b/studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.tsx
@@ -38,7 +38,7 @@ export class AppFeedCardTags {
                     return (
                         <div class="chips">
                             {this.renderCloseTags(tag)}
-                            <ion-label>{tag}</ion-label>
+                            <ion-label>{this.editable ? '' : '#'}{tag}</ion-label>
                         </div>
                     )
                 })
diff --git a/studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx b/studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx
index ba2090017..1cc95c319 100644
--- a/studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx
+++ b/studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx
@@ -138,7 +138,7 @@ export class AppFeedCard {
                 {this.renderAuthor()}
             </ion-card-header>
 
-            <p class="content ion-padding">{this.description}</p>
+            <p class="content ion-padding-start ion-padding-end ion-padding-bottom">{this.description}</p>
 
             {this.renderTags()}
         </ion-card-content>
@@ -165,7 +165,7 @@ export class AppFeedCard {
 
     private renderTags() {
         if (this.tags && this.tags.length) {
-            return <app-feed-card-tags tags={this.tags} class="ion-margin"></app-feed-card-tags>;
+            return <app-feed-card-tags tags={this.tags} class="ion-margin-start ion-margin-end ion-margin-bottom"></app-feed-card-tags>;
         } else {
             return undefined;
         }