Better light palette for mobile

Plus lots of other tweaks to ui for visuals

qgroundcontrol.qrc

@@ -120,6 +120,7 @@
         <file alias="QGroundControl/Controls/RoundButton.qml">src/QmlControls/RoundButton.qml</file>
         <file alias="QGroundControl/Controls/QGCCanvas.qml">src/QmlControls/QGCCanvas.qml</file>
         <file alias="QGroundControl/Controls/ExclusiveGroupItem.qml">src/QmlControls/ExclusiveGroupItem.qml</file>
+        <file alias="QGroundControl/Controls/ClickableColor.qml">src/QmlControls/ClickableColor.qml</file>
 
         <!-- Main Window -->
         <file alias="MainWindow.qml">src/ui/MainWindow.qml</file>

src/AutoPilotPlugins/PX4/RadioComponent.qml

@@ -411,6 +411,7 @@ QGCView {
 
                 QGCButton {
                     id:         skipButton
+                    showBorder: true
                     text:       "Skip"
 
                     onClicked: controller.skipButtonClicked()
@@ -418,6 +419,7 @@ QGCView {
 
                 QGCButton {
                     id:         cancelButton
+                    showBorder: true
                     text:       "Cancel"
 
                     onClicked: controller.cancelButtonClicked()
@@ -426,6 +428,7 @@ QGCView {
                 QGCButton {
                     id:         nextButton
                     primary:    true
+                    showBorder: true
                     text:       "Calibrate"
 
                     onClicked: {
@@ -469,6 +472,7 @@ QGCView {
 
                 QGCButton {
                     id:         bindButton
+                    showBorder: true
                     text:       "Spektrum Bind"
 
                     onClicked: showDialog(spektrumBindDialogComponent, dialogTitle, 50, StandardButton.Ok | StandardButton.Cancel)
@@ -476,6 +480,7 @@ QGCView {
             }
 
             QGCButton {
+                showBorder: true
                 text:       "Copy Trims"
                 onClicked:  showDialog(copyTrimsDialogComponent, dialogTitle, 50, StandardButton.Ok | StandardButton.Cancel)
             }

src/AutoPilotPlugins/PX4/SensorsComponent.qml

@@ -354,6 +354,7 @@ QGCView {
 
                 QGCButton {
                     id:         cancelButton
+                    showBorder: true
                     text:       "Cancel"
                     enabled:    false
                     onClicked:  controller.cancelCalibration()

src/QGCApplication.cc

@@ -434,7 +434,11 @@ bool QGCApplication::_initForNormalAppBoot(void)
 
     _createSingletons();
 
+#ifdef __mobile__
+    _styleIsDark = false;
+#else
     _styleIsDark = settings.value(_styleKey, _styleIsDark).toBool();
+#endif
     _loadCurrentStyle();
 
     // Exit main application when last window is closed

src/QGCPalette.cc

@@ -34,22 +34,22 @@ QList<QGCPalette*>   QGCPalette::_paletteObjects;
 QGCPalette::Theme QGCPalette::_theme = QGCPalette::Dark;
 
 QColor QGCPalette::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0xDD, 0xDD, 0xDD), QColor(0xDD, 0xDD, 0xDD) },
+    { QColor("#ffffff"), QColor("#ffffff") },
     { QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22) }
 };
 
 QColor QGCPalette::_windowShade[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(204, 204, 204), QColor(204, 204, 204) },
+    { QColor("#d9d9d9"), QColor("#d9d9d9") },
     { QColor(51, 51, 51), QColor(51, 51, 51) }
 };
 
 QColor QGCPalette::_windowShadeDark[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(216, 216, 216), QColor(216, 216, 216) },
+    { QColor("#bdbdbd"), QColor("#bdbdbd") },
     { QColor(40, 40, 40), QColor(40, 40, 40) }
 };
 
 QColor QGCPalette::_text[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0) },
+    { QColor("#cccccc"), QColor("#000000") },
     { QColor(0x58, 0x58, 0x58), QColor(0xFF, 0xFF, 0xFF) }
 };
 
@@ -59,17 +59,17 @@ QColor QGCPalette::_warningText[QGCPalette::_cThemes][QGCPalette::_cColorGroups]
 };
 
 QColor QGCPalette::_button[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(0x1b, 0x6f, 0xad) },
+    { QColor("#ffffff"), QColor("#ffffff") },
     { QColor(0x58, 0x58, 0x58), QColor(98, 98, 100) },
 };
 
 QColor QGCPalette::_buttonText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF) },
