From 2887290c30abd1a10c0355836525ae507285c60e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 16 Mar 2022 12:15:32 +0100
Subject: [PATCH] MOBILE-3814 course: Add course header background color

---
 .../features/course/pages/index/index.html    | 39 ++++++++++---------
 .../features/course/pages/index/index.scss    |  4 ++
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index a0e768d08..7c445a8af 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/src/core/features/course/pages/index/index.html
@@ -16,24 +16,25 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
-    <ng-container *ngIf="course">
-        <div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
-            <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
-            </ion-icon>
-        </div>
-        <ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
-            <img [src]="course.courseImage" core-external-content alt="" />
-        </ion-avatar>
-    </ng-container>
+<div class="core-course-header">
+    <ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
+        <ng-container *ngIf="course">
+            <div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
+                <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
+                </ion-icon>
+            </div>
+            <ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
+                <img [src]="course.courseImage" core-external-content alt="" />
+            </ion-avatar>
+        </ng-container>
 
-    <ion-label>
-        <h1>{{ title }}</h1>
-        <div class="core-course-progress" *ngIf="progress !== undefined">
-            <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
-            </core-progress-bar>
-        </div>
-    </ion-label>
-
-</ion-item>
+        <ion-label>
+            <h1>{{ title }}</h1>
+            <div class="core-course-progress" *ngIf="progress !== undefined">
+                <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
+                </core-progress-bar>
+            </div>
+        </ion-label>
+    </ion-item>
+</div>
 <core-tabs-outlet [tabs]="tabs" [hideUntil]="loaded" (ionChange)="tabSelected()"></core-tabs-outlet>
diff --git a/src/core/features/course/pages/index/index.scss b/src/core/features/course/pages/index/index.scss
index 6b75fd1e8..3ae1498bb 100644
--- a/src/core/features/course/pages/index/index.scss
+++ b/src/core/features/course/pages/index/index.scss
@@ -44,4 +44,8 @@
     h1 {
         font-size: 20px;
     }
+
+    .core-course-header {
+        background: var(--ion-item-background);
+    }
 }