From 829cb8bc9bef237052d5e4cba32533a3fdb68b5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 15 May 2024 10:39:35 +0200
Subject: [PATCH] MOBILE-4470 styles: Universalize reduced margins on popover
 icons

---
 .../data/components/actionsmenu/actionsmenu.html  |  2 +-
 .../core-courses-course-options-menu.html         | 15 ++++++---------
 src/theme/components/ion-item.scss                |  8 ++------
 src/theme/components/ion-popover.scss             |  7 +++++++
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/addons/mod/data/components/actionsmenu/actionsmenu.html b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
index 9e266e7f3..06b447d55 100644
--- a/src/addons/mod/data/components/actionsmenu/actionsmenu.html
+++ b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
@@ -1,6 +1,6 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
+        <ion-item button class="ion-text-wrap" (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>
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 ea6ffc500..044336685 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,41 +1,38 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('download')" *ngIf="downloadCourseEnabled"
-            [detail]="false">
+        <ion-item button class="ion-text-wrap" (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 icon-margin-reduced" (click)="action('delete')" [detail]="false"
+        <ion-item button class="ion-text-wrap" (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 icon-margin-reduced" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
+        <ion-item button class="ion-text-wrap" (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 icon-margin-reduced" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
+        <ion-item button class="ion-text-wrap" (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 icon-margin-reduced" (click)="action('favourite')" *ngIf="!course.isfavourite"
-            [detail]="false">
+        <ion-item button class="ion-text-wrap" (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 icon-margin-reduced" (click)="action('unfavourite')" *ngIf="course.isfavourite"
-            [detail]="false">
+        <ion-item button class="ion-text-wrap" (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/theme/components/ion-item.scss b/src/theme/components/ion-item.scss
index 18ce5a72a..b7f13dd2b 100644
--- a/src/theme/components/ion-item.scss
+++ b/src/theme/components/ion-item.scss
@@ -47,12 +47,6 @@ 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.
@@ -167,6 +161,7 @@ ion-item .in-item {
 
         text-overflow: inherit;
         overflow: inherit;
+        white-space: inherit;
         --color: initial;
         color: var(--color);
 
@@ -203,6 +198,7 @@ ion-item > .in-item,
 .item.ion-text-wrap > ion-checkbox::part(label),
 ion-checkbox.ion-text-wrap::part(label),
 ion-toggle.ion-text-wrap::part(label),
+.item.ion-text-wrap > ion-toggle::part(label),
 .item.ion-text-wrap > ion-input > label,
 ion-input.ion-text-wrap > label {
     white-space: normal;
diff --git a/src/theme/components/ion-popover.scss b/src/theme/components/ion-popover.scss
index 67426340e..6fc5a0c37 100644
--- a/src/theme/components/ion-popover.scss
+++ b/src/theme/components/ion-popover.scss
@@ -25,4 +25,11 @@ ion-popover {
             white-space: normal;
         }
     }
+
+
+    ion-item {
+        [slot=start] {
+            @include margin-horizontal(null, var(--mdl-spacing-4));
+        }
+    }
 }