From cdcb2f77a6dbfabbccca048386e0103a08345080 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 9 May 2024 10:33:42 +0200
Subject: [PATCH] MOBILE-4470 chore: Improve context menu margins and sizes

---
 .../data/components/actionsmenu/actionsmenu.html  |  4 ++--
 .../core-courses-course-options-menu.html         | 15 +++++++++------
 .../global-search-filters.html                    |  4 ++--
 src/theme/components/ion-item.scss                | 12 +++++++++---
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/addons/mod/data/components/actionsmenu/actionsmenu.html b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
index 70fe1df31..9e266e7f3 100644
--- a/src/addons/mod/data/components/actionsmenu/actionsmenu.html
+++ b/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>
 
diff --git a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
index 044336685..ea6ffc500 100644
--- a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
+++ b/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>
diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.html b/src/core/features/search/components/global-search-filters/global-search-filters.html
index 16c70b736..5761833a5 100644
--- a/src/core/features/search/components/global-search-filters/global-search-filters.html
+++ b/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">
diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss
index de14fcc43..06cf1f75a 100644
--- a/src/theme/components/ion-item.scss
+++ b/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);
     }
 }