From 714700d8f104195dd009af3320b5f732312640fd Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 26 Jan 2023 11:09:23 -0600
Subject: [PATCH] change audit toggle to bootstrap button

---
 .../app/components/block/block.component.html | 27 +++++++++++--------
 .../app/components/block/block.component.scss | 14 +++++-----
 .../app/components/block/block.component.ts   |  4 +--
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index ecf7180b4..0f5eb9a78 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/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">
-      <button type="button" class="btn btn-outline-info btn-sm btn-details" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
+    <div class="text-right mt-3 toggle-btns">
+      <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">
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index 039d3d2ef..97b5a24f3 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index 9cf499650..719d38528 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/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 {
-    this.stateService.hideAudit.next(!event);
+  toggleAuditMode(): void {
+    this.stateService.hideAudit.next(this.auditModeEnabled);
   }
 
   updateAuditAvailableFromBlockHeight(blockHeight: number): void {