MOBILE-3833 timeline: Import styles from myoverview

src/addons/block/timeline/components/events/addon-block-timeline-events.html

@@ -53,7 +53,7 @@
                         </ion-row>
                     </ion-col>
                     <ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action?.actionable">
-                        <ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name">
+                        <ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name" class="chip">
                             {{event.action.name}}
                             <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
                                 {{event.action.itemcount}}

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

@@ -4,13 +4,21 @@
     </ion-label>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
-    <ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center">
+    <ion-row class="ion-hide-md-up addon-block-timeline-filter" *ngIf="searchEnabled">
-        <ion-col size="auto" class="ion-no-padding">
+        <ion-col>
-            <core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
+            <!-- Filter courses. -->
+            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
+                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
+                searchArea="AddonBlockTimeline"></core-search-box>
+        </ion-col>
+    </ion-row>
+    <ion-row class="ion-justify-content-between ion-align-items-center addon-block-timeline-filter">
+        <ion-col size="auto">
+            <core-combobox [selection]="filter" (onChange)="switchFilter($event)">
                 <ion-select-option class="ion-text-wrap" value="all">
                     {{ 'core.all' | translate }}
                 </ion-select-option>
-                <ion-select-option class="ion-text-wrap" value="overdue">
+                <ion-select-option class="ion-text-wrap core-select-option-border-bottom" value="overdue">
                     {{ 'addon.block_timeline.overdue' | translate }}
                 </ion-select-option>
                 <ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
@@ -30,13 +38,13 @@
                 </ion-select-option>
             </core-combobox>
         </ion-col>
-        <ion-col class="ion-no-padding ion-hide-md-down" *ngIf="searchEnabled">
+        <ion-col class="ion-hide-md-down" *ngIf="searchEnabled">
             <!-- Filter courses. -->
             <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
                 [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
                 searchArea="AddonBlockTimeline"></core-search-box>
         </ion-col>
-        <ion-col size="auto" class="ion-no-padding">
+        <ion-col size="auto">
             <core-combobox [label]="'core.sortby' | translate" [selection]="sort" (onChange)="switchSort($event)"
                 icon="fas-sort-amount-down-alt">
                 <ion-select-option class="ion-text-wrap" value="sortbydates">
@@ -48,14 +56,7 @@
             </core-combobox>
         </ion-col>
     </ion-row>
-    <ion-row class="ion-no-padding ion-hide-md-up" *ngIf="searchEnabled">
+
-        <ion-col class="ion-no-padding">
-            <!-- Filter courses. -->
-            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
-                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
-                searchArea="AddonBlockTimeline"></core-search-box>
-        </ion-col>
-    </ion-row>
 
     <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'">
         <addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"

src/addons/block/timeline/components/timeline/timeline.scss

@@ -0,0 +1,38 @@
+:host {
+    ion-row.addon-block-timeline-filter {
+        margin: 8px;
+        padding: 0;
+
+        ion-col {
+            padding: 0;
+            margin-right: 2px;
+            margin-left: 2px;
+        }
+
+        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;
+            }
+        }
+
+        core-combobox ::ng-deep ion-select {
+            margin: 0;
+            --a11y-min-target-size: 40px;
+        }
+
+       core-search-box {
+            padding: 0;
+            margin: 0;
+            --height: 40px;
+        }
+    }
+
+}

src/addons/block/timeline/components/timeline/timeline.ts

@@ -31,6 +31,7 @@ import { CoreNavigator } from '@services/navigator';
 @Component({
     selector: 'addon-block-timeline',
     templateUrl: 'addon-block-timeline.html',
+    styleUrls: ['timeline.scss'],
 })
 export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implements OnInit {
 

src/core/features/search/components/search-box/core-search-box.html

@@ -1,26 +1,24 @@
-<ion-card>
+<form (ngSubmit)="submitForm($event)" role="search" #searchForm>
-    <form (ngSubmit)="submitForm($event)" role="search" #searchForm>
+    <ion-item class="search-box">
-        <ion-item>
+        <ion-label class="sr-only">{{ placeholder }}</ion-label>
-            <ion-label class="sr-only">{{ placeholder }}</ion-label>
+        <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
-            <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
+            [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
-                [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
+        </ion-input>
-            </ion-input>
+        <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
-            <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
+            [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
-                [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
+            <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
-                <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
+        </ion-button>
-            </ion-button>
+        <ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
-            <ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
+            [disabled]="searched == '' || disabled" (click)="clearForm()">
-                [disabled]="searched == '' || disabled" (click)="clearForm()">
+            <ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
-                <ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
+        </ion-button>
-            </ion-button>
+    </ion-item>
+    <ion-list class="core-search-history" [hidden]="!historyShown">
+        <ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" tabindex="0"
+            detail="true">
+            <ion-icon name="fas-history" slot="start" aria-hidden="true">
+            </ion-icon>
+            <ion-label>{{item.searchedtext}}</ion-label>
         </ion-item>
-        <ion-list class="core-search-history" [hidden]="!historyShown">
+    </ion-list>
-            <ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)"
+</form>
-                tabindex="0" detail="true">
-                <ion-icon name="fas-history" slot="start" aria-hidden="true">
-                </ion-icon>
-                <ion-label>{{item.searchedtext}}</ion-label>
-            </ion-item>
-        </ion-list>
-    </form>
-</ion-card>

src/core/features/search/components/search-box/search-box.scss

@@ -1,29 +1,40 @@
 :host {
-    min-height: var(--a11y-min-target-size);
+    --height: var(--a11y-min-target-size);
+    --search-height: calc(var(--height) - 2px);
+    min-height: var(--height);
     display: block;
     position: relative;
     margin: 8px;
 
-    ion-card {
+    form {
         position: absolute;
         left: 0;
         right: 0;
         z-index: 4;
         margin: 0;
-        --border-color: var(--core-search-box-border-color);
+        border: 1px solid var(--core-search-box-border-color);
-        --border-radius: var(--core-search-box-border-radius);
+        border-radius: var(--core-search-box-border-radius);
-        --background: var(--core-search-box-background);
+        background: var(--core-search-box-background);
-        --color: var(--core-search-box-border-color);
+        color: var(--core-search-box-border-color);
+
+        .search-box {
+            --min-height: var(--search-height);
+            border-radius: var(--core-search-box-border-radius);
+        }
+
+        ion-button.button {
+            margin: 0;
+            --a11y-min-target-size: var(--search-height);
+        }
     }
 
-    ion-button.button {
+
-        margin: 0;
-    }
 
     .core-search-history {
         max-height: calc(-120px + 80vh);
         overflow-y: auto;
         background: var(--core-search-box-background);
+        border-radius: 0 0 var(--core-search-box-border-radius) var(--core-search-box-border-radius);
         --ion-item-background: var(--core-search-box-background);
 
         .item:hover {