From 7d9928609dfc2c06b5400506540c5334aa648797 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Thu, 8 Apr 2021 13:17:21 +0200
Subject: [PATCH] Fix for styling zoom buttons & color of left menu

---
 .../project-map/project-map.component.html    |  2 +-
 .../project-map/project-map.component.scss    | 28 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html
index b7437fcd..66d2c379 100644
--- a/src/app/components/project-map/project-map.component.html
+++ b/src/app/components/project-map/project-map.component.html
@@ -150,7 +150,7 @@
       <button matTooltip="Zoom in" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomIn()">
         <mat-icon>zoom_in</mat-icon>
       </button>
-      <button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" class="zoom-button" (click)="resetZoom()">
+      <button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" class="reset-zoom-button" (click)="resetZoom()">
         <mat-icon>adjust</mat-icon>
       </button>
       <button matTooltip="Zoom out" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomOut()">
diff --git a/src/app/components/project-map/project-map.component.scss b/src/app/components/project-map/project-map.component.scss
index d6e0208b..4c826803 100644
--- a/src/app/components/project-map/project-map.component.scss
+++ b/src/app/components/project-map/project-map.component.scss
@@ -101,7 +101,7 @@ g.node:hover {
    left: 0px;
    width: 50px;
    margin: 20px;
-   background-color: rgba(15,18,20,0.90);
+   background-color: #20313b;
    border-radius: 6px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    z-index: 2;
@@ -131,6 +131,27 @@ g.node:hover {
       background: none;
       margin: 2px 0px;
       color: white;
+
+      mat-icon {
+        font-size: 24px!important;
+      }
+   }
+
+   .reset-zoom-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 36px;
+    width: 36px;
+    border-radius: 18px;
+    background: none;
+    margin: 2px 0px;
+    color: white;
+
+    mat-icon {
+      font-size: 16px!important;
+      margin-top: 8px;
+    }
    }
 
    .selection-button {
@@ -162,6 +183,11 @@ g.node:hover {
          color: black;
       }
 
+      .reset-zoom-button {
+        opacity: 0.7;
+        color: black;
+      }
+
       .section {
          border-top: 1px solid rgba(0,0,0,0.1);