Update screen: Create workspace

app/qml/components/MMHeader.qml

@@ -13,10 +13,8 @@ import QtQuick.Controls
 Row {
   id: root
 
-  /* translate in parent! */
-  required property string headerTitle
-  /* -1 no step bar shown; 1, 2, 3 */
-  property int step: -1
+  property string headerTitle
+  property int step: -1 // -1 no step bar shown; 1, 2, 3
   property bool backVisible: true
   property color backColor: __style.whiteColor
   property font titleFont: __style.t4

app/qml/onboarding/MMCreateWorkspace.qml

@@ -11,38 +11,95 @@ import QtQuick.Layouts
 import QtQuick.Controls
 
 import "../components"
+import "../inputs"
 
 Page {
   id: root
 
   signal continueClicked
 
-  Column {
-    MMHeader {
-      headerTitle: qsTr("Create Workspace")
-      step: 1
-      backVisible: false
-    }
+  Rectangle {
+    anchors.fill: parent
+    color: __style.lightGreenColor
+  }
 
-    Label {
-      text: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.")
-      font: __style.p5
-      color: __style.forestColor
-    }
+  MMHeader {
+    id: header
+
+    x: mainColumn.padding
+    y: mainColumn.padding
+    width: parent.width - 2 * mainColumn.padding
+    backVisible: false
+    step: 1
+
+    onBackClicked: root.backClicked()
+  }
+
+  ScrollView {
+    width: parent.width
+    height: parent.height - header.height - bottomColumn.height - 40 * __dp
+    anchors.top: header.bottom
+    anchors.topMargin: 20 * __dp
+
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+
+    Column {
+      id: mainColumn
+
+      width: root.width
+      spacing: 20 * __dp
+      padding: 20 * __dp
 
-    MMInput {
-      title: qsTr("Workspace name")
-      placeholderText: qsTr("e.g. my-company")
+      Text {
+        width: parent.width - 2 * mainColumn.padding
+        text: qsTr("Create a workspace")
+        font: __style.h3
+        color: __style.forestColor
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        lineHeight: 1.2
+      }
+
+      Text {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        text: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.")
+        font: __style.p5
+        color: __style.nightColor
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        lineHeight: 1.5
+      }
+
+      Item { width: 1; height: 1 }
+
+      MMInputEditor {
+        width: parent.width - 2 * mainColumn.padding
+        title: qsTr("Workspace name")
+        placeholderText: qsTr("Your Workspace")
+      }
     }
+  }
+
+  Column {
+    id: bottomColumn
+
+    width: root.width
+    spacing: 20 * __dp
+    padding: 20 * __dp
+    anchors.bottom: parent.bottom
 
     MMTextBubble {
-      title: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.")
-      description: qsTr("A good candidate for a workspace name is the name of your team or organisation.")
+      width: root.width - 2 * mainColumn.padding
+      title: "Tip from Mergin Maps"
+      description: "A good candidate for a workspace name is the name of your team or organisation"
     }
 
     MMButton {
-      onClicked: root.continueClicked()
+      width: parent.width - 2 * mainColumn.padding
       text: qsTr("Create workspace")
+
+      onClicked: root.continueClicked()
     }
   }
 }

gallery/qml/pages/OnboardingPage.qml

@@ -94,7 +94,7 @@ Page {
     id: signUp
 
     anchors.fill: parent
-    //visible: false
+    visible: false
 
     onSignInClicked: console.log("Sign in clicked")
     onSignUpClicked: console.log("Sign up clicked")