#327414 Add arrow icon to user-display

app/app.css

@@ -119,11 +119,9 @@ ActivityIndicator {
   height: 80;
   margin-bottom: 30;
   padding-top: 10;
-  border-color: rgba(0, 0, 0, .25);
   border-color: #bfbfbf;
   border-width: 2;
   border-radius: 40;
-  color: rgba(0, 0, 0, .25);
   color: #bfbfbf;
   font-size: 60;
 }

app/events/event-details/event-details.component.css

@@ -52,7 +52,9 @@
 
 .vote,
 .info-label,
-.votes-count {
+.votes-count,
+.user-display,
+.registered-users-wrapper .info-icon {
   vertical-align: middle;
 }
 
@@ -65,6 +67,13 @@
   text-align: center;
 }
 
+.registered-users-wrapper .info-icon {
+  width: 20;
+  height: 20;
+  font-size: 16;
+  color: #bfbfbf;
+}
+
 .tbd {
   margin-left: 5;
 }
@@ -106,5 +115,6 @@
 }
 
 .going-label {
+  color: #000;
   margin-left: 5;
 }

app/events/event-details/event-details.template.html

@@ -71,8 +71,9 @@
                 <StackLayout class="info-wrapper no-separator">
                     <Label class="info-label" text="Registered Participants"></Label>
                     <StackLayout *ngIf="registeredUsers.length > 0" (tap)="onParticipantsTap()" class="registered-users-wrapper" orientation="horizontal">
-                        <user-display [users]="registeredUsers" [withImages]="3"></user-display>
+                        <user-display [users]="registeredUsers" [withImages]="3" class="user-display"></user-display>
                         <Label class="info-value going-label" [text]="(registeredUsers.length === 1 ? 'is' : 'are') + ' going'"></Label>
+                        <Label class="info-icon if" text="&#x64;"></Label>
                     </StackLayout>
 
                     <Label class="info-value" *ngIf="registeredUsers.length === 0" [text]="'No one has registered for this event.'"></Label>

app/groups/group-details/group-details.component.css

@@ -57,10 +57,21 @@
 }
 
 .expandable .user-image,
-.expandable Label {
+.expandable Label,
+.members-wrapper .info-label,
+.members-wrapper .user-display,
+.members-wrapper .info-value,
+.members-wrapper .info-icon {
   vertical-align: middle;
 }
 
+.members-wrapper .info-icon {
+  width: 20;
+  height: 20;
+  font-size: 16;
+  color: #bfbfbf;
+}
+
 .expandable Label {
   font-size: 12;
   font-weight: bold;

app/groups/group-details/group-details.template.html

@@ -44,8 +44,11 @@
 
                 <StackLayout class="info-wrapper members-wrapper" (tap)="onMembersTap()">
                     <Label class="info-label" text="Members"></Label>
-                    <user-display *ngIf="members.length" [users]="members" [withImages]="5"></user-display>
-                    <Label *ngIf="!members.length" text="Group has no members, yet." class="info-value"></Label>
+                    <StackLayout orientation="horizontal">
+                        <user-display *ngIf="members.length" [users]="members" [withImages]="5" class="user-display"></user-display>
+                        <Label *ngIf="members.length" class="info-icon if" text="&#x64;"></Label>
+                        <Label *ngIf="!members.length" text="Group has no members, yet." class="info-value"></Label>
+                    </StackLayout>
                 </StackLayout>
 
                 <StackLayout class="info-wrapper no-separator">

app/shared/user-display/user-display.component.css

@@ -16,3 +16,7 @@
   margin-left: 5;
   color: #000;
 }
+
+.remaining-users {
+  color: #000;
+}