Update Settings view category items to new style

Removed the fixed height from the SettingView list so that the SettingItems can have a larger height than the SettingCategory

CURA-9005

resources/qml/Settings/SettingCategory.qml

@@ -16,26 +16,41 @@ Button
     anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width
     hoverEnabled: true
 
-    height: UM.Theme.getSize("section_icon_column").height
+    height: enabled ? UM.Theme.getSize("section").height : 0
 
     background: Rectangle
     {
         id: backgroundRectangle
-        height: UM.Theme.getSize("section").height
+        height: base.height
         anchors.verticalCenter: parent.verticalCenter
-        color:
+
-        {
+        color: UM.Theme.getColor("setting_category")
-            if (!base.enabled)
-            {
-                return UM.Theme.getColor("setting_category_disabled")
-            }
-            else if (base.hovered)
-            {
-                return UM.Theme.getColor("setting_category_hover")
-            }
-            return UM.Theme.getColor("setting_category")
-        }
         Behavior on color { ColorAnimation { duration: 50; } }
+
+        Rectangle
+        {
+            //Lining on top
+            anchors.top: parent.top
+            color: UM.Theme.getColor("border_main")
+            height: UM.Theme.getSize("default_lining").height
+            width: parent.width
+        }
+
+        states:
+        [
+            State
+            {
+                name: "disabled"
+                when: !base.enabled
+                PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_disabled")}
+            },
+            State
+            {
+                name: "hovered"
+                when: base.hovered
+                PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_hover")}
+            }
+        ]
     }
 
     signal showTooltip(string text)
@@ -73,7 +88,7 @@ Button
             anchors
             {
                 left: parent.left
-                leftMargin: 2 * UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width
+                leftMargin: (0.9 * UM.Theme.getSize("default_margin").width) + UM.Theme.getSize("section_icon").width
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
@@ -91,7 +106,7 @@ Button
             id: category_arrow
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+            anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
             width: UM.Theme.getSize("standard_arrow").width
             height: UM.Theme.getSize("standard_arrow").height
             sourceSize.height: width
@@ -105,7 +120,6 @@ Button
         id: icon
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("thin_margin").width
         color: base.text_color
         source: UM.Theme.getIcon(definition.icon)
         width: UM.Theme.getSize("section_icon").width

resources/qml/Settings/SettingItem.qml

@@ -13,8 +13,7 @@ import "."
 Item
 {
     id: base
-
+    height: enabled ? UM.Theme.getSize("section").height +  UM.Theme.getSize("narrow_margin").height: 0
-    height: UM.Theme.getSize("section").height
     anchors.left: parent.left
     anchors.right: parent.right
     // To avoid overlapping with the scrollBars

resources/qml/Settings/SettingView.qml

@@ -213,14 +213,12 @@ Item
         }
 
         property int indexWithFocus: -1
-        property double delegateHeight: UM.Theme.getSize("section").height + 2 * UM.Theme.getSize("default_lining").height
         property string activeMachineId: Cura.MachineManager.activeMachine !== null ? Cura.MachineManager.activeMachine.id : ""
         delegate: Loader
         {
             id: delegate
 
             width: contents.width
-            height: enabled ? contents.delegateHeight: 0
             Behavior on height { NumberAnimation { duration: 100 } }
             opacity: enabled ? 1 : 0
             Behavior on opacity { NumberAnimation { duration: 100 } }

resources/themes/cura-dark/theme.json

@@ -121,12 +121,8 @@
         "scrollbar_handle_hover": [255, 255, 255, 255],
         "scrollbar_handle_down": [255, 255, 255, 255],
 
-        "setting_category": "background_3",
         "setting_category_disabled": [75, 80, 83, 255],
-        "setting_category_hover": "background_3",
-        "setting_category_text": [255, 255, 255, 152],
         "setting_category_disabled_text": [255, 255, 255, 101],
-        "setting_category_active_text": [255, 255, 255, 204],
 
         "setting_control": "background_2",
         "setting_control_selected": [34, 39, 42, 38],

resources/themes/cura-light/theme.json

@@ -286,12 +286,12 @@
         "scrollbar_handle_hover": [50, 130, 255, 255],
         "scrollbar_handle_down": [50, 130, 255, 255],
 
-        "setting_category": [240, 240, 240, 255],
+        "setting_category": "background_1",
         "setting_category_disabled": [255, 255, 255, 255],
-        "setting_category_hover": [232, 242, 252, 255],
+        "setting_category_hover": "background_2",
-        "setting_category_text": [35, 35, 35, 255],
+        "setting_category_text": "text_default",
         "setting_category_disabled_text": [24, 41, 77, 101],
-        "setting_category_active_text": [35, 35, 35, 255],
+        "setting_category_active_text": "text_default",
 
         "setting_control": "background_2",
         "setting_control_highlight": "background_3",