From b49004a7420393de82fa9a1b658ffa4b492fd148 Mon Sep 17 00:00:00 2001
From: Jelle Spijker <spijker.jelle@gmail.com>
Date: Mon, 4 Oct 2021 16:47:20 +0200
Subject: [PATCH] Reorient layout of skip, sign-in and create

* Skip button
  - Moved to the left, such that a user won't click on it mindlessly
  - Made it a Tertiary button, so it will have predictable margins
* Sign-in button
  - Moved to the right bottom, making it the logical next option
* Create an account
  - Moved to be inline with skip and sign-in
  - Made it a secondary button as requested by UX

Contributes to CURA-8602
---
 resources/qml/WelcomePages/CloudContent.qml | 75 ++++++++++-----------
 1 file changed, 34 insertions(+), 41 deletions(-)

diff --git a/resources/qml/WelcomePages/CloudContent.qml b/resources/qml/WelcomePages/CloudContent.qml
index 528991b38e..7dc35c7bc5 100644
--- a/resources/qml/WelcomePages/CloudContent.qml
+++ b/resources/qml/WelcomePages/CloudContent.qml
@@ -190,55 +190,48 @@ Item
                     }
                 }
             }
-
-            // Sign in Button
-            Cura.PrimaryButton
-            {
-                id: signInButton
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: catalog.i18nc("@button", "Sign in")
-                onClicked: Cura.API.account.login()
-                // Content Item is used in order to align the text inside the button. Without it, when resizing the
-                // button, the text will be aligned on the left
-                contentItem: Text {
-                    text: signInButton.text
-                    font: UM.Theme.getFont("medium")
-                    color: UM.Theme.getColor("primary_text")
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
-            // Create an account button
-            Cura.TertiaryButton
-            {
-                id: createAccountButton
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: catalog.i18nc("@text", "Create a free Ultimaker Account")
-                onClicked:  Qt.openUrlExternally("https://ultimaker.com/app/ultimaker-cura-account-sign-up?utm_source=cura&utm_medium=software&utm_campaign=onboarding-signup")
-            }
         }
     }
 
-    // The "Skip" button exists on the bottom right
-    Label
+    // Skip button
+    Cura.TertiaryButton
     {
         id: skipButton
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        text: catalog.i18nc("@button", "Skip")
+        onClicked: base.showNextPage()
+    }
+
+    // Create an account button
+    Cura.SecondaryButton
+    {
+        id: createAccountButton
+        anchors.right: signInButton.left
+        anchors.rightMargin: UM.Theme.getSize("default_margin").width
+        anchors.bottom: parent.bottom
+
+        text: catalog.i18nc("@text", "Create a free Ultimaker Account")
+        onClicked:  Qt.openUrlExternally("https://ultimaker.com/app/ultimaker-cura-account-sign-up?utm_source=cura&utm_medium=software&utm_campaign=onboarding-signup")
+    }
+
+    // Sign in Button
+    Cura.PrimaryButton
+    {
+        id: signInButton
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
-        text: catalog.i18nc("@button", "Skip")
-        color: UM.Theme.getColor("secondary_button_text")
-        font: UM.Theme.getFont("medium")
-        renderType: Text.NativeRendering
 
-        MouseArea
-        {
-            anchors.fill: parent
-            hoverEnabled: true
-            onClicked: base.showNextPage()
-            onEntered: parent.font.underline = true
-            onExited: parent.font.underline = false
+        text: catalog.i18nc("@button", "Sign in")
+        onClicked: Cura.API.account.login()
+        // Content Item is used in order to align the text inside the button. Without it, when resizing the
+        // button, the text will be aligned on the left
+        contentItem: Text {
+            text: signInButton.text
+            font: UM.Theme.getFont("medium")
+            color: UM.Theme.getColor("primary_text")
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
         }
     }
 }