Improve the visual of the New Project dialog

* Reworked dialog header -- added DS logo, reworded title & subtitle,
  aligned them to the left
* Added radius for rectangles: Presets pane, Styles pane, the
  Orientation button
* Added extra padding for style items -- so it's easier to figure that
  the label is for the image above it.

Task-number: QDS-5500
Change-Id: Icebe8abb886401e5d075e4a372c0036468301490
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

6 files changed, 59 insertions, 21 deletions

diff --git a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml b/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml
index 3e91ab70f1..1f88360266 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml
@@ -58,41 +58,66 @@ Item {
                     anchors.fill: parent
 
                     Item { width: parent.width; implicitHeight: 20 } // spacer
+
                     Row {
                         width: parent.width
                         height: DialogValues.dialogTitleTextHeight
-                        Layout.alignment: Qt.AlignHCenter
+
+                        Item { width: DialogValues.dialogLeftPadding; height: 1} // horizontal spacer
+
+                        Image {
+                            asynchronous: false
+                            source: "image://newprojectdialog_library/logo"
+                            width: DialogValues.logoWidth
+                            height: DialogValues.logoHeight
+                        }
+
+                        Item {width: 10; height: 1}
+
                         Text {
-                            text: qsTr("Welcome to ")
+                            text: qsTr("Let's create something wonderful with ")
                             font.pixelSize: DialogValues.dialogTitlePixelSize
                             font.family: "Titillium Web"
                             height: DialogValues.dialogTitleTextHeight
                             lineHeight: DialogValues.dialogTitleLineHeight
                             lineHeightMode: Text.FixedHeight
                             color: DialogValues.textColor
+                            verticalAlignment: Text.AlignVCenter
                         }
 
                         Text {
-                            text: qsTr("Qt Design Studio")
+                            text: qsTr("Qt Design Studio!")
                             font.pixelSize: DialogValues.dialogTitlePixelSize
                             font.family: "Titillium Web"
                             height: DialogValues.dialogTitleTextHeight
                             lineHeight: DialogValues.dialogTitleLineHeight
                             lineHeightMode: Text.FixedHeight
-                            color: DialogValues.textColorInteraction
+                            color: DialogValues.brandTextColor
+                            verticalAlignment: Text.AlignVCenter
                         }
-                    }
+                    } // Row
 
-                    Text {
+                    Item { width: parent.width; height: 11 } // spacer
+
+                    Item {
                         width: parent.width
-                        text: qsTr("Create new project by selecting a suitable Preset and then adjust details.")
-                        color: DialogValues.textColor
-                        font.pixelSize: DialogValues.paneTitlePixelSize
-                        lineHeight: DialogValues.paneTitleLineHeight
-                        lineHeightMode: Text.FixedHeight
-                        Layout.alignment: Qt.AlignHCenter
-                    }
+                        height: DialogValues.paneTitleLineHeight
+                        Row {
+                            width: parent.width
+                            height: DialogValues.paneTitleLineHeight
 
+                            Item { width: DialogValues.dialogLeftPadding; height: 1} // spacer
+
+                            Text {
+                                width: parent.width - DialogValues.dialogLeftPadding
+                                text: qsTr("Create new project by selecting a suitable Preset and then adjust details.")
+                                color: DialogValues.textColor
+                                font.pixelSize: DialogValues.paneTitlePixelSize
+                                lineHeight: DialogValues.paneTitleLineHeight
+                                lineHeightMode: Text.FixedHeight
+                            }
+                        }
+                    }
                     Item { width: parent.width; Layout.fillHeight: true} // spacer
                 } // ColumnLayout
             } // Header Item
