#327414 Add styles for date option updates on the event details screen

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

@@ -45,6 +45,12 @@
   background-color: rgba(0, 0, 0, .35);
 }
 
+.vote,
+.info-label,
+.votes-count {
+  vertical-align: middle;
+}
+
 .info-icon {
   width: 30;
   height: 30;
@@ -62,3 +68,20 @@
   font-size: 12;
   font-weight: bold;
 }
+
+.vote {
+  margin-right: 10;
+  padding-top: 5;
+}
+
+.vote.yes {
+  color: green;
+}
+
+.vote.no {
+  color: #ff0000;
+}
+
+.votes-count {
+  font-size: 13;
+}

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

@@ -25,10 +25,10 @@
                         <Label class="info-icon if" text="&#x78;" col="2" row="0"></Label>
                     </GridLayout>
                     <StackLayout orientation="horizontal" *ngFor="let date of (event.EventDateChoices || [])">
-                        <Label *ngIf="alreadyRegistered && userVotedForDate(date)" text="Y"></Label> <!-- will be an icon -->
-                        <Label *ngIf="alreadyRegistered && !userVotedForDate(date)" text="N"></Label> <!-- will be an icon -->
+                        <Label *ngIf="alreadyRegistered && userVotedForDate(date)" text="&#x68;" class="vote yes if"></Label>
+                        <Label *ngIf="alreadyRegistered && !userVotedForDate(date)" text="&#x67;" class="vote no if"></Label>
                         <Label class="info-value" [text]="date | date:dateFormat"></Label>
-                        <Label *ngIf="countsInitialized()" [text]="getVoteText(date)"></Label>
+                        <Label class="votes-count" *ngIf="countsInitialized()" [text]="getVoteText(date)"></Label>
                     </StackLayout>
                     <Label class="info-value" *ngIf="event.EventDate" [text]="event.EventDate | date:dateFormat"></Label>
                 </StackLayout>