Use single qml file for sync states

CURA-7290

resources/qml/Account/UserOperations.qml

@@ -29,21 +29,12 @@ Column
         color: UM.Theme.getColor("text")
     }
 
-    SyncStateIdle {
-        visible: Cura.API.account.syncState == "idle"
+    SyncState
+    {
+        id: syncRow
     }
 
-    SyncStateSyncing {
-        visible: Cura.API.account.syncState == "syncing"
-    }
 
-    SyncStateSuccess {
-        visible: Cura.API.account.syncState == "success"
-    }
-
-    SyncStateError {
-        visible: Cura.API.account.syncState == "error"
-    }
 
     Label
     {
@@ -85,4 +76,32 @@ Column
             onExited: signOutButton.font.underline = false
         }
     }
+
+    signal syncStateChanged(string newState)
+
+    onSyncStateChanged: {
+        if(newState == "syncing"){
+            syncRow.iconSource = UM.Theme.getIcon("update")
+            syncRow.labelText = catalog.i18nc("@label", "Checking...")
+        } else if (newState == "success") {
+            syncRow.iconSource = UM.Theme.getIcon("checked")
+            syncRow.labelText = catalog.i18nc("@label", "You are up to date")
+        } else if (newState == "error") {
+            syncRow.iconSource = UM.Theme.getIcon("warning-light")
+            syncRow.labelText = catalog.i18nc("@label", "Something went wrong...")
+        } else {
+            print("Error: unexpected sync state: " + newState)
+        }
+
+        if(newState == "syncing"){
+            syncRow.animateIconRotation = true
+            syncRow.syncButtonVisible = false
+        } else {
+            syncRow.animateIconRotation = false
+            syncRow.syncButtonVisible = true
+        }
+    }
+
+    Component.onCompleted: Cura.API.account.syncStateChanged.connect(syncStateChanged)
+
 }