From 567a31704b9ef7f4840510a9e35e183c90b79858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 26 May 2021 13:03:32 +0200
Subject: [PATCH 1/7] MOBILE-3320 core: Fix some toolbar icons

---
 .../glossary/components/index/addon-mod-glossary-index.html | 4 ++--
 src/addons/mod/wiki/components/map/map.html                 | 2 +-
 .../storagemanager/pages/course-storage/course-storage.html | 6 +++---
 .../pages/courses-storage/courses-storage.html              | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
index 8da5fbf43..5f5ddf3c9 100644
--- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -2,11 +2,11 @@
 <core-navbar-buttons slot="end">
     <ion-button *ngIf="glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
         [attr.aria-label]="'addon.mod_glossary.browsemode' | translate">
-        <ion-icon name="fas-sort" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-sort" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <ion-button *ngIf="glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
-        <ion-icon name="fas-search" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <core-context-menu>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index 8a818a2f5..d76be6836 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -3,7 +3,7 @@
         <h1>{{ 'addon.mod_wiki.map' | translate }}</h1>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index ed63678c3..1220ca816 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -21,7 +21,7 @@
                     <p slot="end" class="ion-text-end">{{ totalSize | coreBytesToSize }}</p>
                     <ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0">
                         <ion-icon name="fas-trash" slot="icon-only"
-                            ariaLabel="{{ 'addon.storagemanager.deletecourse' | translate }}">
+                            [attr.aria-label]="'addon.storagemanager.deletecourse' | translate">
                         </ion-icon>
                     </ion-button>
                 </ion-item>
@@ -37,7 +37,7 @@
                         <p slot="end" class="ion-text-end">{{ section.totalSize | coreBytesToSize }}</p>
                         <ion-button slot="end" (click)="deleteForSection(section)">
                             <ion-icon name="fas-trash" slot="icon-only"
