Remake: Change to "sign in" button

CURA-6132

resources/qml/Account/AccountWidget.qml

@@ -1,21 +1,65 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.7
+import QtQuick 2.10
-import QtQuick.Controls 2.1
+import QtQuick.Controls 2.3
 
 import UM 1.4 as UM
 import Cura 1.1 as Cura
 
-Button
+Item
 {
-    id: accountWidget
     property var profile: Cura.API.account.userProfile
     property var loggedIn: Cura.API.account.isLoggedIn
 
+    height: signInButton.height > accountWidget.height ? signInButton.height : accountWidget.height
+    width: signInButton.width > accountWidget.width ? signInButton.width : accountWidget.width
+
+    Button
+    {
+        id: signInButton
+
+        anchors.verticalCenter: parent.verticalCenter
+
+        text: catalog.i18nc("@action:button", "Sign in")
+
+        height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
+        onClicked: popup.opened ? popup.close() : popup.open()
+        visible: !loggedIn
+
+        hoverEnabled: true
+
+        background: Rectangle
+        {
+            radius: UM.Theme.getSize("action_button_radius").width
+            color: signInButton.hovered ? UM.Theme.getColor("primary_text") : UM.Theme.getColor("main_window_header_background")
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("primary_text")
+        }
+
+        contentItem: Label
+        {
+            id: label
+            text: signInButton.text
+            font: UM.Theme.getFont("default")
+            color: signInButton.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text")
+            width: contentWidth
+            verticalAlignment: Text.AlignVCenter
+            renderType: Text.NativeRendering
+        }
+    }
+
+    Button
+    {
+        id: accountWidget
+
+        anchors.verticalCenter: parent.verticalCenter
+
         implicitHeight: UM.Theme.getSize("main_window_header").height
         implicitWidth: UM.Theme.getSize("main_window_header").height
 
+        visible: loggedIn
+
         background: AvatarImage
         {
             id: avatar
@@ -41,6 +85,7 @@ Button
         }
 
         onClicked: popup.opened ? popup.close() : popup.open()
+    }
 
     Popup
     {

resources/qml/MainWindow/MainWindowHeader.qml

@@ -122,6 +122,7 @@ Item
         id: accountWidget
         anchors
         {
+            verticalCenter: parent.verticalCenter
             right: parent.right
             rightMargin: UM.Theme.getSize("default_margin").width
         }