From b155c8eec159af7112896fafc3dc25dfc2edb6bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 16 Feb 2022 12:15:14 +0100
Subject: [PATCH] MOBILE-3814 myoverview: Fix filter margins and icons

---
 .../myoverview/addon-block-myoverview.html    | 14 ++++++-------
 .../components/myoverview/myoverview.scss     | 21 +++++++++++++++++++
 .../components/myoverview/myoverview.ts       |  1 +
 src/core/components/combobox/combobox.scss    |  2 +-
 src/theme/theme.base.scss                     |  7 ++++++-
 5 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 src/addons/block/myoverview/components/myoverview/myoverview.scss

diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index e76d98387..86f4ba3b1 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -22,19 +22,19 @@
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
 
-    <ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center" *ngIf="hasCourses">
-        <ion-col size="auto" class="ion-no-padding" *ngIf="filters.enabled">
+    <ion-row class="ion-justify-content-between ion-align-items-center addon-block-myoverview-filter" *ngIf="hasCourses">
+        <ion-col size="auto" *ngIf="filters.enabled">
             <core-combobox interface="modal" [label]="'core.courses.filtermycourses' | translate" (onChange)="filterOptionsChanged($event)"
                 icon="fas-filter" [badge]="filters.count" [modalOptions]="filterModalOptions">
             </core-combobox>
         </ion-col>
-        <ion-col class="ion-no-padding">
+        <ion-col>
             <!-- Filter courses. -->
             <ion-searchbar class="ion-hide-md-down" [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
                 (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
             </ion-searchbar>
         </ion-col>
-        <ion-col size="auto" class="ion-no-padding" *ngIf="sort.enabled">
+        <ion-col size="auto" *ngIf="sort.enabled">
             <core-combobox [label]="'core.sortby' | translate" [selection]="sort.selected" (onChange)="sortCourses($event)"
                 icon="fas-sort-amount-down-alt">
                 <ion-select-option class="ion-text-wrap" value="fullname">
@@ -48,7 +48,7 @@
                 </ion-select-option>
             </core-combobox>
         </ion-col>
-        <ion-col size="auto" class="ion-no-padding" *ngIf="isLayoutSwitcherAvailable">
+        <ion-col size="auto" *ngIf="isLayoutSwitcherAvailable">
             <ion-button *ngIf="layout == 'card'" fill="outline" (click)="toggleLayout('list')"
                 [attr.aria-label]="'addon.block_myoverview.list' | translate">
                 <ion-icon slot="icon-only" name="fas-list"></ion-icon>
@@ -59,8 +59,8 @@
             </ion-button>
         </ion-col>
     </ion-row>
-    <ion-row class="ion-no-padding ion-hide-md-up" *ngIf="hasCourses">
-        <ion-col class="ion-no-padding">
+    <ion-row class="ion-hide-md-up addon-block-myoverview-filter" *ngIf="hasCourses">
+        <ion-col>
             <!-- Filter courses. -->
             <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
                 (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss
new file mode 100644
index 000000000..9c2cb0d56
--- /dev/null
+++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss
@@ -0,0 +1,21 @@
+:host {
+    ion-row.addon-block-myoverview-filter {
+        padding: 4px 8px 0px 8px;
+
+        ion-col {
+            padding: 0 2px;
+        }
+
+        ion-button,
+        core-combobox ::ng-deep ion-button {
+            margin: 0;
+            ion-icon {
+                font-size: 20px;
+            }
+        }
+
+        ::ng-deep ion-searchbar {
+            padding: 0;
+        }
+    }
+}
diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.ts b/src/addons/block/myoverview/components/myoverview/myoverview.ts
index b7201c44c..c1f84f909 100644
--- a/src/addons/block/myoverview/components/myoverview/myoverview.ts
+++ b/src/addons/block/myoverview/components/myoverview/myoverview.ts
@@ -39,6 +39,7 @@ const FILTER_PRIORITY: AddonBlockMyOverviewTimeFilters[] = ['all', 'inprogress',
 @Component({
     selector: 'addon-block-myoverview',
     templateUrl: 'addon-block-myoverview.html',
+    styleUrls: ['myoverview.scss'],
 })
 export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implements OnInit, OnDestroy {
 
diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index 7bbd14a23..8ebd587a7 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -7,7 +7,7 @@
 
     ion-select,
     ion-button {
-        --icon-margin: 0 8px;
+        --icon-margin: 0 4px;
         --background: var(--core-combobox-background);
         --background-hover: black;
         --background-activated: black;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index c30dae7a9..45e7221d6 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -948,7 +948,12 @@ ion-searchbar {
         top: 4px;
     }
     .searchbar-search-icon.md {
-        top: 12px;
+    }
+
+    .searchbar-input,
+    .sc-ion-searchbar-md.searchbar-input,
+    .sc-ion-searchbar-ios.searchbar-input {
+        @include padding-horizontal(48px);
     }
 }