Merge pull request #325 from deckgo/tags-style

style(#324): improve tags style

Author: peterpeterparker

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

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

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