Feature/1881/small ux improvements (#2303)

* Changes the visibility of the center map button to be permanently visible

Fixes the alignment of the invert colors checkbox

Adds a horizontal rule above the selected color in the legend panel

#1881

* Adds changelog entry

* Fixes prettier issues

Co-authored-by: ChristianE <christian.eberhard@maibornwolff.de>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+### Changed
+
+-   Small ui improvements added. ([#1881](https://github.com/MaibornWolff/codecharta/issues/1881))
+
 ## [1.76.0] - 2021-07-13
 
 ### Added 🚀

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

@@ -1,4 +1,4 @@
-<div id="centerMap" ng-show="!$ctrl._viewModel.isMapCentered" ng-class="$ctrl._viewModel.isMapCentered ? 'invisible' : 'visible'">
+<div id="centerMap">
 	<md-button class="md-fab md-primary cc-shadow" aria-label="Fit Map to View" ng-click="$ctrl.fitMapToView()" title="Center map">
 		<i class="fa fa-compass fa-2x"></i>
 	</md-button>

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

@@ -19,7 +19,7 @@
 		<cc-store-color-picker map-color-for="positiveDelta" label="+&Delta;"> </cc-store-color-picker>
 		<cc-store-color-picker map-color-for="negativeDelta" label="-&Delta;"> </cc-store-color-picker>
 	</div>
-
+	<hr />
 	<cc-store-color-picker map-color-for="selected" label="selected"> </cc-store-color-picker>
 	<hr />
 	<cc-store-color-picker map-color-for="outgoingEdge" label="Outgoing Edge"> </cc-store-color-picker>