From f7c5f572eb9289901e91ae45e7af7ed5c3e5bb2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 28 Jan 2022 09:16:42 +0100
Subject: [PATCH] MOBILE-3814 style: Use chips on course completion statuses

---
 .../core-course-module-completion.html        | 27 ++++++++++---------
 src/theme/theme.base.scss                     |  4 +++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html
index a42b2b831..571e9f15a 100644
--- a/src/core/features/course/components/module-completion/core-course-module-completion.html
+++ b/src/core/features/course/components/module-completion/core-course-module-completion.html
@@ -3,24 +3,27 @@
 
     <ng-container *ngIf="completion.istrackeduser">
         <ng-container *ngFor="let rule of details">
-            <ion-badge *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                <strong>{{ 'core.course.completion_automatic:done' | translate }}</strong> {{ rule.rulevalue.description }}
-            </ion-badge>
+            <ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                <ion-label><strong>{{ 'core.course.completion_automatic:done' | translate }}</strong> {{ rule.rulevalue.description }}
+                </ion-label>
+            </ion-chip>
 
-            <ion-badge *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                <strong>{{ 'core.course.completion_automatic:failed' | translate }}</strong> {{ rule.rulevalue.description }}
-            </ion-badge>
+            <ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                <ion-label><strong>{{ 'core.course.completion_automatic:failed' | translate }}</strong> {{ rule.rulevalue.description }}
+                </ion-label>
+            </ion-chip>
 
-            <ion-badge *ngIf="rule.statusincomplete" color="medium" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                <strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
-            </ion-badge>
+            <ion-chip *ngIf="rule.statusincomplete" color="medium" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                <ion-label><strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
+                </ion-label>
+            </ion-chip>
         </ng-container>
     </ng-container>
 
     <ng-container *ngIf="!completion.istrackeduser">
-        <ion-badge *ngFor="let rule of details" color="light" role="listitem">
-            {{ rule.rulevalue.description }}
-        </ion-badge>
+        <ion-chip *ngFor="let rule of details" color="light" role="listitem">
+            <ion-label>{{ rule.rulevalue.description }}</ion-label>
+        </ion-chip>
     </ng-container>
 </div>
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 855294dff..85eac3689 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -842,6 +842,10 @@ ion-select-popover ion-item.core-select-option-title {
     }
 }
 
+ion-chip {
+    line-height: 1.1;
+}
+
 ion-searchbar {
     .searchbar-search-icon.ios {
         top: 4px;