Merge branch 'enhance-find-drugs-menu' into 'master'

Enhance find drugs menu

See merge request covid-19/frontend!91

src/app/components/toggle/toggle.component.html

@@ -2,7 +2,7 @@
   <p class="control has-tooltip">
     <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOn" [class.is-primary]="value" (click)="toggle(true)">
       <span class="icon is-small">
-        <i class="fa {{icon}}"></i>
+        <i class="fa {{iconOn}}"></i>
       </span>
       <span>{{textOn}}</span>
     </button>
@@ -10,6 +10,9 @@
   <p class="control">
     <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)">
       <span>{{textOff}}</span>
+      <span *ngIf="iconOff" class="icon is-small">
+        <i class="fa {{iconOff}}"></i>
+      </span>
     </button>
   </p>
 </div>

src/app/components/toggle/toggle.component.ts

@@ -7,7 +7,8 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 })
 export class ToggleComponent implements OnInit {
 
-  @Input() icon = 'fa-check';
+  @Input() iconOn = 'fa-check';
+  @Input() iconOff = 'fa-times';
 
   @Input() textOn = 'On';
   @Input() textOff = 'Off';

src/styles.scss

@@ -192,6 +192,10 @@ div.field.has-addons.add-remove-toggle {
   color: $danger;
 }
 
+.fa-times {
+  color: $danger;
+}
+
 .footer-buttons {
   margin-left: 20px;
   margin-right: 10px;