From d943db45406c0dd8e6d02c058bf227bb7839e050 Mon Sep 17 00:00:00 2001
From: Lubos <lubos@iiteam.eu>
Date: Tue, 12 Dec 2023 20:31:40 +0100
Subject: [PATCH] Update screen: Create workspace

---
 app/qml/components/MMHeader.qml          |  6 +-
 app/qml/onboarding/MMCreateWorkspace.qml | 91 +++++++++++++++++++-----
 gallery/qml/pages/OnboardingPage.qml     |  2 +-
 3 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/app/qml/components/MMHeader.qml b/app/qml/components/MMHeader.qml
index a5f794c78..ad89a06f1 100644
--- a/app/qml/components/MMHeader.qml
+++ b/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
diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml
index b3ca662e2..7a987b3ae 100644
--- a/app/qml/onboarding/MMCreateWorkspace.qml
+++ b/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()
     }
   }
 }
diff --git a/gallery/qml/pages/OnboardingPage.qml b/gallery/qml/pages/OnboardingPage.qml
index f564d44cf..17f23f72d 100644
--- a/gallery/qml/pages/OnboardingPage.qml
+++ b/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")