From 206834ee45bd9eb6b005a456fbe5ae25d765a5a4 Mon Sep 17 00:00:00 2001
From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com>
Date: Fri, 19 Jan 2024 15:31:48 +0100
Subject: [PATCH] Add material theming to thumbTack sortingButton

Change className to NgClass to avoid overriding styling classes when intilized #3459
---
 .../ui/searchPanel/searchPanel.component.scss          | 10 ++++++++++
 .../sortingButton/sortingButton.component.html         |  2 +-
 .../thumbTackButton/thumbTackButton.component.html     |  7 ++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
index d9aa10a9c4..c5f345d2a6 100644
--- a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
+++ b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
@@ -1,3 +1,5 @@
+@use "../../../material/theme";
+
 cc-search-panel {
 	.search-panel-card {
 		border-left: none;
@@ -18,4 +20,12 @@ cc-search-panel {
 			pointer-events: none;
 		}
 	}
+
+	.submenu-button {
+		border: 2px solid theme.$cc-primary-color;
+
+		&:hover {
+			border: 2px solid theme.$cc-emphasized-color;
+		}
+	}
 }
diff --git a/visualization/app/codeCharta/ui/searchPanel/sortingButton/sortingButton.component.html b/visualization/app/codeCharta/ui/searchPanel/sortingButton/sortingButton.component.html
index fe83eef859..52e73d72a6 100644
--- a/visualization/app/codeCharta/ui/searchPanel/sortingButton/sortingButton.component.html
+++ b/visualization/app/codeCharta/ui/searchPanel/sortingButton/sortingButton.component.html
@@ -1,5 +1,5 @@
 <button
-	class="box-rounded"
+	class="box-rounded submenu-button"
 	(click)="onClick()"
 	title="Toggle sort order (currently {{ (sortingOrderAscending$ | async) ? 'ascending' : 'descending' }})"
 >
diff --git a/visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.html b/visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.html
index ffe033704b..a9f8d65811 100644
--- a/visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.html
+++ b/visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.html
@@ -1,3 +1,8 @@
-<button class="box-rounded" (click)="onClick()" title="Pin file explorer" [className]="(isSearchPanelPinned$ | async) ? 'pinned' : ''">
+<button
+	class="box-rounded submenu-button"
+	(click)="onClick()"
+	title="Pin file explorer"
+	[ngClass]="(isSearchPanelPinned$ | async) ? 'pinned' : ''"
+>
 	<i class="fa fa-thumb-tack"></i>
 </button>