MOBILE-3833 my: Style Filter buttons

src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html

@@ -22,6 +22,14 @@
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
 
+    <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">
+            </ion-searchbar>
+        </ion-col>
+    </ion-row>
     <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)"
@@ -59,14 +67,6 @@
             </ion-button>
         </ion-col>
     </ion-row>
-    <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">
-            </ion-searchbar>
-        </ion-col>
-    </ion-row>
 
     <core-empty-box *ngIf="filteredCourses.length == 0" image="assets/img/icons/courses.svg"
         [message]="'addon.block_myoverview.nocourses' | translate">

src/addons/block/myoverview/components/myoverview/myoverview.scss

@@ -1,21 +1,35 @@
 :host {
     ion-row.addon-block-myoverview-filter {
-        padding: 4px 8px 0px 8px;
+        margin: 8px;
+        padding: 0;
 
         ion-col {
-            padding: 0 2px;
+            padding: 0;
         }
 
         ion-button,
         core-combobox ::ng-deep ion-button {
+            --border-width: 0;
+            --a11y-min-target-size: 40px;
             margin: 0;
+
+            .select-icon {
+                display: none;
+            }
             ion-icon {
                 font-size: 20px;
             }
         }
 
-        ::ng-deep ion-searchbar {
+        core-combobox ::ng-deep ion-select {
+            margin: 0;
+            --a11y-min-target-size: 40px;
+        }
+
+       ion-searchbar {
             padding: 0;
+            --height: 40px;
         }
     }
+
 }

src/theme/theme.base.scss

@@ -1091,20 +1091,28 @@ ion-chip {
 }
 
 ion-searchbar {
-    .searchbar-search-icon.ios {
+    height: var(--height) !important;
-        top: 4px;
-    }
-    .searchbar-search-icon.md {
-    }
 
-    .searchbar-input,
+    .searchbar-input-container {
-    .sc-ion-searchbar-md.searchbar-input,
+        color: var(--color) !important;
-    .sc-ion-searchbar-ios.searchbar-input {
+        height: var(--height) !important;
-        @include padding-horizontal(48px);
     }
 
     .searchbar-input {
-        @include padding-horizontal(48px);
+        height: var(--height) !important;
+        border: 1px solid var(--border-color) !important;
+        box-shadow: none !important;
+        border-radius: var(--border-radius) !important;
+        background: var(--background) !important;
+        @include padding-horizontal(var(--height) !important);
+    }
+
+    .searchbar-search-icon {
+        @include position(null, null, null, calc(var(--height) / 4) !important);
+    }
+
+    button {
+        @include position(null, 0 !important, null, null);
     }
 }
 

src/theme/theme.light.scss

@@ -190,23 +190,16 @@
     --ion-searchbar-background: var(--ion-background-color);
     --ion-searchbar-border-color: var(--core-input-stroke);
     --ion-searchbar-border-radius: var(--core-input-radius);
+    --ion-searchbar-height: var(--a11y-min-target-size);
     --ion-searchbar-color: var(--text-color);
     --ion-searchbar-icon-color: var(--core-input-stroke);
     ion-searchbar {
         --background: var(--ion-searchbar-background);
         --border-color: var(--ion-searchbar-border-color);
+        --color: var(--ion-searchbar-color);
+        --border-radius: var(--ion-searchbar-border-radius);
         --icon-color: var(--ion-searchbar-icon-color);
-
+        --height: var(--ion-searchbar-height);
-        .searchbar-input-container {
-            color: var(--ion-searchbar-color) !important;
-        }
-        .searchbar-input {
-            height: var(--a11y-min-target-size);
-            border: 1px solid var(--ion-searchbar-border-color);
-            box-shadow: none;
-            border-radius: var(--ion-searchbar-border-radius);
-            background: var(--ion-searchbar-background) !important;
-        }
     }
 
     --core-search-box-background: var(--ion-background-color);