feat: style tags on event-detail page

farscrl · Dec 8, 2023 · 084bac8 · 084bac8
1 parent c98eb3c
commit 084bac8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/app/components/events/event-details/event-details.component.html b/src/app/components/events/event-details/event-details.component.html
@@ -66,23 +66,23 @@ <h1>{{ event.title }}</h1>
 
             <ng-container *ngIf="event.genres.length > 0">
                 <hr>
-                <div class="d-flex genres">
+                <div class="genres">
                     <div class="highlight">{{ 'EVENT_DETAILS.GENRE' | translate }}</div>
                     <div class="tags">
                         <ng-container *ngFor="let genre of event.genres">
-                            <span class="tag-element active">{{ genre.name }}</span>
+                            <span class="tag">{{ genre.name }}</span>
                         </ng-container>
                     </div>
                 </div>
             </ng-container>
 
             <ng-container *ngIf="event.regions.length > 0">
                 <hr>
-                <div class="d-flex regions">
+                <div class="regions">
                     <div class="highlight">{{ 'EVENT_DETAILS.REGION' | translate }}</div>
                     <div class="tags">
                         <ng-container *ngFor="let region of event.regions">
-                            <span class="tag-element active">{{ region.name }}</span>
+                            <span class="tag">{{ region.name }}</span>
                         </ng-container>
                     </div>
                 </div>

diff --git a/src/app/components/events/event-details/event-details.component.scss b/src/app/components/events/event-details/event-details.component.scss
@@ -112,8 +112,17 @@ img {
     flex-wrap: wrap;
     white-space: nowrap;
 
-    .tag-element {
-        margin: 0 4px 8px;
+    .tag {
+        background-color: var(--accent);
+        color: white;
+        padding: 2px 4px;
+        font-size: 0.85rem;
+        margin-right: 6px;
+        margin-bottom: 6px;
+
+        @include media-breakpoint-up(lg) {
+            font-size: 1rem;
+        }
     }
 }