From 510dd9132860925bd76f360479074c482e37df09 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 8 Feb 2024 14:52:31 +0800
Subject: [PATCH] Changed to toggle buttons. Changed filters.

---
 frontend/src/app/dashboard/dashboard.component.html | 12 +++++-------
 frontend/src/app/dashboard/dashboard.component.scss | 12 +++++++++++-
 frontend/src/app/dashboard/dashboard.component.ts   |  4 ++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index c2076d114..676dfa0ee 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -24,13 +24,11 @@
               <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
             </a>
             <div class="quick-filter">
-              <ng-container *ngFor="let filter of goggleCycle">
-                <div
-                  class="goggle-badge badge badge-primary"
-                  [class.active]="filter.index === goggleIndex"
-                  (click)="goggleIndex = filter.index"
-                >{{ filter.name }}</div>
-              </ng-container>
+              <div class="btn-group btn-group-toggle">
+                <label class="btn btn-primary btn-xs" [class.active]="filter.index === goggleIndex"  *ngFor="let filter of goggleCycle">
+                  <input type="radio" [value]="'3m'" fragment="3m" (click)="goggleIndex = filter.index" [attr.data-cy]="'3m'"> {{ filter.name }}
+                </label>
+              </div>
             </div>
             <div class="mempool-block-wrapper">
               <app-mempool-block-overview
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 704d02813..9bd44ea29 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -398,4 +398,14 @@
   &.active {
     background: #105fb0;
   }
-}
\ No newline at end of file
+}
+
+.btn-xs {
+  padding: 0.35rem 0.5rem;
+  font-size: 12px;
+}
+
+.quick-filter {
+  margin-top: 5px;
+  margin-bottom: 6px;
+}
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index cd6097a43..c762d309f 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -65,8 +65,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   goggleResolution = 82;
   goggleCycle = [
     { index: 0, name: 'All' },
-    { index: 1, name: 'CPFP', flag: 0b00000010_00000000_00000000n },
-    { index: 2, name: 'RBF', flag: 0b00000100_00000000_00000000n },
+    { index: 1, name: 'Consolidations', flag: 0b00000010_00000000_00000000_00000000_00000000n },
+    { index: 2, name: 'Coinjoin', flag: 0b00000001_00000000_00000000_00000000_00000000n },
     { index: 3, name: '💩', flag: 0b00000100_00000000_00000000_00000000n | 0b00000010_00000000_00000000_00000000n | 0b00000001_00000000_00000000_00000000n },
   ];
   goggleIndex = 0; // Math.floor(Math.random() * this.goggleCycle.length);