From f42ab61f591063f9e7162c2ffbf263fa592aa7fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 8 May 2024 12:42:21 +0200
Subject: [PATCH] MOBILE-4470 group: Improve Group selector look and feel

---
 .../group-selector/group-selector.html           | 16 ++++++++++------
 .../group-selector/group-selector.scss           |  4 ++++
 .../components/group-selector/group-selector.ts  |  1 +
 3 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 src/core/components/group-selector/group-selector.scss

diff --git a/src/core/components/group-selector/group-selector.html b/src/core/components/group-selector/group-selector.html
index d3904dac2..2a4a73fa9 100644
--- a/src/core/components/group-selector/group-selector.html
+++ b/src/core/components/group-selector/group-selector.html
@@ -1,15 +1,19 @@
 <ng-container *ngIf="groupInfo && groupInfo.groups.length > 0 && (groupInfo.separateGroups || groupInfo.visibleGroups)">
     <ion-card class="core-info-card" *ngIf="multipleGroupsMessage && groupInfo.groups && groupInfo.groups.length > 1">
-        <ion-item>
+        <ion-item class="ion-text-wrap">
             <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
-            <ion-label>{{ multipleGroupsMessage }}</ion-label>
+            <ion-label>
+                <p class="item-label">{{ multipleGroupsMessage }}</p>
+            </ion-label>
         </ion-item>
     </ion-card>
 
-    <ion-item class="ion-text-wrap core-group-selector">
-        <ion-select [label]="(groupInfo.separateGroups ? 'core.groupsseparate': 'core.groupsvisible')  | translate" [(ngModel)]=" selected"
-            (ionChange)="selectedChange.emit(selected)" interface="action-sheet" [cancelText]="'core.cancel' | translate"
-            [interfaceOptions]="{header: 'core.group' | translate}">
+    <ion-item class="ion-text-wrap core-group-selector" lines="full">
+        <ion-icon name="fas-user-group" slot="start" aria-hidden="true" />
+        <ion-select [(ngModel)]=" selected" (ionChange)="selectedChange.emit(selected)" interface="action-sheet"
+            [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.group' | translate}">
+            <p class="item-heading" slot="label">{{ (groupInfo.separateGroups ? 'core.groupsseparate': 'core.groupsvisible') | translate }}
+            </p>
             <ion-select-option *ngFor="let group of groupInfo.groups" [value]=" group.id">
                 <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" />
             </ion-select-option>
diff --git a/src/core/components/group-selector/group-selector.scss b/src/core/components/group-selector/group-selector.scss
new file mode 100644
index 000000000..662706495
--- /dev/null
+++ b/src/core/components/group-selector/group-selector.scss
@@ -0,0 +1,4 @@
+.core-group-selector ion-icon {
+    --webkit-margin-end: 16px;
+    margin-inline-end: 16px;
+}
diff --git a/src/core/components/group-selector/group-selector.ts b/src/core/components/group-selector/group-selector.ts
index 1bf08ac8e..41dbcfe29 100644
--- a/src/core/components/group-selector/group-selector.ts
+++ b/src/core/components/group-selector/group-selector.ts
@@ -27,6 +27,7 @@ import { CoreGroupInfo } from '@services/groups';
 @Component({
     selector: 'core-group-selector',
     templateUrl: 'group-selector.html',
+    styleUrl: 'group-selector.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CoreGroupSelectorComponent {