From c5f1e22740d38d70474a17cb1c126baed0b69138 Mon Sep 17 00:00:00 2001
From: pkunduGL <142476714+pkunduGL@users.noreply.github.com>
Date: Wed, 27 Sep 2023 18:52:16 +0530
Subject: [PATCH] [ACS-5539] Icon and pressed state of buttons updated as per
 the figma (#3449)

* Updated the icon as per the figma

* pressed state for buttons updated

* review comments resolved

* Resolved the review comments
---
 .../lib/components/details/details.component.scss    |  6 ++++++
 .../toggle-info-drawer.component.ts                  | 12 +++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/projects/aca-content/src/lib/components/details/details.component.scss b/projects/aca-content/src/lib/components/details/details.component.scss
index 873bfb1bc..778bead77 100644
--- a/projects/aca-content/src/lib/components/details/details.component.scss
+++ b/projects/aca-content/src/lib/components/details/details.component.scss
@@ -5,6 +5,12 @@ app-details-manager {
     outline: none;
     border-radius: 4px;
 
+    &:focus {
+      background-color: var(--theme-selected-background-color);
+      outline: 2px solid var(--theme-blue-button-color);
+      border-radius: 4px;
+    }
+
     &:focus-visible {
       outline: 2px solid var(--theme-blue-button-color);
       border-radius: 4px;
diff --git a/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts b/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts
index 5d3d51f2e..d9dae1918 100644
--- a/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts
+++ b/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts
@@ -44,9 +44,19 @@ import { MatIconModule } from '@angular/material/icon';
       [attr.title]="'APP.ACTIONS.DETAILS' | translate"
       (click)="onClick()"
     >
-      <mat-icon>menu_open</mat-icon>
+      <mat-icon>view_sidebar</mat-icon>
     </button>
   `,
+  styles: [
+    `
+      .app-toggle-info-drawer button:focus {
+        border: 2px solid var(--theme-blue-button-color);
+        border-radius: 6px;
+        outline: none;
+        background-color: var(--theme-selected-background-color);
+      }
+    `
+  ],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-toggle-info-drawer' }
 })