Tweaking toolstrip layout

src/FlightMap/Images/ZoomMinus.svg

 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="-269 361 72 72" style="enable-background:new -269 361 72 72;" xml:space="preserve">
+	 viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
 	.st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
 	.st2{fill:none;}
 	.st3{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
 </style>
-<circle class="st0" cx="-236.2" cy="393.9" r="11.2"/>
-<line class="st1" x1="-218.6" y1="411.3" x2="-228.1" y2="401.8"/>
-<line class="st2" x1="-242.5" y1="393.9" x2="-229.9" y2="393.9"/>
-<line class="st3" x1="-242.5" y1="394" x2="-229.9" y2="393.9"/>
+<circle class="st0" cx="31" cy="31.2" r="17.5"/>
+<line class="st1" x1="58.5" y1="58.3" x2="43.6" y2="43.5"/>
+<line class="st2" x1="21.2" y1="31.2" x2="40.8" y2="31.2"/>
+<line class="st3" x1="21.2" y1="31.3" x2="40.8" y2="31.2"/>
 </svg>

src/FlightMap/Images/ZoomPlus.svg

 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="-269 361 72 72" style="enable-background:new -269 361 72 72;" xml:space="preserve">
+	 viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
 	.st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
 	.st2{fill:#FFFFFF;}
 </style>
-<circle class="st0" cx="-236.2" cy="393.9" r="11.2"/>
-<line class="st1" x1="-218.6" y1="411.3" x2="-228.1" y2="401.8"/>
-<path class="st2" d="M-237.3,400.2V395h-5.2v-2.2h5.2v-5.2h2.2v5.2h5.2v2.2h-5.2v5.2H-237.3z"/>
+<circle class="st0" cx="31" cy="31.2" r="17.5"/>
+<line class="st1" x1="58.5" y1="58.3" x2="43.6" y2="43.5"/>
+<path class="st2" d="M29.3,41v-8.1h-8.1v-3.4h8.1v-8.1h3.4v8.1h8.1v3.4h-8.1V41H29.3z"/>
 </svg>

src/QmlControls/QGCHoverButton.qml

@@ -9,7 +9,7 @@ import QGroundControl.Palette 1.0
 // TODO: use QT palette
 Button {
     id:     button
-    width: columnItem.contentWidth + contentLayoutItem.margins * 2
+    width:  contentLayoutItem.contentWidth + (contentMargins * 2)
     height: width
     flat:   true
 
@@ -20,14 +20,13 @@ Button {
     property alias imageSource:     innerImage.source
     property alias contentWidth:    innerText.contentWidth
 
-    property real  imageScale: 0.8
+    property real  imageScale:      0.6
     property real  borderWidth:     0
     property real  contentMargins: innerText.height * 0.1
 
     property color _currentColor:           qgcPal.button
     property color _currentContentColor:    qgcPal.buttonText
 
-    QGCPalette { id: qgcPal }
     QGCPalette { id: qgcPalDisabled; colorGroupEnabled: false }
 
     // Initial state
@@ -35,70 +34,43 @@ Button {
     // Update state on status changed
     onEnabledChanged: state = "Default"
 
-    property real _contentVDist: innerImage.height/innerText.contentHeight
-
     // Content Icon + Text
     contentItem: Item {
         id:                 contentLayoutItem
         anchors.fill:       parent
         anchors.margins:    contentMargins
-
         Column {
-            id: columnItem
-            anchors.fill: parent
-
-            Item {
-                width: parent.width
-                height: (contentLayoutItem.height - innerText.height)
-                Image {
-                    id: innerImage
-
             anchors.centerIn:   parent
-
-                    height: parent.height * imageScale
-                    width: parent.width * imageScale
-
-                    visible: false
+            spacing:        contentMargins * 2
+            QGCColoredImage {
+                id:         innerImage
+                height:     contentLayoutItem.height * imageScale
+                width:      contentLayoutItem.width  * imageScale
                 smooth:     true
-                    antialiasing: true
                 mipmap:     true
+                color:      _currentContentColor
                 fillMode:   Image.PreserveAspectFit
+                antialiasing: true
                 sourceSize.height:  height
                 sourceSize.width:   width
-                    horizontalAlignment: Image.AlignHCenter
-                    verticalAlignment: Image.AlignVCenter
+                anchors.horizontalCenter: parent.horizontalCenter
             }
-
-                ColorOverlay {
-                    id: imageOverlay
-                    anchors.fill: innerImage
-                    source: innerImage
-
-                    color: _currentContentColor
-                }
-            }
-
-            Text {
+            QGCLabel {
                 id:         innerText
                 text:       button.text
                 color:      _currentContentColor
-                width:                  parent.width
-                font.family:            ScreenTools.normalFontFamily
-                font.pointSize:         ScreenTools.defaultFontPointSize
-                horizontalAlignment:    Text.AlignHCenter
-                verticalAlignment:      Text.AlignVCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+        }
     }
-        } // Column - content
-    } // Item - content
 
     background: Rectangle {
         id:                 buttonBkRect
-        anchors.fill: parent
         color:              _currentColor
         visible:            !flat
-
         border.width:       borderWidth
         border.color:       borderColor
+        anchors.fill:       parent
     }
 
     // Change the colors based on button states

src/QmlControls/ToolStrip.qml

@@ -47,6 +47,7 @@ Rectangle {
         anchors.top:        parent.top
         anchors.left:       parent.left
         anchors.right:      parent.right
+        spacing:            ScreenTools.defaultFontPixelWidth * 0.25
 
         Repeater {
             id: repeater