-                                ariaLabel="{{ 'addon.storagemanager.deletedatafrom' | translate: { name: section.name } }}">
+                                [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
                             </ion-icon>
                         </ion-button>
                     </ion-item>
@@ -55,7 +55,7 @@
                             <p slot="end" class="ion-text-end">{{ module.totalSize | coreBytesToSize }}</p>
                             <ion-button fill="clear" slot="end" (click)="deleteForModule(module)">
                                 <ion-icon name="fas-trash" slot="icon-only"
-                                    ariaLabel="{{ 'addon.storagemanager.deletedatafrom' | translate: { name: module.name } }}">
+                                    [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }">
                                 </ion-icon>
                             </ion-button>
                         </ion-item>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 17f41b5d7..41c1f226a 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -39,7 +39,7 @@
                         <p slot="end" class="ion-text-end">{{ course.totalSize | coreBytesToSize }}</p>
                         <ion-button slot="end" (click)="deleteCourse(course)" [disabled]="course.isDownloading">
                             <ion-icon name="fas-trash" slot="icon-only"
-                                ariaLabel="{{ 'addon.storagemanager.deletedatafrom' | translate: { name: course.displayname } }}">
+                                [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: course.displayname }">
                             </ion-icon>
                         </ion-button>
                     </ion-item>

From f01301e590016dc1e57694f376fc1d74f2e14916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 26 May 2021 13:39:47 +0200
Subject: [PATCH 2/7] MOBILE-3320 course: Fix on course card styles

---
 .../core-courses-course-progress.html         |  3 +-
 .../course-progress/course-progress.scss      | 30 +++++++++++--------
 src/theme/globals.mixins.scss                 | 18 +++++------
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 2327c187b..9b5b972ce 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -5,7 +5,8 @@
     </div>
     <ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
         class="core-course-header" [class.item-disabled]="course.visible == 0"
-        [class.core-course-more-than-title]="course.progress! >= 0" detail="false">
+        [class.core-course-only-title]="!showAll || course.progress! < 0 && course.completionusertracked === false"
+        detail="false">
         <ion-label
             class="ion-text-wrap core-course-title"
             [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"
diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss
index f0a4cda3e..8ca42ef7f 100644
--- a/src/core/features/courses/components/course-progress/course-progress.scss
+++ b/src/core/features/courses/components/course-progress/course-progress.scss
@@ -2,10 +2,14 @@
 
 :host {
     ion-card {
+        --vertical-margin: 12px;
+
         display: flex;
         flex-direction: column;
         align-self: stretch;
-        height: calc(100% - 20px);
+        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        margin-top: var(--vertical-margin);
+        margin-bottom: var(--vertical-margin);
 
         @for $i from 0 to length($core-course-image-background) {
             &[course-color="#{$i}"] .core-course-thumb {
@@ -42,10 +46,19 @@
         }
 
         .core-course-header {
-            padding-top: 8px;
-            padding-bottom: 8px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+
+            &.core-course-only-title {
+                &::part(native) {
+                    flex-grow: 1;
+                }
+
+            }
+
             .core-course-title {
-                margin: 5px 0;
+                margin: 12px 0;
                 flex-grow: 1;
 
                 .item-heading ion-icon {
@@ -54,10 +67,6 @@
                 }
             }
 
-            &.core-course-more-than-title {
-                padding-bottom: 0;
-            }
-
             .core-button-spinner {
                 margin: 0;
             }
@@ -93,11 +102,8 @@
         }
 
         .core-course-header {
-            padding-top: 4px;
-            padding-bottom: 4px;
-
             .core-course-title {
-                margin: 3px 0;
+                margin: 7px 0;
 
                 .item-heading ion-icon {
                     margin-right: 2px;
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
index 3cddfea7e..13c691f3e 100644
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@@ -213,16 +213,16 @@
     display: block;
 
     ion-card {
-      height: calc(100% - 20px);
-      width: calc(100% - 20px);
-      margin-top: 10px;
-      margin-bottom: 10px;
+        --vertical-margin: 10px;
+        --horizontal-margin: 10px;
 
-      @media (max-width: 360px) {
-        margin-left: 6px;
-        margin-right: 6px;
-        width: calc(100% - 12px);
-      }
+        width: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        margin: var(--vertical-margin) var(--horizontal-margin);
+
+        @media (max-width: 360px) {
+            --horizontal-margin: 6px;
+        }
     }
 
     .ion-text-wrap ion-label {

From 2fafe48af67f9a96ad20b99a3d6ce54b69950280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 26 May 2021 14:37:31 +0200
Subject: [PATCH 3/7] MOBILE-3320 core: Add size option to download refresh
 component

---
 .../components/download-refresh/core-download-refresh.html    | 4 ++--
 src/core/components/download-refresh/download-refresh.ts      | 1 +
 src/core/components/file/core-file.html                       | 4 ++--
 .../features/course/components/format/core-course-format.html | 2 +-
 .../features/course/components/module/core-course-module.html | 4 ++--
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html
index b199a90f0..9c984e977 100644
--- a/src/core/components/download-refresh/core-download-refresh.html
+++ b/src/core/components/download-refresh/core-download-refresh.html
@@ -1,14 +1,14 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
     <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark"
-        [@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
+        [@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate" [size]="size">
         <ion-icon slot="icon-only" name="cloud-download" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
         (click)="download($event, true)" color="dark" [@coreShowHideAnimation]
-        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
+        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate" [size]="size">
         <ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon>
     </ion-button>
 
diff --git a/src/core/components/download-refresh/download-refresh.ts b/src/core/components/download-refresh/download-refresh.ts
index 3aed6b4c6..e0ca3cea4 100644
--- a/src/core/components/download-refresh/download-refresh.ts
+++ b/src/core/components/download-refresh/download-refresh.ts
@@ -34,6 +34,7 @@ export class CoreDownloadRefreshComponent {
     @Input() statusTranslatable?: string; // Download status translatable string.
     @Input() enabled = false; // Whether the download is enabled.
     @Input() loading = true; // Force loading status when is not downloading.
+    @Input() size: 'small' | 'default' | 'large' = 'default'; // Size of the buttons.
     @Input() canTrustDownload = false; // If false, refresh will be shown if downloaded.
     @Output() action: EventEmitter<boolean>; // Will emit an event when the item clicked.
 
diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html
index d3e199421..7bfac250f 100644
--- a/src/core/components/file/core-file.html
+++ b/src/core/components/file/core-file.html
@@ -9,11 +9,11 @@
     </ion-label>
     <div slot="end">
         <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading"
-            [canTrustDownload]="!alwaysDownload" (action)="download()">
+            [canTrustDownload]="!alwaysDownload" (action)="download()" size="small">
         </core-download-refresh>
 
         <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)"
-            [attr.aria-label]="'core.delete' | translate" color="danger">
+            [attr.aria-label]="'core.delete' | translate" color="danger" size="small">
             <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true"></ion-icon>
         </ion-button>
     </div>
diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html
index 6aa6ce2f8..785725e7b 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -167,7 +167,7 @@
         </ion-badge>
 
         <core-download-refresh [status]="section.downloadStatus" [enabled]="downloadEnabled" (action)="prefetch(section)"
-            [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates">
+            [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates" size="small">
         </core-download-refresh>
     </div>
 </ng-template>
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index c8b4fb3c7..b43f2eeec 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -61,11 +61,11 @@
                 <div class="core-module-buttons-more">
                     <core-download-refresh [status]="downloadStatus" [enabled]="downloadEnabled"
                         [canTrustDownload]="canCheckUpdates" [loading]="spinner || module.handlerData.spinner"
-                        (action)="download($event)">
+                        (action)="download($event)" size="small">
                     </core-download-refresh>
 
                     <!-- Buttons defined by the module handler. -->
-                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark"
+                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark" size="small"
                         [hidden]="button.hidden || spinner || module.handlerData.spinner" class="core-animate-show-hide"
                         (click)="buttonClicked($event, button)"
                         [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">

From 0a99f035da63738a9fc7f2e2f32dcb99f299212c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 26 May 2021 14:48:31 +0200
Subject: [PATCH 4/7] MOBILE-3320 core: Fix some styles on blocks and empty box

---
 src/core/components/empty-box/empty-box.scss        | 5 +++--
 src/core/components/loading/loading.scss            | 5 -----
 src/core/features/block/components/block/block.scss | 3 ++-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/core/components/empty-box/empty-box.scss b/src/core/components/empty-box/empty-box.scss
index b81dc6ae7..57fdd6b20 100644
--- a/src/core/components/empty-box/empty-box.scss
+++ b/src/core/components/empty-box/empty-box.scss
@@ -1,4 +1,6 @@
 :host {
+    display: contents;
+
     .core-empty-box {
         position: absolute;
         top: 0;
@@ -47,7 +49,7 @@
         z-index: 0;
     }
 
-    @media (max-width: 350px) {
+    @media (max-height: 550px) {
         .core-empty-box {
             position: relative;
             height: auto;
@@ -73,4 +75,3 @@
 :host-context(core-block-course-blocks) .core-empty-box {
     position: relative;
 }
-
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index 1ed6c3d6e..40ff0d19d 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -38,7 +38,6 @@
 
     .core-loading-content {
         display: contents;
-        padding-bottom: 1px; /* This makes height be real */
     }
 
     &.core-loading-noheight .core-loading-content {
@@ -56,9 +55,5 @@
             padding-top: 20px;
             position: relative;
         }
-
-        .core-loading-content {
-            display: block;
-        }
     }
 }
diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss
index 6fdef379d..c33c495a9 100644
--- a/src/core/features/block/components/block/block.scss
+++ b/src/core/features/block/components/block/block.scss
@@ -1,6 +1,7 @@
 :host {
     position: relative;
-    display: block;
+    display: flex;
+    flex-direction: column;
     background: var(--background);
 
     ion-item-divider {

From 29bd7e4b387fdc801f3d571a2e81b81178e888d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 26 May 2021 14:58:37 +0200
Subject: [PATCH 5/7] MOBILE-3320 iframe: Improve iframe styles

---
 src/core/components/iframe/iframe.scss | 2 +-
 src/theme/theme.base.scss              | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/core/components/iframe/iframe.scss b/src/core/components/iframe/iframe.scss
index 67a48e598..d50e6d82e 100644
--- a/src/core/components/iframe/iframe.scss
+++ b/src/core/components/iframe/iframe.scss
@@ -9,7 +9,7 @@
         border: 0;
         display: block;
         max-width: 100%;
-        background-color: var(--gray-light);
+        background-color: var(--ion-background-color);
     }
 
     .core-loading-container {
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index d088270be..8461285ed 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -730,3 +730,10 @@ ion-content.disable-scroll-y::part(scroll) {
     z-index: auto;
     will-change: auto;
 }
+
+iframe {
+    border: 0;
+    display: block;
+    max-width: 100%;
+    background-color: var(--ion-background-color);
+}

From 77f969284b0616d66371af6fcef24d96cd4ce878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 27 May 2021 12:12:15 +0200
Subject: [PATCH 6/7] MOBILE-3320 quiz: Include time left toolbar on header to
 fix position

---
 src/addons/mod/quiz/pages/player/player.html |  7 ++--
 src/theme/theme.base.scss                    | 42 ++++++++++----------
 src/theme/theme.light.scss                   |  2 +-
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index d3df9686d..31fb22135 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -21,10 +21,8 @@
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
-</ion-header>
-<ion-content>
     <!-- Navigation arrows and time left. -->
-    <ion-toolbar *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" color="light" slot="fixed">
+    <ion-toolbar *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" color="light">
         <ion-title>
             <core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate"
                 [align]="'center'">
@@ -40,7 +38,8 @@
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
-
+</ion-header>
+<ion-content>
     <core-loading [hideUntil]="loaded">
         <!-- Navigation arrows if there's no timer. -->
         <ion-toolbar *ngIf="!endTime && questions.length && !quizAborted && !showSummary" color="light">
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 8461285ed..12670beaa 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -153,7 +153,7 @@ ion-item.ion-text-wrap ion-label {
     }
 }
 
-// Ionic toolbar.
+// Ionic toolbar on header.
 ion-app.md ion-toolbar {
     --min-height: #{$toolbar-height-md};
 }
@@ -162,29 +162,31 @@ ion-app.ios ion-toolbar {
     --min-height: #{$toolbar-height-ios};
 }
 
-ion-toolbar ion-back-button,
-ion-toolbar .in-toolbar.button-clear {
-    --color: var(--core-header-toolbar-color);
-    --ion-toolbar-color: var(--core-header-toolbar-color);
-}
+ion-header ion-toolbar {
+    ion-back-button,
+    .in-toolbar.button-clear {
+        --color: var(--core-header-toolbar-color);
+        --ion-toolbar-color: var(--core-header-toolbar-color);
+    }
 
-ion-header ion-toolbar .button.button-clear,
-ion-header ion-toolbar .button.button-solid {
-    --background: transparent;
-    --color: var(--core-header-toolbar-color);
-    --ion-color-primary: var(--core-header-toolbar-color);
-}
+    .button.button-clear,
+    .button.button-solid {
+        --background: transparent;
+        --color: var(--core-header-toolbar-color);
+        --ion-color-primary: var(--core-header-toolbar-color);
+    }
 
-ion-header ion-toolbar .button.button-clear.button-has-icon-only,
-ion-header ion-toolbar .button.button-solid.button-has-icon-only {
-    --border-radius: 50%;
-    width: 48px;
-    height: 48px;
-}
+    .button.button-clear.button-has-icon-only,
+    .button.button-solid.button-has-icon-only {
+        --border-radius: 50%;
+        width: 48px;
+        height: 48px;
+    }
 
 
-ion-toolbar .core-navbar-button-hidden {
-    display: none !important;
+    .core-navbar-button-hidden {
+        display: none !important;
+    }
 }
 
 // Ionic icon.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 20ee9e9c1..102ea5bdd 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -107,7 +107,7 @@
     --core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
     --core-header-toolbar-background: #{$toolbar-background};
     --core-header-toolbar-color: #{$toolbar-color};
-    ion-toolbar {
+    ion-header ion-toolbar {
         --color: var(--core-header-toolbar-color);
         --background: var(--core-header-toolbar-background);
         ion-button {

From bedd6a61e50ba1d4df7d38e2c4869b46b67d98c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 27 May 2021 16:10:43 +0200
Subject: [PATCH 7/7] MOBILE-3320 core: Improve search bar styles

---
 src/theme/theme.base.scss  | 14 +++++++++++++-
 src/theme/theme.dark.scss  |  7 +++----
 src/theme/theme.light.scss | 19 +++++++++++++++----
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 12670beaa..fbf74fb8f 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -477,6 +477,10 @@ ion-card ion-item img.core-module-icon[slot="start"] {
     margin-left: 32px;
 }
 
+.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation * {
+    display: inline !important;
+}
+
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
     padding: 0;
@@ -510,6 +514,15 @@ ion-select::part(text) {
     white-space: normal;
 }
 
+ion-searchbar {
+    .searchbar-search-icon.ios {
+        top: 4px;
+    }
+    .searchbar-search-icon.md {
+        top: 12px;
+    }
+}
+
 // File uploader.
 .action-sheet-button input.core-fileuploader-file-handler-input {
     position: absolute;
@@ -605,7 +618,6 @@ ion-back-button.md::part(text) {
     display: none;
 }
 
-
 .core-media-adapt-width {
     max-width: 100%;
 }
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index f82052ef0..9b88dac3c 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -79,10 +79,9 @@
     --core-tab-border-color: #{$core-tab-border-color-dark};
     --core-tab-color-active: #{$core-tab-color-active-dark};
     --core-tab-border-color-active: #{$core-tab-border-color-active-dark};
-    core-progress-bar {
-        --color: #{$core-progressbar-color-dark};
-        --text-color: #{$core-progressbar-text-color-dark};
-    }
+
+    --core-progressbar-color: #{$core-progressbar-color-dark};
+    --core-progressbar-text-color: #{$core-progressbar-text-color-dark};
 
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-detail-icon-color: var(--white);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 102ea5bdd..9f992fe7b 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -121,6 +121,13 @@
         }
     }
 
+    ion-searchbar {
+        --background: var(--ion-item-background);
+        .searchbar-input {
+            height: var(--a11y-min-target-size);
+        }
+    }
+
     ion-action-sheet {
         --button-color-selected: #{$action-sheet-selected};
         --title-border-color: var(--gray);
@@ -161,11 +168,15 @@
         --color: var(--ion-color-primary);
     }
 
+    --core-progressbar-height: #{$core-progressbar-height};
+    --core-progressbar-color: #{$core-progressbar-color};
+    --core-progressbar-text-color: #{$core-progressbar-text-color};
+    --core-progressbar-background: #{$core-progressbar-background};
     core-progress-bar {
-        --height: #{$core-progressbar-height};
-        --color: #{$core-progressbar-color};
-        --text-color: #{$core-progressbar-text-color};
-        --background: #{$core-progressbar-background};
+        --height: var(--core-progressbar-height);
+        --color: var(--core-progressbar-color);
+        --text-color: var(--core-progressbar-text-color);
+        --background: var(--core-progressbar-background);
     }
 
     core-block-course-blocks {