Refactor StepPanel and WelcomeDialog

resources/qml/WelcomePages/StepPanel.qml

@@ -3,7 +3,6 @@
 
 import QtQuick 2.10
 import QtQuick.Controls 2.3
-import QtGraphicalEffects 1.0 // For the dropshadow
 
 import UM 1.3 as UM
 import Cura 1.1 as Cura
@@ -15,14 +14,8 @@ Item
 {
     id: base
 
-    anchors.fill: parent
     clip: true
 
-    property int roundCornerRadius: 4
-    property int shadowOffset: 1
-    property int stepBarHeight: 12
-    property int contentMargins: 1
-
     property int currentStep: 0
     property int totalStepCount: (model == null) ? 0 : model.count
     property real progressValue: (totalStepCount == 0) ? 0 : (currentStep / totalStepCount)
@@ -88,57 +81,36 @@ Item
         base.currentStep = 0
     }
 
-    // Panel background
-    Rectangle
+    Rectangle  // Panel background
     {
         id: panelBackground
         anchors.fill: parent
-        anchors.margins: 2
-        color: "white"  // TODO
-        radius: base.roundCornerRadius  // TODO
-    }
+        radius: UM.Theme.getSize("default_radius").width
 
-    // Drop shadow around the panel
-    DropShadow
-    {
-        id: shadow
-        radius: UM.Theme.getSize("monitor_shadow_radius").width
-        anchors.fill: parent
-        source: parent
-        horizontalOffset: base.shadowOffset
-        verticalOffset: base.shadowOffset
-        color: UM.Theme.getColor("monitor_shadow")
-        transparentBorder: true
-        // Should always be drawn behind the background.
-        z: panelBackground.z - 1
-    }
-
-    CuraProgressBar
-    {
-        id: progressBar
+        CuraProgressBar
+        {
+            id: progressBar
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
 
-        value: base.progressValue
+            height: UM.Theme.getSize("progressbar").height
 
-        anchors
-        {
-            left: panelBackground.left
-            right: panelBackground.right
-            top: panelBackground.top
+            value: base.progressValue
         }
-        height: base.stepBarHeight
-    }
 
-    Loader
-    {
-        id: contentLoader
-        anchors
+        Loader
         {
-            margins: base.contentMargins
-            top: progressBar.bottom
-            bottom: parent.bottom
-            left: parent.left
-            right: parent.right
+            id: contentLoader
+            anchors
+            {
+                margins: base.contentMargins
+                top: progressBar.bottom
+                bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+            }
+            source: base.currentItem.page_url
         }
-        source: base.currentItem.page_url
     }
 }

resources/qml/WelcomePages/WelcomeContent.qml

@@ -54,7 +54,6 @@ Item
         Cura.PrimaryButton
         {
             id: getStartedButton
-            anchors.top: contentArea.bottom
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.margins: UM.Theme.getSize("welcome_pages_default_margin").width
             text: catalog.i18nc("@button", "Get started")

resources/qml/WelcomePages/WelcomeDialog.qml

@@ -4,6 +4,7 @@
 import QtQuick 2.10
 import QtQuick.Controls 2.3
 import QtQuick.Window 2.2
+import QtGraphicalEffects 1.0  // For the DropShadow
 
 import UM 1.3 as UM
 import Cura 1.1 as Cura
@@ -21,15 +22,31 @@ Window
     height: 600  // TODO
     color: "transparent"
 
+    property int shadowOffset: 1 * screenScaleFactor
+
     property alias currentStep: stepPanel.currentStep
 
     StepPanel
     {
         id: stepPanel
+        anchors.fill: parent
         currentStep: 0
         model: CuraApplication.getWelcomePagesModel()
     }
 
+    // Drop shadow around the panel
+    DropShadow
+    {
+        id: shadow
+        radius: UM.Theme.getSize("monitor_shadow_radius").width
+        anchors.fill: stepPanel
+        source: stepPanel
+        horizontalOffset: shadowOffset
+        verticalOffset: shadowOffset
+        color: UM.Theme.getColor("monitor_shadow")
+        transparentBorder: true
+    }
+
     // Close this dialog when there's no more page to show
     Connections
     {