From f932239b6a0ecdb8a227b02878e8ddc4ff4e4fbe Mon Sep 17 00:00:00 2001
From: Ghostkeeper <rubend@tutanota.com>
Date: Mon, 6 Dec 2021 16:52:38 +0100
Subject: [PATCH] Implement aesthetics of busy indicator

Don't use the default spinner but use an image from our theme. A new image. And change the font size, colour and spacings a bit according to our designs.

Contributes to issue CURA-8587.
---
 .../Marketplace/resources/qml/ManageButton.qml   | 16 ++++++++++------
 .../themes/cura-light/icons/default/Spinner.svg  |  3 +++
 2 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 resources/themes/cura-light/icons/default/Spinner.svg

diff --git a/plugins/Marketplace/resources/qml/ManageButton.qml b/plugins/Marketplace/resources/qml/ManageButton.qml
index 5e1aad03e7..39be04d386 100644
--- a/plugins/Marketplace/resources/qml/ManageButton.qml
+++ b/plugins/Marketplace/resources/qml/ManageButton.qml
@@ -53,21 +53,24 @@ RowLayout
         height: UM.Theme.getSize("action_button").height
         width: childrenRect.width
 
-        BusyIndicator
+        UM.RecolorImage
         {
             id: busyIndicator
             visible: parent.visible
             width: height
             anchors.left: parent.left
             anchors.top: parent.top
+            anchors.topMargin: UM.Theme.getSize("narrow_margin").height
             anchors.bottom: parent.bottom
+            anchors.bottomMargin: anchors.topMargin
 
-            palette.dark: UM.Theme.getColor("text")
+            source: UM.Theme.getIcon("Spinner")
+            color: UM.Theme.getColor("primary")
 
             RotationAnimator
             {
-                target: busyIndicator.contentItem
-                running: busyIndicator.visible && busyIndicator.running
+                target: busyIndicator
+                running: busyIndicator.visible
                 from: 0
                 to: 360
                 loops: Animation.Infinite
@@ -79,10 +82,11 @@ RowLayout
             id: busyMessageText
             visible: parent.visible
             anchors.left: busyIndicator.right
+            anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
             anchors.verticalCenter: parent.verticalCenter
 
-            font: UM.Theme.getFont("default")
-            color: UM.Theme.getColor("text")
+            font: UM.Theme.getFont("medium_bold")
+            color: UM.Theme.getColor("primary")
         }
     }
 
diff --git a/resources/themes/cura-light/icons/default/Spinner.svg b/resources/themes/cura-light/icons/default/Spinner.svg
new file mode 100644
index 0000000000..22a8f4dfd9
--- /dev/null
+++ b/resources/themes/cura-light/icons/default/Spinner.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12H4C4 13.5823 4.46919 15.129 5.34824 16.4446C6.22729 17.7602 7.47672 18.7855 8.93853 19.391C10.4003 19.9965 12.0089 20.155 13.5607 19.8463C15.1126 19.5376 16.538 18.7757 17.6569 17.6569C18.7757 16.538 19.5376 15.1126 19.8463 13.5607C20.155 12.0089 19.9965 10.4003 19.391 8.93853C18.7855 7.47672 17.7602 6.22729 16.4446 5.34824C15.129 4.46919 13.5823 4 12 4V2C14.6508 2.00436 17.1918 3.05933 19.0662 4.93375C20.9407 6.80817 21.9956 9.34917 22 12Z"/>
+</svg>