+    { QColor("#dedede"), QColor("#000000") },
     { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF) },
 };
 
 QColor QGCPalette::_buttonHighlight[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(237, 235, 51) },
+    { QColor("#e4e4e4"), QColor("#e4e4e4") },
     { QColor(0x58, 0x58, 0x58), QColor(237, 235, 51) },
 };
 
@@ -89,12 +89,12 @@ QColor QGCPalette::_primaryButtonText[QGCPalette::_cThemes][QGCPalette::_cColorG
 };
 
 QColor QGCPalette::_textField[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(255, 255, 255) },
+    { QColor("#ffffff"), QColor("#ffffff") },
     { QColor(0x58, 0x58, 0x58), QColor(255, 255, 255) },
 };
 
 QColor QGCPalette::_textFieldText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
+    { QColor("#dedede"), QColor("#000000") },
     { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
 };
 
@@ -131,18 +131,23 @@ void QGCPalette::setColorGroupEnabled(bool enabled)
 
 void QGCPalette::setGlobalTheme(Theme newTheme)
 {
+    // Mobile build does not have themes
     if (_theme != newTheme) {
         _theme = newTheme;
+        _signalPaletteChangeToAll();
+    }
+}
 
+void QGCPalette::_signalPaletteChangeToAll(void)
+{
     // Notify all objects of the new theme
-        foreach(QGCPalette* palette, _paletteObjects) {
-            palette->_themeChanged();
-        }
+    foreach (QGCPalette* palette, _paletteObjects) {
+        palette->_signalPaletteChanged();
     }
 }
 
-void QGCPalette::_themeChanged(void)
+
+void QGCPalette::_signalPaletteChanged(void)
 {
     emit paletteChanged();
 }
-

src/QGCPalette.h

@@ -45,52 +45,41 @@ class QGCPalette : public QObject
     
     Q_PROPERTY(bool colorGroupEnabled READ colorGroupEnabled WRITE setColorGroupEnabled NOTIFY paletteChanged)
 
