change audit toggle to bootstrap button

frontend/src/app/components/block/block.component.html

@@ -23,15 +23,6 @@
 
     <div class="grow"></div>
 
-    <div class="audit-toggle" *ngIf="webGlEnabled && auditAvailable">
-      <app-toggle
-        textLeft="audit"
-        i18n-textLeft="block.audit-mode"
-        [checked]="auditModeEnabled"
-        (toggleStatusChanged)="toggleAuditMode($event)"
-      ></app-toggle>
-    </div>
-
     <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button>
   </div>
 
@@ -288,8 +279,22 @@
       </div>
     </div>
 
-    <div class="text-right mt-3">
+    <div class="text-right mt-3 toggle-btns">
-      <button type="button" class="btn btn-outline-info btn-sm btn-details" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
+      <button
+        *ngIf="webGlEnabled && auditAvailable"
+        type="button"
+        class="btn btn-outline-info btn-sm btn-audit"
+        [class.active]="auditModeEnabled"
+        (click)="toggleAuditMode()"
+        i18n="block.toggle-audit|Toggle Audit"
+      >Audit</button>
+      <button
+        type="button"
+        class="btn btn-outline-info btn-sm btn-details"
+        [class.active]="showDetails"
+        (click)="toggleShowDetails()"
+        i18n="transaction.details|Transaction Details"
+      >Details</button>
     </div>
 
     <div #blockTxTitle id="block-tx-title" class="block-tx-title">

frontend/src/app/components/block/block.component.scss

@@ -75,14 +75,19 @@ h1 {
 	}
 }
 
-.btn-details {
+.toggle-btns {
   position: relative;
+  z-index: 2;
   top: 7px;
   @media (min-width: 550px) {
     top: 0px;
   }
 }
 
+.btn-audit {
+  margin-right: .5em;
+}
+
 .block-tx-title {
   display: flex;
   justify-content: space-between;
@@ -222,11 +227,4 @@ h1 {
   .ng-fa-icon {
     margin-right: 1em;
   }
-}
-
-.audit-toggle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 1em;
 }

frontend/src/app/components/block/block.component.ts

@@ -608,8 +608,8 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.showAudit = this.auditAvailable && this.auditModeEnabled;
   }
 
-  toggleAuditMode(event): void {
+  toggleAuditMode(): void {
-    this.stateService.hideAudit.next(!event);
+    this.stateService.hideAudit.next(this.auditModeEnabled);
   }
 
   updateAuditAvailableFromBlockHeight(blockHeight: number): void {