MOBILE-4470 chore: Improve context menu margins and sizes

src/addons/mod/data/components/actionsmenu/actionsmenu.html

@@ -1,11 +1,11 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
+        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
             [attr.aria-label]="item.text | translate">
+            <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ item.text | translate }}</p>
             </ion-label>
-            <ion-icon [name]="item.icon" slot="end" aria-hidden="true" />
         </ion-item>
     </ion-list>
 

src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html

@@ -1,38 +1,41 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" [detail]="false">
+        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('download')" *ngIf="downloadCourseEnabled"
+            [detail]="false">
             <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true" />
             <ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate" />
             <ion-label>
                 <p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('delete')" [detail]="false"
+        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('delete')" [detail]="false"
             *ngIf="prefetch.status === 'downloaded' || prefetch.status === 'outdated'">
             <ion-icon name="fas-trash" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
+        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
             <ion-icon name="fas-eye" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
+        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
             <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.show' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" [detail]="false">
+        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('favourite')" *ngIf="!course.isfavourite"
+            [detail]="false">
             <ion-icon name="fas-star" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" [detail]="false">
+        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('unfavourite')" *ngIf="course.isfavourite"
+            [detail]="false">
             <ion-icon name="far-star" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>

src/core/features/search/components/global-search-filters/global-search-filters.html

@@ -19,7 +19,7 @@
             <core-spacer />
             <ion-item class="ion-text-wrap help">
                 <ion-label>
-                    {{ 'core.search.filtercategories' | translate }}
+                    <p class="item-heading">{{ 'core.search.filtercategories' | translate }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
@@ -37,7 +37,7 @@
             <core-spacer />
             <ion-item class="ion-text-wrap help">
                 <ion-label>
-                    {{ 'core.search.filtercourses' | translate }}
+                    <p class="item-heading">{{ 'core.search.filtercourses' | translate }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">

src/theme/components/ion-item.scss

@@ -51,6 +51,12 @@ ion-item.item {
     &.item-has-interactive-control:focus-within {
         @include core-focus-outline();
     }
+
+    &.icon-margin-reduced {
+        [slot=start] {
+            @include margin-horizontal(null, var(--mdl-spacing-4));
+        }
+    }
 }
 
 // Fake item.
@@ -71,7 +77,7 @@ div.fake-ion-item {
     font-size: var(--text-size);
     font-weight: normal;
     text-transform: none;
-    @include padding(null, 16px, null, 16px);
+    @include padding(null, var(--mdl-spacing-4), null, var(--mdl-spacing-4));
     @include margin(11px, null, 10px, null);
 
     h1 {
@@ -247,11 +253,11 @@ ion-item.item.item-file {
     }
 
     &.item-directory ion-icon {
-        @include margin-horizontal(0px, 16px);
+        @include margin-horizontal(0px, var(--mdl-spacing-4));
     }
 
     [slot=end] {
-        @include margin-horizontal(16px, null);
+        @include margin-horizontal(var(--mdl-spacing-4), null);
     }
 }