style on selected items in consultation page

src/app/features/consultation/consultation.component.ts

@@ -11,7 +11,7 @@ import { PollService } from '../../core/services/poll.service';
 	styleUrls: ['./consultation.component.scss'],
 })
 export class ConsultationComponent implements OnInit, OnDestroy {
-	public isCompactMode = false;
+	public isCompactMode = true;
 	public poll: Poll;
 	public pollSlug: string;
 	public passHash: string;

src/app/features/consultation/poll-results-compact/poll-results-compact.component.html

@@ -1,4 +1,9 @@
-<div class="box" *ngFor="let choice of poll.choices">
+<div
+	class="box"
+	*ngFor="let choice of poll.choices"
+	[ngClass]="{ 'active has-background-success': choice.enabled }"
+	(click)="choice.enabled = !choice.enabled"
+>
 	<div class="columns is-vcentered is-mobile">
 		<div class="column">
 			<label class="label">{{ choice.name }}</label>

src/app/features/consultation/poll-results-compact/poll-results-compact.component.scss

@@ -0,0 +1,20 @@
+@import '../../../../styles/variables';
+
+.box {
+	border-left: 3px solid white;
+	cursor: pointer;
+	* {
+		cursor: pointer;
+	}
+	&:hover {
+		border-left-color: #d198d4;
+		background: #ccc;
+	}
+	&:focus,
+	&:active {
+		background: #d198d4;
+	}
+	&.active {
+		border-left-color: yellowgreen !important;
+	}
+}