From cf313ffbe15bc55220b61eed795c6cfa2ff7c8a2 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Mon, 31 Mar 2025 10:09:08 +0000
Subject: [PATCH] Change element for Clear all button

---
 .../list-layout/list-layout.component.scss    | 12 +++----
 .../general-settings.component.html           |  3 +-
 .../filter-chips/filter-chips.component.html  | 24 +++++++-------
 .../filter-chips/filter-chips.component.scss  | 33 +++++++++++++++++++
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.scss b/modules/ui/src/app/components/list-layout/list-layout.component.scss
index 008e66ad0..c00a11764 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.scss
+++ b/modules/ui/src/app/components/list-layout/list-layout.component.scss
@@ -23,6 +23,12 @@
   display: block;
 }
 
+:host ::ng-deep .mat-drawer-inner-container {
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: max-content 1fr;
+}
+
 .entity-list app-list-item:has(.selected) {
   ::ng-deep .list-item {
     background-color: colors.$primary-container;
@@ -145,9 +151,3 @@
   font-size: 16px;
   letter-spacing: 0;
 }
-
-::ng-deep .mat-drawer-inner-container {
-  overflow: hidden;
-  display: grid;
-  grid-template-rows: max-content 1fr;
-}
diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.html b/modules/ui/src/app/pages/general-settings/general-settings.component.html
index 06df6b91f..92ee65fee 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.html
@@ -109,8 +109,7 @@
           !isFormValues ||
           vm.isLessThanOneInterface ||
           settingsDisable ||
-          (settingForm.pristine &&
-            (analyticsForm.pristine || !optOutHasChanges))
+          (settingForm.pristine && analyticsForm.pristine)
         ">
         Save
       </button>
diff --git a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html
index 3826a20ed..e7eed0296 100644
--- a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html
+++ b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html
@@ -39,17 +39,15 @@
       </button>
     </mat-chip-row>
   </ng-container>
-  <mat-chip-row class="filter-chip-clear-all">
-    <button
-      type="button"
-      (click)="clearAllFilters()"
-      (keydown.enter)="clearAllFilters()"
-      (keydown.space)="clearAllFilters()"
-      aria-label="Clear all filters"
-      tabindex="0"
-      class="clear-button"
-      mat-button>
-      Clear all filters
-    </button>
-  </mat-chip-row>
+  <div
+    tabindex="0"
+    mat-chip-row
+    role="row"
+    (click)="clearAllFilters()"
+    (keydown.enter)="clearAllFilters()"
+    (keydown.space)="clearAllFilters()"
+    aria-label="Clear all filters"
+    class="clear-button">
+    <div class="clear-button-label" [tabIndex]="0">Clear all filters</div>
+  </div>
 </mat-chip-set>
diff --git a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss
index 0234c658d..541540fd5 100644
--- a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss
+++ b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss
@@ -49,10 +49,43 @@
   }
 }
 
+.clear-button:has(.clear-button-label:focus),
+.clear-button.cdk-keyboard-focused {
+  outline: colors.$black solid 2px;
+}
+
+.clear-button-label:focus {
+  border: none;
+}
+
+.clear-button {
+  height: var(--mdc-text-button-container-height);
+  border-radius: var(--mdc-text-button-container-shape);
+  margin: 0 0 0 8px !important;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clear-button .clear-button-label {
+  color: colors.$primary !important;
+  border: none;
+  outline: none;
+}
+
 .clear-button ::ng-deep .mat-focus-indicator {
   display: none;
 }
 
+.clear-button
+  ::ng-deep
+  .mdc-evolution-chip__action--primary:not(
+    .mdc-evolution-chip__action--presentational
+  ):not(.mdc-ripple-upgraded):focus::before {
+  border: none;
+}
+
 .filter-chip .filter-chip-remove {
   margin: 0 8px;
   padding-left: 0;