From d8a1799b9f3f229199f73317fd1e0a3a3c6f90ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 19 Jan 2022 14:25:57 +0100
Subject: [PATCH] MOBILE-3814 UI: Change caret to chevrons

---
 .../recentlyaccesseditems.scss                |  3 +++
 .../group-conversations.html                  | 18 ++++++++-----
 .../mod/forum/components/post/post.html       |  6 +++--
 .../pages/new-discussion/new-discussion.html  |  6 +++--
 .../core-horizontal-scroll-controls.html      | 26 +++++--------------
 .../features/grades/pages/course/course.html  |  2 +-
 .../features/grades/pages/course/course.scss  |  5 ++++
 src/theme/globals.mixins.scss                 |  2 +-
 src/theme/theme.light.scss                    |  4 +++
 9 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
index 62c797d58..1f7d02104 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -3,6 +3,9 @@
 :host {
     .core-horizontal-scroll div.core-horizontal-scroll-item {
         @include horizontal_scroll_item(80%, 250px, 300px);
+        ion-card {
+            height: auto;
+        }
     }
 
     .core-course-module-handler {
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 5d6e5b57b..6b476b60f 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -40,9 +40,11 @@
                     [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
                     detail="false">
-                    <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true">
+                    <ion-icon *ngIf="!favourites.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
+                        class="expandable-status-icon">
                     </ion-icon>
-                    <ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon *ngIf="favourites.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
+                        class="expandable-status-icon"></ion-icon>
                     <ion-label>
                         <h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
                     </ion-label>
@@ -74,8 +76,10 @@
                 <ion-item button class="divider ion-text-wrap" (click)="toggle(group)" sticky="true"
                     [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
                     aria-controls="addon-messages-groupconversations-group" role="heading" detail="false">
-                    <ion-icon *ngIf="!group.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
-                    <ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon *ngIf="!group.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
+                        class="expandable-status-icon"></ion-icon>
+                    <ion-icon *ngIf="group.expanded" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
+                    </ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
                     </ion-label>
@@ -107,9 +111,11 @@
                     [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
                     detail="false">
-                    <ion-icon *ngIf="!individual.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true">
+                    <ion-icon *ngIf="!individual.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
+                        class="expandable-status-icon">
                     </ion-icon>
-                    <ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon *ngIf="individual.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
+                        class="expandable-status-icon"></ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
                     </ion-label>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 77feb0f7e..09ea67c71 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -118,8 +118,10 @@
             <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
                 [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
-                <ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
-                <ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
+                    class="expandable-status-icon"></ion-icon>
+                <ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
+                </ion-icon>
                 <ion-label>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index daebbcd75..e8b2c7232 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -34,8 +34,10 @@
             <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
                 aria-controls="addon-mod-forum-new-discussion-advanced">
-                <ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
-                <ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
+                    class="expandable-status-icon"></ion-icon>
+                <ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
+                </ion-icon>
                 <ion-label>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
diff --git a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
index 7f3091787..e7d55fa25 100644
--- a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
+++ b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
@@ -1,23 +1,9 @@
-<ion-button
-    fill="clear"
-    color="dark"
-    (click)="scroll('backward')"
-    [hidden]="scrollPosition === 'hidden'"
-    [disabled]="scrollPosition === 'start'"
-    [attr.aria-label]="'core.scrollbackward' | translate"
-    [attr.aria-controls]="targetId"
->
-    <ion-icon name="fas-caret-left" slot="icon-only" aria-hidden="true"></ion-icon>
+<ion-button fill="clear" color="dark" (click)="scroll('backward')" [hidden]="scrollPosition === 'hidden'"
+    [disabled]="scrollPosition === 'start'" [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
+    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
 
-<ion-button
-    fill="clear"
-    color="dark"
-    (click)="scroll('forward')"
-    [hidden]="scrollPosition === 'hidden'"
-    [disabled]="scrollPosition === 'end'"
-    [attr.aria-label]="'core.scrollforward' | translate"
-    [attr.aria-controls]="targetId"
->
-    <ion-icon name="fas-caret-right" slot="icon-only" aria-hidden="true"></ion-icon>
+<ion-button fill="clear" color="dark" (click)="scroll('forward')" [hidden]="scrollPosition === 'hidden'"
+    [disabled]="scrollPosition === 'end'" [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
+    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index e5e717bbe..497f485a6 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -37,7 +37,7 @@
                                 </td>
                                 <th class="core-grades-table-gradeitem ion-text-start" [attr.colspan]="row.colspan">
                                     <ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start"
-                                        [name]="row.expanded ? 'fas-caret-down' : 'fas-caret-right'">
+                                        [name]="row.expanded ? 'fas-chevron-down' : 'fas-chevron-right'" class="expandable-status-icon">
                                     </ion-icon>
                                     <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
                                     </ion-icon>
diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss
index 8f3299ff6..e93bebfff 100644
--- a/src/core/features/grades/pages/course/course.scss
+++ b/src/core/features/grades/pages/course/course.scss
@@ -100,6 +100,11 @@
             @include margin(null, null, null, 5px);
         }
 
+        .expandable-status-icon {
+            font-size: 14px;
+            @include margin-horizontal(0, 2px);
+        }
+
     }
 
     .core-grades-table-feedback {
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
index 84089a4dd..dc509523f 100644
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@@ -209,7 +209,7 @@
         --vertical-margin: 10px;
         --horizontal-margin: 10px;
 
-        width: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        width: calc(100% - var(--horizontal-margin) - var(--horizontal-margin));
         height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
         margin: var(--vertical-margin) var(--horizontal-margin);
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index f4d379c0e..908669935 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -215,6 +215,10 @@
         --color: var(--item-divider-color);
         --min-height: var(--item-divider-min-height);
         min-height: var(--min-height);
+
+        .expandable-status-icon {
+            font-size: 18px;
+        }
     }
 
     --spacer-background: var(--item-divider-background);