Fix logo hover state rotation (#2781)

* Fix logo hover state rotation

The logo rotates upon hover but it was not centered correctly. This was caused
because no explicit height was defined for the logo container. By doing so
we now can have the transform use 50%,50% as the center point for smooth
rotations.

This change has been tested in Chrome Version 69.0.3497.100 (Official Build)

* Make the logo be actually circulair

The SVG radius did not account for the border of the circle
causing it to be chopped off at the edges. By subtracting
the border size from the radius (*2) we now have a perfect
looking circle.

This change has been tested in Chrome Version 69.0.3497.100 (Official Build)

* make build scss => css

assets/inline_images/istio-whitelogo-bluebackground-rounded.svg

@@ -1,5 +1,5 @@
 <svg viewBox="0 0 300 300">
-<circle cx="150" cy="150" r="150" stroke-width="2" />
+<circle cx="150" cy="150" r="146" stroke-width="2" />
 <polygon points="65,240 225,240 125,270"/>
 <polygon points="65,230 125,220 125,110"/>
 <polygon points="135,220 225,230 135,30"/>

src/sass/modules/_header.scss

@@ -7,13 +7,14 @@ header {
 
         .logo {
             width: 2em;
+            height: 2em;
             top: 3px;
             left: 1.3em;
             position: fixed;
             fill: $textBrandColor;
             transition-duration: 0.8s;
             transition-property: transform;
-            transform-origin: 50% 45%;
+            transform-origin: 50% 50%;
 
             circle {
                 fill: $mainBrandColor;
@@ -22,6 +23,7 @@ header {
 
             @media (min-width: $bp-md) {
                 width: 3em;
+                height: 3em;
                 left: 0.8em;
             }
         }