-    /// Background color for windows
-    Q_PROPERTY(QColor window READ window NOTIFY paletteChanged)
-    
-    /// Color for shaded areas within a window. The windowShade color should be a color somewhere between window and button.
-    Q_PROPERTY(QColor windowShade READ windowShade NOTIFY paletteChanged)
-    
-    /// Color for darker shared areas within a window. The windowShadeDark color should be a color somewhere between window and windowShade.
-    Q_PROPERTY(QColor windowShadeDark READ windowShadeDark NOTIFY paletteChanged)
-    
-    /// Standard text color for label text
-    Q_PROPERTY(QColor text READ text NOTIFY paletteChanged)
-    
-	/// Color for warning text
-	Q_PROPERTY(QColor warningText READ warningText NOTIFY paletteChanged)
-
-	/// Background color for buttons
-    Q_PROPERTY(QColor button READ button NOTIFY paletteChanged)
-    
-    /// Text color for buttons
-    Q_PROPERTY(QColor buttonText READ buttonText NOTIFY paletteChanged)
-    
-    /// Background color for button in selected or hover state
-    Q_PROPERTY(QColor buttonHighlight READ buttonHighlight NOTIFY paletteChanged)
-    
-    /// Text color for button in selected or hover state
-    Q_PROPERTY(QColor buttonHighlightText READ buttonHighlightText NOTIFY paletteChanged)
-
-    /// Background color for primary buttons. A primary button is the button which would be the
-    /// normal default  button to press. For example in an Ok/Cancel situation where Ok would normally
-    /// be pressed, Ok is the primary button.
-    Q_PROPERTY(QColor primaryButton READ primaryButton NOTIFY paletteChanged)
-    
-    /// Text color for buttons
-    Q_PROPERTY(QColor primaryButtonText READ primaryButtonText NOTIFY paletteChanged)
-    
-    // Background color for TextFields
-    Q_PROPERTY(QColor textField READ textField NOTIFY paletteChanged)
-    
-    // Text color for TextFields
-    Q_PROPERTY(QColor textFieldText READ textFieldText NOTIFY paletteChanged)
-    
-    /// Background color for map buttons
-    Q_PROPERTY(QColor mapButton READ mapButton NOTIFY paletteChanged)
-
-    /// Background color for map button in selected or hover state
-    Q_PROPERTY(QColor mapButtonHighlight READ mapButtonHighlight NOTIFY paletteChanged)
+    // The colors are:
+    //      window -                Background color for windows
+    //      windowShade -           Color for shaded areas within a window. The windowShade color should be a color somewhere between window and button.
+    //      windowShadeDark -       Color for darker shared areas within a window. The windowShadeDark color should be a color somewhere between window and windowShade.
+    //      text -                  Standard text color for label text
+    //      warningText -           Color for warning text
+    //      button -                Background color for buttons
+    //      buttonText -            Text color for buttons
+    //      buttonHighlight -       Background color for button in selected or hover state
+    //      buttonHighlightText -   Text color for button in selected or hover state
+
+    //      primaryButton -         Background color for primary buttons. A primary button is the button which would be the
+    //                              normal default  button to press. For example in an Ok/Cancel situation where Ok would normally
+    //                              be pressed, Ok is the primary button.
+    //      primaryButtonText -     Text color for primary buttons
+    //      textField -             Background color for TextFields
+    //      textFieldText -         Text color for TextFields
+    //      mapButton -             Background color for map buttons
+    //      mapButtonHighlight -    Background color for map button in selected or hover state
+
+    Q_PROPERTY(QColor window                READ window                 WRITE setWindow                 NOTIFY paletteChanged)
+    Q_PROPERTY(QColor windowShade           READ windowShade            WRITE setWindowShade            NOTIFY paletteChanged)
+    Q_PROPERTY(QColor windowShadeDark       READ windowShadeDark        WRITE setWindowShadeDark        NOTIFY paletteChanged)
+    Q_PROPERTY(QColor text                  READ text                   WRITE setText                   NOTIFY paletteChanged)
+    Q_PROPERTY(QColor warningText           READ warningText            WRITE setWarningText            NOTIFY paletteChanged)
+    Q_PROPERTY(QColor button                READ button                 WRITE setButton                 NOTIFY paletteChanged)
+    Q_PROPERTY(QColor buttonText            READ buttonText             WRITE setButtonText             NOTIFY paletteChanged)
+    Q_PROPERTY(QColor buttonHighlight       READ buttonHighlight        WRITE setButtonHighlight        NOTIFY paletteChanged)
+    Q_PROPERTY(QColor buttonHighlightText   READ buttonHighlightText    WRITE setButtonHighlightText    NOTIFY paletteChanged)
+    Q_PROPERTY(QColor primaryButton         READ primaryButton          WRITE setPrimaryButton          NOTIFY paletteChanged)
+    Q_PROPERTY(QColor primaryButtonText     READ primaryButtonText      WRITE setPrimaryButtonText      NOTIFY paletteChanged)
+    Q_PROPERTY(QColor textField             READ textField              WRITE setTextField              NOTIFY paletteChanged)
+    Q_PROPERTY(QColor textFieldText         READ textFieldText          WRITE setTextFieldText          NOTIFY paletteChanged)
+    Q_PROPERTY(QColor mapButton             READ mapButton              WRITE setMapButton              NOTIFY paletteChanged)
+    Q_PROPERTY(QColor mapButtonHighlight    READ mapButtonHighlight     WRITE setMapButtonHighlight     NOTIFY paletteChanged)
 
 public:
     enum ColorGroup {
@@ -112,24 +101,35 @@ public:
     QColor window(void)                 const { return _window[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor windowShade(void)            const { return _windowShade[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor windowShadeDark(void)        const { return _windowShadeDark[_theme][_colorGroupEnabled ? 1 : 0]; }
-    
     QColor text(void)                   const { return _text[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor warningText(void)            const { return _warningText[_theme][_colorGroupEnabled ? 1 : 0]; }
-
     QColor button(void)                 const { return _button[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor buttonText(void)             const { return _buttonText[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor buttonHighlight(void)        const { return _buttonHighlight[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor buttonHighlightText(void)    const { return _buttonHighlightText[_theme][_colorGroupEnabled ? 1 : 0]; }
-    
     QColor primaryButton(void)          const { return _primaryButton[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor primaryButtonText(void)      const { return _primaryButtonText[_theme][_colorGroupEnabled ? 1 : 0]; }
-    
     QColor textField(void)              const { return _textField[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor textFieldText(void)          const { return _textFieldText[_theme][_colorGroupEnabled ? 1 : 0]; }
-    
     QColor mapButton(void)              const { return _mapButton[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor mapButtonHighlight(void)     const { return _mapButtonHighlight[_theme][_colorGroupEnabled ? 1 : 0]; }
 
+    void setWindow(QColor& color)               { _window[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setWindowShade(QColor& color)          { _windowShade[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setWindowShadeDark(QColor& color)      { _windowShadeDark[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setText(QColor& color)                 { _text[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setWarningText(QColor& color)          { _warningText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setButton(QColor& color)               { _button[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setButtonText(QColor& color)           { _buttonText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setButtonHighlight(QColor& color)      { _buttonHighlight[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setButtonHighlightText(QColor& color)  { _buttonHighlightText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setPrimaryButton(QColor& color)        { _primaryButton[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setPrimaryButtonText(QColor& color)    { _primaryButtonText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setTextField(QColor& color)            { _textField[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setTextFieldText(QColor& color)        { _textFieldText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setMapButton(QColor& color)            { _mapButton[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+    void setMapButtonHighlight(QColor& color)   { _mapButtonHighlight[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); }
+
     static Theme globalTheme(void) { return _theme; }
     static void setGlobalTheme(Theme newTheme);
 
@@ -137,6 +137,9 @@ signals:
     void paletteChanged(void);
     
 private:
+    static void _signalPaletteChangeToAll(void);
+    void _signalPaletteChanged(void);
+
     static Theme    _theme;             ///< There is a single theme for all palettes
     bool            _colorGroupEnabled; ///< Currently selected ColorGroup. true: enabled, false: disabled
     

src/QmlControls/ClickableColor.qml

+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Dialogs 1.2
+
+Rectangle {
+    id:             _root
+    width:          80
+    height:         20
+    border.width:   1
+    border.color:   "black"
+
+    signal colorSelected(var color)
+
+    ColorDialog {
+        id: colorDialog
+        onAccepted: {
+            _root.colorSelected(colorDialog.color)
+            colorDialog.close()
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+
+        onClicked: {
+            colorDialog.color = _root.color
+            colorDialog.visible = true
+        }
+    }
+}

src/QmlControls/DropButton.qml

@@ -161,7 +161,6 @@ Item {
         radius:         width / 2
         border.width:   2
         border.color:   "white"
-        opacity:        checked ? 0.95 : 0.65
         color:          checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton
 
         Image {
@@ -170,6 +169,7 @@ Item {
             fillMode:       Image.PreserveAspectFit
             mipmap:         true
             smooth:         true
+
             MouseArea {
                 anchors.fill: parent
                 onClicked:  {

src/QmlControls/IndicatorButton.qml

@@ -9,6 +9,8 @@ import QGroundControl.ScreenTools   1.0
 // indicator on the right edge.
 
 QGCButton {
+    showBorder: true
+
     property bool indicatorGreen: false
 
     Rectangle {

src/QmlControls/ModeSwitchDisplay.qml

@@ -43,7 +43,7 @@ Rectangle {
     anchors.left:           parent.left
     anchors.right:          parent.right
     height:                 column.height + (ScreenTools.defaultFontPixelWidth * 2)
-    color:                  _qgcPal.windowShade
+    color:                  _qgcPal.window
 
     QGCPalette { id: _qgcPal; colorGroupEnabled: enabled }
 

src/QmlControls/QGCButton.qml

@@ -7,8 +7,9 @@ import QGroundControl.Palette 1.0
 import QGroundControl.ScreenTools 1.0
 
 Button {
-    // primary: true - this is the primary button for this group of buttons
-    property bool primary: false
+
+    property bool primary: false    // primary: true - primary button for a group of buttons
+    property bool showBorder: false ///< true: draw border around button
 
     property var __qgcPal: QGCPalette { colorGroupEnabled: enabled }
 
@@ -68,6 +69,8 @@ Button {
 
                 Rectangle {
                     anchors.fill:   parent
+                    border.width:   showBorder ? 1: 0
+                    border.color:   __qgcPal.buttonText
                     color:          __showHighlight ?
                                         control.__qgcPal.buttonHighlight :
                                         (primary ? control.__qgcPal.primaryButton : control.__qgcPal.button)

src/QmlControls/QGroundControl.Controls.qmldir

@@ -35,3 +35,5 @@ MissionItemSummary      1.0 MissionItemSummary.qml
 MissionItemEditor       1.0 MissionItemEditor.qml
 
 MainToolBar 1.0 MainToolBar.qml
+
+ClickableColor 1.0 ClickableColor.qml

src/QmlControls/QmlTestWidget.cc

@@ -26,11 +26,30 @@
 
 #include "QmlTestWidget.h"
 
+#include <QColorDialog>
+
 QmlTestWidget::QmlTestWidget(void)
     : QGCQmlWidgetHolder(QString(), NULL, NULL)
 {
     setAttribute(Qt::WA_DeleteOnClose);
     resize(900, 500);
     setVisible(true);
+
+    setContextPropertyObject("controller", this);
+
     setSource(QUrl::fromUserInput("qrc:qml/QmlTest.qml"));
 }
+
+void QmlTestWidget::showColorDialog(QQuickItem* item)
+{
+    Q_UNUSED(item)
+    QColorDialog colorDialog(this);
+    connect(&colorDialog, &QColorDialog::colorSelected, this, &QmlTestWidget::_colorSelected);
+    colorDialog.open();
+}
+
+void QmlTestWidget::_colorSelected(const QColor & color)
+{
+    Q_UNUSED(color);
+}
+

src/QmlControls/QmlTestWidget.h

@@ -37,6 +37,12 @@ class QmlTestWidget : public QGCQmlWidgetHolder
 
 public:
     QmlTestWidget(void);
+
+    Q_INVOKABLE void showColorDialog(QQuickItem* item);
+
+private slots:
+    void _colorSelected(const QColor & color);
+
 };
 
 #endif

src/QmlControls/RoundButton.qml

@@ -31,14 +31,15 @@ Item {
         radius:         width / 2
         border.width:   2
         border.color:   "white"
-        opacity:        checked ? 0.95 : 0.65
         color:          checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton
+
         Image {
             id:             button
             anchors.fill:   parent
             fillMode:       Image.PreserveAspectFit
             mipmap:         true
             smooth:         true
+
             MouseArea {
                 anchors.fill:   parent
                 onClicked: {

src/QmlControls/ScreenToolsController.cc

@@ -29,6 +29,8 @@
 
 #ifdef Q_OS_WIN
 const double ScreenToolsController::_defaultFontPixelSizeRatio = 1.0;
+#elif __mobile__
+const double ScreenToolsController::_defaultFontPixelSizeRatio = 1.0;
 #else
 const double ScreenToolsController::_defaultFontPixelSizeRatio = 0.8;
 #endif

src/QmlControls/SubMenuButton.qml

@@ -28,7 +28,7 @@ Button {
 
         background: Rectangle {
             id:     innerRect
-            color:  showHighlight ? qgcPal.buttonHighlight : qgcPal.button
+            color:  showHighlight ? qgcPal.buttonHighlight : qgcPal.windowShade
 
             readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.5
 
@@ -59,7 +59,7 @@ Button {
                 anchors.top:    titleBar.bottom
                 anchors.bottom: parent.bottom
                 width:          parent.width
-                color:          qgcPal.windowShade
+                color:          qgcPal.windowShadeDark
 
                 QGCColoredImage {
                     anchors.margins:    ScreenTools.defaultFontPixelHeight * .75

src/VehicleSetup/SetupView.qml

@@ -34,7 +34,9 @@ import QGroundControl.Controls              1.0
 import QGroundControl.ScreenTools           1.0
 import QGroundControl.MultiVehicleManager   1.0
 
-Item {
+Rectangle {
+    anchors.fill:   parent
+    color:          qgcPal.window
     z:              zOrder   // zOrder comes from the Loader in MainWindow.qml
 
     QGCPalette { id: qgcPal; colorGroupEnabled: true }
@@ -44,7 +46,7 @@ Item {
     readonly property real      _defaultTextHeight: ScreenTools.defaultFontPixelHeight
     readonly property real      _defaultTextWidth:  ScreenTools.defaultFontPixelWidth
     readonly property real      _margin:            _defaultTextHeight / 2
-    readonly property real      _buttonWidth:       _defaultTextWidth * 15
+    readonly property real      _buttonWidth:       _defaultTextWidth * 17
     readonly property string    _armedVehicleText:  "This operation cannot be performed while vehicle is armed."
 
     property string _messagePanelText:              "missing message panel text"
@@ -198,8 +200,7 @@ Item {
     Rectangle {
         //anchors.margins:    _defaultTextHeight * 2
         anchors.fill:       parent
-        color:              qgcPal.window
-        opacity:            0.8
+        color:              qgcPal.windowShadeDark
 
         QGCLabel {
             id:                     title
@@ -218,12 +219,14 @@ Item {
             anchors.bottom:     parent.bottom
             anchors.left:       parent.left
             anchors.right:      parent.right
-            color:              qgcPal.windowShade
+            color:              qgcPal.window
 
             Flickable {
                 id:                 buttonFlickable
                 width:              _buttonWidth
-                height:             parent.height
+                anchors.topMargin:  _defaultTextHeight / 2
+                anchors.top:        parent.top
+                anchors.bottom:     parent.bottom
                 contentWidth:       _buttonWidth
                 contentHeight:      buttonColumn.height
                 flickableDirection: Flickable.VerticalFlick

src/VehicleSetup/VehicleSummary.qml

@@ -67,7 +67,7 @@ Rectangle {
                 Rectangle {
                     width:  ScreenTools.defaultFontPixelWidth * 28
                     height: ScreenTools.defaultFontPixelHeight * 13
-                    color:  qgcPal.windowShade
+                    color:  qgcPal.window
 
                     readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 2
 
@@ -76,7 +76,7 @@ Rectangle {
                         id:     titleBar
                         width:  parent.width
                         height: titleHeight
-                        color:  qgcPal.windowShadeDark
+                        color:  qgcPal.windowShade
 
                         // Title text
                         QGCLabel {

src/ui/MainWindow.qml

@@ -33,7 +33,7 @@ import QGroundControl.ScreenTools   1.0
 FlightDisplayView {
     id: _root
 
-    topMargin: toolbarLoader.height
+    topMargin: toolbarLoader.height + (ScreenTools.defaultFontPixelHeight / 2)
 
     property var _toolbar: toolbarLoader.item
 
@@ -102,7 +102,6 @@ FlightDisplayView {
 
     Loader {
         id:                 setupViewLoader
-        anchors.margins:    ScreenTools.defaultFontPixelWidth
         anchors.left:       parent.left
         anchors.right:      parent.right
         anchors.top:        toolbarLoader.bottom

src/ui/toolbar/MainToolBar.qml

@@ -38,9 +38,12 @@ import QGroundControl.MultiVehicleManager   1.0
 import QGroundControl.ScreenTools           1.0
 import QGroundControl.Controllers           1.0
 
-Item {
+Rectangle {
     id:             toolBarHolder
+    anchors.left:   parent.left
+    anchors.right:  parent.right
     height:         toolBarHeight
+    color:          qgcPal.window
 
     QGCPalette { id: qgcPal; colorGroupEnabled: true }
 

src/ui/toolbar/MainToolBarActiveVehicleComponent.qml

@@ -105,7 +105,7 @@ Row {
     }
 
     QGCButton {
-        width:                  ScreenTools.defaultFontPixelWidth * 12
+        width:                  ScreenTools.defaultFontPixelWidth * 13
         height:                 cellHeight
         anchors.verticalCenter: parent.verticalCenter
         text:                   "Vehicle " + activeVehicle.id
@@ -359,7 +359,7 @@ Row {
     }
 
     QGCButton {
-        width:                  ScreenTools.defaultFontPixelWidth * 15
+        width:                  ScreenTools.defaultFontPixelWidth * 16
         height:                 cellHeight
         anchors.verticalCenter: parent.verticalCenter
         text:                   activeVehicle.flightMode