Add a proper component with a label and a rectangle in the background

that shows the type of printer.

Contributes to CURA-5942.

resources/qml/PrinterSelector/MachineSelector.qml

@@ -84,6 +84,7 @@ Cura.ExpandableComponent
                     {
                         text: model.metadata["connect_group_name"]
                         checked: Cura.MachineManager.activeMachineNetworkGroupName == model.metadata["connect_group_name"]
+                        outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
 
                         Connections
                         {

resources/qml/PrinterSelector/MachineSelectorButton.qml

@@ -17,7 +17,7 @@ Button
     leftPadding: Math.round(1.5 * UM.Theme.getSize("default_margin").width)
     checkable: true
 
-    property var outputDevice: Cura.MachineManager.printerOutputDevices[0]
+    property var outputDevice: null
     property var printerTypesList: []
 
     function setPrinterTypesList()
@@ -63,9 +63,27 @@ Button
             Repeater
             {
                 model: printerTypesList
-                delegate: Label
+                delegate: Item
                 {
+                    width: UM.Theme.getSize("printer_type_label").width
+                    height: UM.Theme.getSize("printer_type_label").height
+
+                    Rectangle
+                    {
+                        anchors.fill: parent
+                        color: UM.Theme.getColor("printer_type_label_background")
+                    }
+
+                    Label
+                    {
+                        id: printerTypeLabel
                         text: modelData
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        renderType: Text.NativeRendering
+                        font: UM.Theme.getFont("very_small")
+                        color: UM.Theme.getColor("text")
+                    }
                 }
             }
         }

resources/qml/ViewOrientationControls.qml

@@ -21,7 +21,7 @@ Row
     {
         iconSource: UM.Theme.getIcon("view_3d")
         style: UM.Theme.styles.small_tool_button
-        onClicked:UM.Controller.rotateView("3d", 0)
+        onClicked: UM.Controller.rotateView("3d", 0)
     }
 
     // #2 Front view

resources/themes/cura-light/theme.json

@@ -81,7 +81,6 @@
         "lining": [192, 193, 194, 255],
         "viewport_overlay": [0, 0, 0, 192],
 
-
         "primary": [50, 130, 255, 255],
         "primary_hover": [48, 182, 231, 255],
         "primary_text": [255, 255, 255, 255],
@@ -114,6 +113,8 @@
 
         "toolbar_background": [255, 255, 255, 255],
 
+        "printer_type_label_background": [171, 171, 191, 255],
+
         "text": [0, 0, 0, 255],
         "text_detail": [174, 174, 174, 128],
         "text_link": [50, 130, 255, 255],
@@ -398,6 +399,8 @@
 
         "views_selector": [0.0, 4.0],
 
+        "printer_type_label": [3.5, 1.5],
+
         "default_radius": [0.25, 0.25],
 
         "wide_lining": [0.5, 0.5],