@@ -102,7 +127,7 @@ Item {
                 Layout.fillHeight: true
 
                 RowLayout {
-                    x: 35
+                    x: DialogValues.dialogLeftPadding
                     width: parent.width - 70
                     height: parent.height
                     spacing: 0
@@ -113,6 +138,7 @@ Item {
                         Layout.fillHeight: true
                         Layout.minimumWidth: 379 // figured out this number visually
                         Layout.minimumHeight: 261 // figured out this number visually
+                        radius: 6
 
                         Column {
                             x: DialogValues.defaultPadding                          // left padding
@@ -294,7 +320,7 @@ Item {
                         } // RowLayout
                     } // Dialog Button Box
 
-                    Item { implicitWidth: 35 - DialogValues.defaultPadding }
+                    Item { implicitWidth: DialogValues.dialogLeftPadding - DialogValues.defaultPadding }
                 } // RowLayout
             } // Footer
         } // ColumnLayout
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/image/logo.png b/share/qtcreator/qmldesigner/newprojectdialog/image/logo.png
new file mode 100644
index 0000000000..555e0cac58
--- /dev/null
+++ b/share/qtcreator/qmldesigner/newprojectdialog/image/logo.png
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/image/logo@2x.png b/share/qtcreator/qmldesigner/newprojectdialog/image/logo@2x.png
new file mode 100644
index 0000000000..5c443d177a
--- /dev/null
+++ b/share/qtcreator/qmldesigner/newprojectdialog/image/logo@2x.png
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml
index d622253a68..ab4c081db4 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml
@@ -58,7 +58,7 @@ Item {
                 Text {
                     id: detailsHeading
                     text: qsTr("Details")
-                    height: DialogValues.dialogTitleTextHeight
+                    height: DialogValues.paneTitleTextHeight
                     width: parent.width;
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
@@ -388,6 +388,7 @@ Item {
                                                 width: parent.width
                                                 height: orientationButton.height / 2
                                                 anchors.verticalCenter: parent.verticalCenter
+                                                radius: 3
                                             }
                                         }
 
@@ -401,6 +402,7 @@ Item {
                                             width: orientationButton.width / 4
                                             height: orientationButton.height
                                             color: "white"
+                                            radius: 3
                                         }
                                     }
                                 }
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml
index b99b99dc95..ae26727e07 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml
@@ -36,7 +36,11 @@ QtObject {
     readonly property int dialogContentHeight: projectViewHeight + 300  // i.e. dialog without header and footer
     readonly property int loadedPanesWidth: detailsPaneWidth + stylesPaneWidth
     readonly property int detailsPaneWidth: 330 + detailsPanePadding * 2
-    readonly property int dialogTitleTextHeight: 47
+    readonly property int dialogTitleTextHeight: 85
+    readonly property int paneTitleTextHeight: 47
+    readonly property int logoWidth: 85
+    readonly property int logoHeight: 85
+
     /* detailsScrollableContentHeight - the full height that may need to be scrolled to be fully
        visible, if the dialog box is too small. */
     readonly property int detailsScrollableContentHeight: 428
@@ -44,6 +48,7 @@ QtObject {
     readonly property int detailsPanePadding: 18
     readonly property int stylesPanePadding: 18
     readonly property int defaultPadding: 18
+    readonly property int dialogLeftPadding: 35
 
     readonly property int styleImageWidth: 200
     readonly property int styleImageBorderWidth: 2
@@ -73,9 +78,11 @@ QtObject {
     readonly property real viewHeaderLineHeight: 24
     readonly property real paneTitlePixelSize: 18
     readonly property real paneTitleLineHeight: 27
-    readonly property int dialogTitlePixelSize: 32
+    readonly property int dialogTitlePixelSize: 38
     readonly property int dialogTitleLineHeight: 49
 
+    readonly property string brandTextColor: "#2e769e"
+
     // for a spacer item
     function narrowSpacing(value, layoutSpacing = DialogValues.defaultPadding) {
         /* e.g. if we want narrow spacing value = 11, then for the spacer item residing inside a
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
index 09350f5601..1464449ee7 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
@@ -52,6 +52,7 @@ Item {
     Rectangle {
         color: DialogValues.lightPaneColor
         anchors.fill: parent
+        radius: 6
 
         Item {
             x: DialogValues.stylesPanePadding                               // left padding
@@ -65,7 +66,7 @@ Item {
                 Text {
                     id: styleTitleText
                     text: qsTr("Style")
-                    Layout.minimumHeight: DialogValues.dialogTitleTextHeight
+                    Layout.minimumHeight: DialogValues.paneTitleTextHeight
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
                     lineHeight: DialogValues.paneTitleLineHeight
@@ -118,7 +119,7 @@ Item {
 
                     delegate: ItemDelegate {
                         id: delegateId
-                        height: styleImage.height + DialogValues.styleImageBorderWidth + styleText.height + 1
+                        height: styleImage.height + DialogValues.styleImageBorderWidth + styleText.height + extraPadding.height + 1
                         width: stylesList.width
 
                         Rectangle {
@@ -134,7 +135,7 @@ Item {
                                     border.width: index == stylesList.currentIndex ? DialogValues.styleImageBorderWidth : 0
                                     color: "transparent"
                                     width: parent.width
-                                    height: parent.height - styleText.height
+                                    height: parent.height - styleText.height - extraPadding.height
 
                                     Image {
                                         id: styleImage
@@ -158,6 +159,8 @@ Item {
                                     width: parent.width
                                     color: DialogValues.textColor
                                 }
+
+                                Item { id: extraPadding; width: 1; height: 10 }
                             } // Column
                         } // Rectangle