Add border and background to legend panel.

CHANGELOG.md

@@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
     -   The bar in the analysis shows the percentages <br>
         <img src="https://user-images.githubusercontent.com/48621967/141791111-564778fa-b767-4ee4-b024-6856f1a79b4b.png" width="512px" alt="list of suspicious metrics"/>
 
+### Fixed 🐞
+
+-   Fixed legend panel not having a background ([#2422](https://github.com/MaibornWolff/codecharta/pull/2510))
+
 ### Chore 👨‍💻 👩‍💻
 
 -   Remove `nodeSearch.service.ts` and `searchedNodePaths` from store as they can be derived from `searchPattern` ([#2495](https://github.com/MaibornWolff/codecharta/pull/2495)).

visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html

@@ -50,7 +50,7 @@
 	</div>
 	<hr />
 	<cc-store-color-picker map-color-for="selected" label="selected"> </cc-store-color-picker>
-	<hr />
+	<hr ng-if="$ctrl._viewModel.edgeMetricHasEdge" />
 	<div ng-if="$ctrl._viewModel.edgeMetricHasEdge">
 		<cc-store-color-picker map-color-for="outgoingEdge" label="Outgoing Edge"> </cc-store-color-picker>
 		<cc-store-color-picker map-color-for="incomingEdge" label="Incoming Edge"> </cc-store-color-picker>

visualization/app/codeCharta/ui/legendPanel/legendPanel.component.scss

@@ -14,6 +14,9 @@ legend-panel-component {
 	}
 
 	.block-wrapper {
+		background-color: white;
+		border: 1px solid #cdcdcd;
+		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
 		position: fixed;
 		bottom: $fixedHeight + px;
 		padding: 10px;