Merge pull request #11668 from Ultimaker/CURA-8979_Materials_Preference_Page

Materials preference page

13 files changed, 997 insertions, 1086 deletions

diff --git a/resources/qml/CategoryButton.qml b/resources/qml/CategoryButton.qml
index dfd9625f6f..b5d8bb2b2d 100644
--- a/resources/qml/CategoryButton.qml
+++ b/resources/qml/CategoryButton.qml
@@ -10,6 +10,7 @@
 
 import QtQuick 2.2
 import QtQuick.Controls 2.1
+import QtQuick.Layouts 1.1
 
 import UM 1.5 as UM
 
@@ -17,14 +18,16 @@ Button
 {
     id: base
 
-    height: enabled ? UM.Theme.getSize("section_header").height : 0
+    height: UM.Theme.getSize("section_header").height
 
     property var expanded: false
-
+    property bool indented: false
     property alias arrow: categoryArrow
     property alias categoryIcon: icon.source
     property alias labelText: categoryLabel.text
-
+    property alias labelFont: categoryLabel.font
+    leftPadding: UM.Theme.getSize("narrow_margin").width
+    rightPadding: UM.Theme.getSize("narrow_margin").width
     states:
     [
         State
@@ -56,14 +59,13 @@ Button
     background: Rectangle
     {
         id: backgroundRectangle
-        height: base.height
 
         color: UM.Theme.getColor("setting_category")
         Behavior on color { ColorAnimation { duration: 50 } }
 
+        // Lining on top
         Rectangle
         {
-            //Lining on top
             anchors.top: parent.top
             color: UM.Theme.getColor("border_main")
             height: UM.Theme.getSize("default_lining").height
@@ -73,49 +75,48 @@ Button
 
     contentItem: Item
     {
-        anchors.fill: parent
+        id: content
+        //spacing: UM.Theme.getSize("narrow_margin").width
+
+        UM.RecolorImage
+        {
+            id: icon
+            source: ""
+            visible: icon.source != ""
+            anchors.verticalCenter: parent.verticalCenter
+            color: UM.Theme.getColor("setting_category_text")
+            width: visible ? UM.Theme.getSize("section_icon").width: 0
+            height: UM.Theme.getSize("section_icon").height
+            anchors.leftMargin: base.indented ? UM.Theme.getSize("default_margin").width: 0
+            sourceSize.width: width
+            sourceSize.height: width
+        }
 
         UM.Label
         {
             id: categoryLabel
-            anchors
-            {
-                left: parent.left
-                leftMargin: UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            textFormat: Text.PlainText
+            Layout.fillWidth: true
+            anchors.right: categoryArrow.left
+            anchors.left: icon.right
+            anchors.leftMargin: base.indented ? UM.Theme.getSize("default_margin").width + UM.Theme.getSize("narrow_margin").width: UM.Theme.getSize("narrow_margin").width
+            anchors.verticalCenter: parent.verticalCenter
+            elide: Text.ElideRight
+            wrapMode: Text.NoWrap
             font: UM.Theme.getFont("medium_bold")
             color: UM.Theme.getColor("setting_category_text")
-            fontSizeMode: Text.HorizontalFit
-            minimumPointSize: 8
         }
 
         UM.RecolorImage
         {
             id: categoryArrow
-            anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            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
+            anchors.verticalCenter: parent.verticalCenter
+            sourceSize.width: width
+            sourceSize.height: height
             color: UM.Theme.getColor("setting_control_button")
             source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
         }
     }
-
-    UM.RecolorImage
-    {
-        id: icon
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
-        color: UM.Theme.getColor("setting_category_text")
-        width: UM.Theme.getSize("section_icon").width
-        height: UM.Theme.getSize("section_icon").height
-        sourceSize.width: width
-        sourceSize.height: width
-    }
 }
\ No newline at end of file
diff --git a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
index 67840d4f26..51c9730052 100644
--- a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
+++ b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
@@ -22,6 +22,7 @@ UM.TooltipArea
 
     property int controlWidth: UM.Theme.getSize("setting_control").width
     property int controlHeight: UM.Theme.getSize("setting_control").height
+    property real spacing: UM.Theme.getSize("default_margin").width
 
     text: tooltipText
 
@@ -75,7 +76,7 @@ UM.TooltipArea
     {
         id: textFieldWithUnit
         anchors.left: fieldLabel.right
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.leftMargin: spacing
         verticalAlignment: Text.AlignVCenter
         selectionColor: UM.Theme.getColor("text_selection")
         selectedTextColor: UM.Theme.getColor("setting_control_text")
@@ -88,7 +89,6 @@ UM.TooltipArea
         background: UM.UnderlineBackground
         {
             anchors.fill: parent
-            anchors.margins: Math.round(UM.Theme.getSize("default_lining").width)
 
             liningColor:
             {
diff --git a/resources/qml/Preferences/MachinesPage.qml b/resources/qml/Preferences/MachinesPage.qml
index 28568d041b..93a35ff9bb 100644
--- a/resources/qml/Preferences/MachinesPage.qml
+++ b/resources/qml/Preferences/MachinesPage.qml
@@ -14,13 +14,21 @@ UM.ManagementPage
     id: base
 
     title: catalog.i18nc("@title:tab", "Printers")
+    detailsPlaneCaption: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
+
     model: Cura.GlobalStacksModel { }
 
     sectionRole: "discoverySource"
 
     activeId: Cura.MachineManager.activeMachine !== null ? Cura.MachineManager.activeMachine.id: ""
     activeIndex: activeMachineIndex()
-    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
     hamburgerButtonVisible: Cura.MachineManager.activeMachine !== null
 
     function activeMachineIndex()
@@ -43,60 +51,39 @@ UM.ManagementPage
         }
     ]
 
-    Item
+    Flow
     {
-        id: content_item
-        visible: base.currentItem != null
+        visible: base.currentItem != null && currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
         anchors.fill: parent
+        spacing: UM.Theme.getSize("default_margin").height
 
-
-        UM.Label
-        {
-            id: machineName
-            text: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
-            font: UM.Theme.getFont("large_bold")
-            width: parent.width
-            elide: Text.ElideRight
-        }
-
-        Flow
+        Repeater
         {
-            id: machineActions
-            visible: currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
-            anchors
-            {
-                left: parent.left
-                right: parent.right
-                top: machineName.bottom
-                topMargin: UM.Theme.getSize("default_margin").height
-            }
-            spacing: UM.Theme.getSize("default_margin").height
+            id: machineActionRepeater
+            model: base.currentItem ? Cura.MachineActionManager.getSupportedActions(Cura.MachineManager.getDefinitionByMachineId(base.currentItem.id)) : null
 
-            Repeater
+            Item
             {
-                id: machineActionRepeater
-                model: base.currentItem ? Cura.MachineActionManager.getSupportedActions(Cura.MachineManager.getDefinitionByMachineId(base.currentItem.id)) : null
-
-                Item
+                width: Math.round(childrenRect.width + 2 * screenScaleFactor)
+                height: childrenRect.height
+                Cura.SecondaryButton
                 {
-                    width: Math.round(childrenRect.width + 2 * screenScaleFactor)
-                    height: childrenRect.height
-                    Cura.SecondaryButton
+                    text: machineActionRepeater.model[index].label
+                    onClicked:
                     {
-                        text: machineActionRepeater.model[index].label
-                        onClicked:
-                        {
-                            var currentItem = machineActionRepeater.model[index]
-                            actionDialog.loader.manager = currentItem
-                            actionDialog.loader.source = currentItem.qmlPath
-                            actionDialog.title = currentItem.label
-                            actionDialog.show()
-                        }
+                        var currentItem = machineActionRepeater.model[index]
+                        actionDialog.loader.manager = currentItem
+                        actionDialog.loader.source = currentItem.qmlPath
+                        actionDialog.title = currentItem.label
+                        actionDialog.show()
                     }
                 }
             }
         }
+    }
 
+    Item
+    {
         UM.Dialog
         {
             id: actionDialog
@@ -139,6 +126,7 @@ UM.ManagementPage
                 objectList.onCurrentIndexChanged()
             }
         }
+
         Cura.Menu
         {
             id: menu
diff --git a/resources/qml/Preferences/Materials/MaterialsBrandSection.qml b/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
index 7c853c8a05..9f7eeccc54 100644
--- a/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
+++ b/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
@@ -1,4 +1,4 @@
-// Copyright (c) 2019 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -10,100 +10,51 @@ import Cura 1.0 as Cura
 
 // An expandable list of materials. Includes both the header (this file) and the items (brandMaterialList)
 
-Item
+Column
 {
     id: brand_section
 
-    property var sectionName: ""
+    property string sectionName: ""
     property var elementsModel   // This can be a MaterialTypesModel or GenericMaterialsModel or FavoriteMaterialsModel
-    property var hasMaterialTypes: true  // It indicates whether it has material types or not
-    property var expanded: materialList.expandedBrands.indexOf(sectionName) > -1
-
-    height: childrenRect.height
+    property bool hasMaterialTypes: true  // It indicates whether it has material types or not
+    property bool expanded: materialList.expandedBrands.indexOf(sectionName) !== -1
     width: parent.width
-    Rectangle
-    {
-        id: brand_header_background
-        color:
-        {
-            if(!expanded && sectionName == materialList.currentBrand)
-            {
-                return UM.Theme.getColor("favorites_row_selected")
-            }
-            else
-            {
-                return UM.Theme.getColor("favorites_header_bar")
-            }
-        }
-        anchors.fill: brand_header
-    }
-    Row
+
+    Cura.CategoryButton
     {
-        id: brand_header
         width: parent.width
-        UM.Label
+        labelText: sectionName
+        height: UM.Theme.getSize("preferences_page_list_item").height
+        labelFont: UM.Theme.getFont("default_bold")
+        expanded: brand_section.expanded
+        onClicked:
         {
-            id: brand_name
-            text: sectionName
-            height: UM.Theme.getSize("favorites_row").height
-            width: parent.width - UM.Theme.getSize("favorites_button").width
-            leftPadding: (UM.Theme.getSize("default_margin").width / 2) | 0
-        }
-        Item
-        {
-            implicitWidth: UM.Theme.getSize("favorites_button").width
-            implicitHeight: UM.Theme.getSize("favorites_button").height
-            UM.RecolorImage
-            {
-                anchors
-                {
-                    verticalCenter: parent.verticalCenter
-                    horizontalCenter: parent.horizontalCenter
-                }
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
-                color: "black"
-                source: brand_section.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
-            }
-        }
-    }
-    MouseArea
-    {
-        anchors.fill: brand_header
-        onPressed:
-        {
-            const i = materialList.expandedBrands.indexOf(sectionName)
-            if (i > -1)
+            const i = materialList.expandedBrands.indexOf(sectionName);
+            if (i !== -1)
             {
-                // Remove it
-                materialList.expandedBrands.splice(i, 1)
-                brand_section.expanded = false
+                materialList.expandedBrands.splice(i, 1); // remove
             }
             else
             {
-                // Add it
-                materialList.expandedBrands.push(sectionName)
-                brand_section.expanded = true
+                materialList.expandedBrands.push(sectionName); // add
             }
             UM.Preferences.setValue("cura/expanded_brands", materialList.expandedBrands.join(";"));
         }
     }
+
     Column
     {
         id: brandMaterialList
-        anchors.top: brand_header.bottom
         width: parent.width
-        anchors.left: parent ? parent.left : undefined
-        height: brand_section.expanded ? childrenRect.height : 0
         visible: brand_section.expanded
 
         Repeater
         {
             model: elementsModel
+
             delegate: Loader
             {
-                id: loader
-                width: parent ? parent.width : 0
+                width: parent.width
                 property var element: model
                 sourceComponent: hasMaterialTypes ? materialsTypeSection : materialSlot
             }
@@ -116,6 +67,7 @@ Item
         MaterialsTypeSection
         {
             materialType: element
+            indented: true
         }
     }
 
@@ -138,7 +90,7 @@ Item
                 return;
             }
 
-            expanded = materialList.expandedBrands.indexOf(sectionName) > -1
+            brand_section.expanded = materialList.expandedBrands.indexOf(sectionName) !== -1;
         }
     }
 }
diff --git a/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml b/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml
index 04c722cd40..bb9e732800 100644
--- a/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml
+++ b/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml
@@ -1,12 +1,11 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
-import QtQuick.Controls 1.4
-import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.4
 
-import UM 1.2 as UM
-import Cura 1.0 as Cura
+import UM 1.5 as UM
+import Cura 1.5 as Cura
 
 Item
 {
@@ -51,71 +50,44 @@ Item
         materialProperties.approximate_diameter = currentItem.approximate_diameter || "0"
     }
 
-    Item
+    // Material detailed information view below the title Label
+    MaterialsView
     {
+        id: materialDetailsView
         anchors.fill: parent
+        editingEnabled: currentItem != null && !currentItem.is_read_only
+        onResetSelectedMaterial: base.resetExpandedActiveMaterial()
 
-        Item    // Material title Label
-        {
-            id: profileName
-
-            width: parent.width
-            height: childrenRect.height
-
-            Label {
-                width: parent.width
-                text: materialProperties.name
-                font: UM.Theme.getFont("large_bold")
-                elide: Text.ElideRight
-            }
-        }
-
-        MaterialsView    // Material detailed information view below the title Label
-        {
-            id: materialDetailsView
-            anchors
-            {
-                left: parent.left
-                right: parent.right
-                top: profileName.bottom
-                topMargin: UM.Theme.getSize("default_margin").height
-                bottom: parent.bottom
-            }
-
-            editingEnabled: currentItem != null && !currentItem.is_read_only
-            onResetSelectedMaterial: base.resetExpandedActiveMaterial()
-
-            properties: materialProperties
-            containerId: currentItem != null ? currentItem.id : ""
-            currentMaterialNode: currentItem.container_node
-        }
-
-        QtObject
-        {
-            id: materialProperties
-
-            property string guid: "00000000-0000-0000-0000-000000000000"
-            property string container_id: "Unknown";
-            property string name: "Unknown";
-            property string profile_type: "Unknown";
-            property string brand: "Unknown";
-            property string material: "Unknown";  // This needs to be named as "material" to be consistent with
-                                                    // the material container's metadata entry
-
-            property string color_name: "Yellow";
-            property color color_code: "yellow";
-
-            property real density: 0.0;
-            property real diameter: 0.0;
-            property string approximate_diameter: "0";
-
-            property real spool_cost: 0.0;
-            property real spool_weight: 0.0;
-            property real spool_length: 0.0;
-            property real cost_per_meter: 0.0;
+        properties: materialProperties
+        containerId: currentItem != null ? currentItem.id : ""
+        currentMaterialNode: currentItem != null ? currentItem.container_node: null
+    }
 
-            property string description: "";
-            property string adhesion_info: "";
-        }
+    QtObject
+    {
+        id: materialProperties
+
+        property string guid: "00000000-0000-0000-0000-000000000000"
+        property string container_id: "Unknown";
+        property string name: "Unknown";
+        property string profile_type: "Unknown";
+        property string brand: "Unknown";
+        property string material: "Unknown";  // This needs to be named as "material" to be consistent with
+                                                // the material container's metadata entry
+
+        property string color_name: "Yellow";
+        property color color_code: "yellow";
+
+        property real density: 0.0;
+        property real diameter: 0.0;
+        property string approximate_diameter: "0";
+
+        property real spool_cost: 0.0;
+        property real spool_weight: 0.0;
+        property real spool_length: 0.0;
+        property real cost_per_meter: 0.0;
+
+        property string description: "";
+        property string adhesion_info: "";
     }
-}
\ No newline at end of file
+}
diff --git a/resources/qml/Preferences/Materials/MaterialsList.qml b/resources/qml/Preferences/Materials/MaterialsList.qml
index 6cbb42ad15..bb40187825 100644
--- a/resources/qml/Preferences/Materials/MaterialsList.qml
+++ b/resources/qml/Preferences/Materials/MaterialsList.qml
@@ -1,4 +1,4 @@
-// Copyright (c) 2019 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -14,7 +14,6 @@ Item
     height: childrenRect.height
 
     // Children
-    UM.I18nCatalog { id: catalog; name: "cura"; }
     Cura.MaterialBrandsModel
     {
         id: materialsModel
diff --git a/resources/qml/Preferences/Materials/MaterialsPage.qml b/resources/qml/Preferences/Materials/MaterialsPage.qml
index c9e6cf07a1..9c90ecef0d 100644
--- a/resources/qml/Preferences/Materials/MaterialsPage.qml
+++ b/resources/qml/Preferences/Materials/MaterialsPage.qml
@@ -3,13 +3,12 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.3
 import QtQuick.Dialogs 1.2
 
 import UM 1.5 as UM
 import Cura 1.5 as Cura
 
-Item
+UM.ManagementPage
 {
     id: base
 
@@ -36,12 +35,6 @@ Item
     property var extruder_position: Cura.ExtruderManager.activeExtruderIndex
     property var active_root_material_id: Cura.MachineManager.currentRootMaterialId[extruder_position]
 
-    UM.I18nCatalog
-    {
-        id: catalog
-        name: "cura"
-    }
-
     function resetExpandedActiveMaterial()
     {
         materialListView.expandActiveMaterial(active_root_material_id)
@@ -74,57 +67,15 @@ Item
         }
     }
 
-    // Main layout
-    Label
-    {
-        id: titleLabel
-        anchors
-        {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            margins: 5 * screenScaleFactor
-        }
-        font.pointSize: 18
-        text: catalog.i18nc("@title:tab", "Materials")
-    }
-
-    // Button Row
-    Row
-    {
-        id: buttonRow
-        anchors
-        {
-            left: parent.left
-            right: parent.right
-            top: titleLabel.bottom
-        }
-        height: childrenRect.height
-
-        // Activate button
-        Button
-        {
-            id: activateMenuButton
-            text: catalog.i18nc("@action:button", "Activate")
-            icon.name: "list-activate"
-            enabled: !isCurrentItemActivated && Cura.MachineManager.activeMachine.hasMaterials
-            onClicked:
-            {
-                forceActiveFocus()
-
-                // Set the current material as the one to be activated (needed to force the UI update)
-                base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
-                const extruder_position = Cura.ExtruderManager.activeExtruderIndex
-                Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
-            }
-        }
+    title: catalog.i18nc("@title:tab", "Materials")
+    detailsPlaneCaption: currentItem ? currentItem.name: ""
+    scrollviewCaption: catalog.i18nc("@label", "Materials compatible with active printer:") + `<br /><b>${Cura.MachineManager.activeMachine.name}</b>`
 
-        // Create button
-        Button
+    buttons: [
+        Cura.SecondaryButton
         {
             id: createMenuButton
-            text: catalog.i18nc("@action:button", "Create")
-            icon.name: "list-add"
+            text: catalog.i18nc("@action:button", "Create new")
             enabled: Cura.MachineManager.activeMachine.hasMaterials
             onClicked:
             {
@@ -132,72 +83,22 @@ Item
                 base.newRootMaterialIdToSwitchTo = base.materialManagementModel.createMaterial();
                 base.toActivateNewMaterial = true;
             }
-        }
-
-        // Duplicate button
-        Button
-        {
-            id: duplicateMenuButton
-            text: catalog.i18nc("@action:button", "Duplicate");
-            icon.name: "list-add"
-            enabled: base.hasCurrentItem
-            onClicked:
-            {
-                forceActiveFocus();
-                base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
-                base.toActivateNewMaterial = true;
-            }
-        }
-
-        // Remove button
-        Button
-        {
-            id: removeMenuButton
-            text: catalog.i18nc("@action:button", "Remove")
-            icon.name: "list-remove"
-            enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
-
-            onClicked:
-            {
-                forceActiveFocus();
-                confirmRemoveMaterialDialog.open();
-            }
-        }
-
-        // Import button
-        Button
+        },
+        Cura.SecondaryButton
         {
             id: importMenuButton
             text: catalog.i18nc("@action:button", "Import")
-            icon.name: "document-import"
             onClicked:
             {
                 forceActiveFocus();
                 importMaterialDialog.open();
             }
             enabled: Cura.MachineManager.activeMachine.hasMaterials
-        }
-
-        // Export button
-        Button
-        {
-            id: exportMenuButton
-            text: catalog.i18nc("@action:button", "Export")
-            icon.name: "document-export"
-            onClicked:
-            {
-                forceActiveFocus();
-                exportMaterialDialog.open();
-            }
-            enabled: base.hasCurrentItem
-        }
-
-        //Sync button.
-        Button
+        },
+        Cura.SecondaryButton
         {
             id: syncMaterialsButton
-            text: catalog.i18nc("@action:button Sending materials to printers", "Sync with Printers")
-            icon.name: "sync-synchronizing"
+            text: catalog.i18nc("@action:button", "Sync with Printers")
             onClicked:
             {
                 forceActiveFocus();
@@ -205,181 +106,177 @@ Item
             }
             visible: Cura.MachineManager.activeMachine.supportsMaterialExport
         }
+    ]
+
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
     }
-
-    Item
+    listContent: ScrollView
     {
-        id: contentsItem
-        anchors
+        id: materialScrollView
+        anchors.fill: parent
+        anchors.margins: parent.border.width
+        width: (parent.width * 0.4) | 0
+
+        clip: true
+        ScrollBar.vertical: UM.ScrollBar
         {
-            top: titleLabel.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            margins: 5 * screenScaleFactor
-            bottomMargin: 0
+            id: materialScrollBar
+            parent: materialScrollView
+            anchors
+            {
+                top: parent.top
+                right: parent.right
+                bottom: parent.bottom
+            }
         }
-        clip: true
-    }
+        contentHeight: materialListView.height //For some reason, this is not determined automatically with this ScrollView. Very weird!
 
-    Item
-    {
-        anchors
+        MaterialsList
         {
-            top: buttonRow.bottom
-            topMargin: UM.Theme.getSize("default_margin").height
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
+            id: materialListView
+            width: materialScrollView.width - materialScrollBar.width
         }
+    }
 
-        SystemPalette { id: palette }
+    MaterialsDetailsPanel
+    {
+        id: materialDetailsPanel
+        anchors.fill: parent
+    }
 
-        Label
+    Item
+    {
+        Cura.Menu
         {
-            id: captionLabel
-            anchors
+            id: menu
+            Cura.MenuItem
             {
-                top: parent.top
-                left: parent.left
+                id: activateMenuButton
+                text: catalog.i18nc("@action:button", "Activate")
+                onClicked:
+                {
+                    forceActiveFocus()
+
+                    // Set the current material as the one to be activated (needed to force the UI update)
+                    base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
+                    const extruder_position = Cura.ExtruderManager.activeExtruderIndex
+                    Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
+                }
             }
-            visible: text != ""
-            text:
+            Cura.MenuItem
             {
-                var caption = catalog.i18nc("@action:label", "Printer") + ": " + Cura.MachineManager.activeMachine.name;
-                if (Cura.MachineManager.activeMachine.hasVariants)
+                id: duplicateMenuButton
+                text: catalog.i18nc("@action:button", "Duplicate");
+                enabled: base.hasCurrentItem
+                onClicked:
                 {
-                    var activeVariantName = ""
-                    if(Cura.MachineManager.activeStack != null)
-                    {
-                        activeVariantName = Cura.MachineManager.activeStack.variant.name
-                    }
-                    caption += ", " + Cura.MachineManager.activeDefinitionVariantsName + ": " + activeVariantName;
+                    forceActiveFocus();
+                    base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
+                    base.toActivateNewMaterial = true;
                 }
-                return caption;
             }
-            width: materialScrollView.width
-            elide: Text.ElideRight
-        }
-
-        ScrollView
-        {
-            id: materialScrollView
-            anchors
+            Cura.MenuItem
             {
-                top: captionLabel.visible ? captionLabel.bottom : parent.top
-                topMargin: captionLabel.visible ? UM.Theme.getSize("default_margin").height : 0
-                bottom: parent.bottom
-                left: parent.left
-            }
-            width: (parent.width * 0.4) | 0
+                id: removeMenuButton
+                text: catalog.i18nc("@action:button", "Remove")
+                enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
 
-            clip: true
-            ScrollBar.vertical: UM.ScrollBar
-            {
-                id: materialScrollBar
-                parent: materialScrollView
-                anchors
+                onClicked:
                 {
-                    top: parent.top
-                    right: parent.right
-                    bottom: parent.bottom
+                    forceActiveFocus();
+                    confirmRemoveMaterialDialog.open();
                 }
             }
-            contentHeight: materialListView.height //For some reason, this is not determined automatically with this ScrollView. Very weird!
-
-            MaterialsList
+            Cura.MenuItem
             {
-                id: materialListView
-                width: materialScrollView.width - materialScrollBar.width
+                id: exportMenuButton
+                text: catalog.i18nc("@action:button", "Export")
+                onClicked:
+                {
+                    forceActiveFocus();
+                    exportMaterialDialog.open();
+                }
+                enabled: base.hasCurrentItem
             }
         }
 
-        MaterialsDetailsPanel
+        // Dialogs
+        Cura.MessageDialog
         {
-            id: materialDetailsPanel
-            anchors
+            id: confirmRemoveMaterialDialog
+            title: catalog.i18nc("@title:window", "Confirm Remove")
+            property string materialName: base.currentItem !== null ? base.currentItem.name : ""
+
+            text: catalog.i18nc("@label (%1 is object name)", "Are you sure you wish to remove %1? This cannot be undone!").arg(materialName)
+            standardButtons: Dialog.Yes | Dialog.No
+            onAccepted:
             {
-                left: materialScrollView.right
-                leftMargin: UM.Theme.getSize("default_margin").width
-                top: parent.top
-                bottom: parent.bottom
-                right: parent.right
+                // Set the active material as the fallback. It will be selected when the current material is deleted
+                base.newRootMaterialIdToSwitchTo = base.active_root_material_id
+                base.materialManagementModel.removeMaterial(base.currentItem.container_node);
             }
         }
-    }
-
-    // Dialogs
-    Cura.MessageDialog
-    {
-        id: confirmRemoveMaterialDialog
-        title: catalog.i18nc("@title:window", "Confirm Remove")
-        property string materialName: base.currentItem !== null ? base.currentItem.name : ""
-
-        text: catalog.i18nc("@label (%1 is object name)", "Are you sure you wish to remove %1? This cannot be undone!").arg(materialName)
-        standardButtons: Dialog.Yes | Dialog.No
-        onAccepted:
-        {
-            // Set the active material as the fallback. It will be selected when the current material is deleted
-            base.newRootMaterialIdToSwitchTo = base.active_root_material_id
-            base.materialManagementModel.removeMaterial(base.currentItem.container_node);
-        }
-    }
 
-    FileDialog
-    {
-        id: importMaterialDialog
-        title: catalog.i18nc("@title:window", "Import Material")
-        selectExisting: true
-        nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
-        folder: CuraApplication.getDefaultPath("dialog_material_path")
-        onAccepted:
+        FileDialog
         {
-            const result = Cura.ContainerManager.importMaterialContainer(fileUrl);
-
-            const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
-            messageDialog.standardButtons = Dialog.Ok;
-            messageDialog.title = catalog.i18nc("@title:window", "Import Material");
-            switch (result.status)
+            id: importMaterialDialog
+            title: catalog.i18nc("@title:window", "Import Material")
+            selectExisting: true
+            nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
+            folder: CuraApplication.getDefaultPath("dialog_material_path")
+            onAccepted:
             {
-                case "success":
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully imported material <filename>%1</filename>").arg(fileUrl);
-                    break;
-                default:
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> or <message>!", "Could not import material <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
-                    break;
+                const result = Cura.ContainerManager.importMaterialContainer(fileUrl);
+
+                const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
+                messageDialog.standardButtons = Dialog.Ok;
+                messageDialog.title = catalog.i18nc("@title:window", "Import Material");
+                switch (result.status)
+                {
+                    case "success":
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully imported material <filename>%1</filename>").arg(fileUrl);
+                        break;
+                    default:
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> or <message>!", "Could not import material <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
+                        break;
+                }
+                messageDialog.open();
+                CuraApplication.setDefaultPath("dialog_material_path", folder);
             }
-            messageDialog.open();
-            CuraApplication.setDefaultPath("dialog_material_path", folder);
         }
-    }
 
-    FileDialog
-    {
-        id: exportMaterialDialog
-        title: catalog.i18nc("@title:window", "Export Material")
-        selectExisting: false
-        nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
-        folder: CuraApplication.getDefaultPath("dialog_material_path")
-        onAccepted:
+        FileDialog
         {
-            const result = Cura.ContainerManager.exportContainer(base.currentItem.root_material_id, selectedNameFilter, fileUrl);
-
-            const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
-            messageDialog.title = catalog.i18nc("@title:window", "Export Material");
-            messageDialog.standardButtons = Dialog.Ok;
-            switch (result.status)
+            id: exportMaterialDialog
+            title: catalog.i18nc("@title:window", "Export Material")
+            selectExisting: false
+            nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
+            folder: CuraApplication.getDefaultPath("dialog_material_path")
+            onAccepted:
             {
-                case "error":
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> and <message>!", "Failed to export material to <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
-                    break;
-                case "success":
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully exported material to <filename>%1</filename>").arg(result.path);
-                    break;
-            }
-            messageDialog.open();
+                const result = Cura.ContainerManager.exportContainer(base.currentItem.root_material_id, selectedNameFilter, fileUrl);
+
+                const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
+                messageDialog.title = catalog.i18nc("@title:window", "Export Material");
+                messageDialog.standardButtons = Dialog.Ok;
+                switch (result.status)
+                {
+                    case "error":
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> and <message>!", "Failed to export material to <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
+                        break;
+                    case "success":
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully exported material to <filename>%1</filename>").arg(result.path);
+                        break;
+                }
+                messageDialog.open();
 
-            CuraApplication.setDefaultPath("dialog_material_path", folder);
+                CuraApplication.setDefaultPath("dialog_material_path", folder);
+            }
         }
     }
 }
diff --git a/resources/qml/Preferences/Materials/MaterialsSlot.qml b/resources/qml/Preferences/Materials/MaterialsSlot.qml
index cd8c05fbf9..1c68d074c2 100644
--- a/resources/qml/Preferences/Materials/MaterialsSlot.qml
+++ b/resources/qml/Preferences/Materials/MaterialsSlot.qml
@@ -5,119 +5,132 @@ import QtQuick 2.7
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.3
 
-import UM 1.2 as UM
-import Cura 1.0 as Cura
+import UM 1.5 as UM
+import Cura 1.5 as Cura
 
 // A single material row, typically used in a MaterialsBrandSection
 
 Rectangle
 {
     id: materialSlot
+
     property var material: null
-    property var hovered: false
-    property var is_favorite: material != null && material.is_favorite
+    property bool hovered: false
 
-    height: UM.Theme.getSize("favorites_row").height
+    height: UM.Theme.getSize("preferences_page_list_item").height
     width: parent.width
-    //color: material != null ? (base.currentItem.root_material_id == material.root_material_id ? UM.Theme.getColor("favorites_row_selected") : "transparent") : "transparent"
-    color:
-    {
-        if(material !== null && base.currentItem !== null)
+    color: UM.Theme.getColor("main_background")
+
+    states:
+    [
+        State
         {
-            if(base.currentItem.root_material_id === material.root_material_id)
-            {
-                return UM.Theme.getColor("favorites_row_selected")
-            }
+            name: "selected"
+            when: material !== null && base.currentItem !== null && base.currentItem.root_material_id === material.root_material_id
+            PropertyChanges { target: materialSlot; color: UM.Theme.getColor("background_3") }
+        },
+        State
+        {
+            name: "hovered"
+            when: hovered
+            PropertyChanges { target: materialSlot; color: UM.Theme.getColor("background_3") }
         }
-        return "transparent"
-    }
+    ]
+
     Rectangle
     {
         id: swatch
         color: material != null ? material.color_code : "transparent"
-        border.width: UM.Theme.getSize("default_lining").width
-        border.color: "black"
-        width: UM.Theme.getSize("favorites_button_icon").width
-        height: UM.Theme.getSize("favorites_button_icon").height
+        width: UM.Theme.getSize("icon_indicator").width
+        height: UM.Theme.getSize("icon_indicator").height
+        radius: width / 2
         anchors.verticalCenter: materialSlot.verticalCenter
         anchors.left: materialSlot.left
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.leftMargin: 2 * UM.Theme.getSize("default_margin").width
     }
-    Label
+    UM.Label
     {
-        text: material != null ? material.brand + " " + material.name : ""
+        id: materialLabel
+        text: material != null ? `${material.brand} ${material.name}` : ""
+        elide: Text.ElideRight
+        wrapMode: Text.NoWrap
         verticalAlignment: Text.AlignVCenter
-        height: parent.height
         anchors.left: swatch.right
+        anchors.right: favoriteButton.left
+        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
         anchors.verticalCenter: materialSlot.verticalCenter
-        anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
-        font.italic: material != null && Cura.MachineManager.currentRootMaterialId[Cura.ExtruderManager.activeExtruderIndex] == material.root_material_id
     }
-    MouseArea
+
+    UM.TooltipArea
     {
         anchors.fill: parent
+        text: material != null ? `${material.brand} ${material.name}` : ""
+        acceptedButtons: Qt.LeftButton
         onClicked:
         {
-            materialList.currentBrand = material.brand
-            materialList.currentType = material.brand + "_" + material.material
-            base.setExpandedActiveMaterial(material.root_material_id)
+            materialList.currentBrand = material.brand;
+            materialList.currentType = `${material.brand}_${material.material}`;
+            base.setExpandedActiveMaterial(material.root_material_id);
         }
         hoverEnabled: true
         onEntered: { materialSlot.hovered = true }
         onExited: { materialSlot.hovered = false }
     }
-    Button
+
+    Item
     {
-        id: favorite_button
-        text: ""
-        implicitWidth: UM.Theme.getSize("favorites_button").width
-        implicitHeight: UM.Theme.getSize("favorites_button").height
-        visible: materialSlot.hovered || materialSlot.is_favorite || favorite_button.hovered
-        anchors
-        {
-            right: materialSlot.right
-            verticalCenter: materialSlot.verticalCenter
-        }
-        onClicked:
-        {
-            if (materialSlot.is_favorite)
+        id: favoriteButton
+
+        states:
+        [
+            State
             {
-                CuraApplication.getMaterialManagementModel().removeFavorite(material.root_material_id)
-            }
-            else
+                name: "favorite"
+                when: material !== null && material.is_favorite
+                PropertyChanges { target: favoriteIndicator; source: UM.Theme.getIcon("StarFilled");}
+                PropertyChanges { target: favoriteButton; visible: true }
+            },
+            State
             {
-                CuraApplication.getMaterialManagementModel().addFavorite(material.root_material_id)
+                name: "hovered"
+                when: hovered
+                PropertyChanges { target: favoriteButton; visible: true }
             }
-        }
+        ]
+
+        implicitHeight: parent.height
+        implicitWidth: height
+        anchors.right: materialSlot.right
+        visible: false
 
         UM.RecolorImage
         {
-            anchors
-            {
-                verticalCenter: favorite_button.verticalCenter
-                horizontalCenter: favorite_button.horizontalCenter
-            }
-            width: UM.Theme.getSize("favorites_button_icon").width
-            height: UM.Theme.getSize("favorites_button_icon").height
-            color:
+            id: favoriteIndicator
+            anchors.centerIn: parent
+            width: UM.Theme.getSize("small_button_icon").width
+            height: UM.Theme.getSize("small_button_icon").height
+            color: UM.Theme.getColor("primary")
+            source: UM.Theme.getIcon("Star")
+        }
+
+        MouseArea
+        {
+            anchors.fill: parent
+            onClicked:
             {
-                if (favorite_button.hovered)
-                {
-                    return UM.Theme.getColor("primary_hover")
-                }
-                else
+                if (material !== null)
                 {
-                    if (materialSlot.is_favorite)
+                    if (material.is_favorite)
                     {
-                        return UM.Theme.getColor("primary")
+                        CuraApplication.getMaterialManagementModel().removeFavorite(material.root_material_id)
                     }
                     else
                     {
-                        UM.Theme.getColor("text_inactive")
+                        CuraApplication.getMaterialManagementModel().addFavorite(material.root_material_id)
                     }
                 }
             }
-            source: materialSlot.is_favorite ? UM.Theme.getIcon("StarFilled") : UM.Theme.getIcon("Star")
         }
     }
 }
diff --git a/resources/qml/Preferences/Materials/MaterialsTypeSection.qml b/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
index 0a5d0e89e7..d781218027 100644
--- a/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
+++ b/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
@@ -1,4 +1,4 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -8,106 +8,46 @@ import QtQuick.Layouts 1.3
 import UM 1.5 as UM
 import Cura 1.0 as Cura
 
-Item
+Column
 {
     id: material_type_section
-    property var materialType
+    property var materialType: null
+    property string materialBrand: materialType !== null ? materialType.brand : ""
+    property string materialName: materialType !== null ? materialType.name : ""
+    property bool expanded: materialList.expandedTypes.indexOf(`${materialBrand}_${materialName}`) !== -1
+    property var colorsModel: materialType !== null ? materialType.colors : null
+    property alias indented: categoryButton.indented
+    width: parent.width
 
-    property string materialBrand: materialType != null ? materialType.brand : ""
-    property string materialName: materialType != null ? materialType.name : ""
-    property var expanded: materialList.expandedTypes.indexOf(materialBrand + "_" + materialName) > -1
-    property var colorsModel: materialType != null ? materialType.colors: null
-    height: childrenRect.height
-    width: parent ? parent.width :undefined
-    anchors.left: parent ? parent.left : undefined
-    Rectangle
+    Cura.CategoryButton
     {
-        id: material_type_header_background
-        color:
-        {
-            if(!expanded && materialBrand + "_" + materialName == materialList.currentType)
-            {
-                return UM.Theme.getColor("favorites_row_selected")
-            }
-            else
-            {
-                return "transparent"
-            }
-        }
-        width: parent.width
-        height: material_type_header.height
-    }
-    Rectangle
-    {
-        id: material_type_header_border
-        color: UM.Theme.getColor("favorites_header_bar")
-        anchors.bottom: material_type_header.bottom
-        anchors.left: material_type_header.left
-        height: UM.Theme.getSize("default_lining").height
-        width: material_type_header.width
-    }
-    Row
-    {
-        id: material_type_header
+        id: categoryButton
         width: parent.width
-        leftPadding: UM.Theme.getSize("default_margin").width
-        anchors
+        height: UM.Theme.getSize("preferences_page_list_item").height
+        labelText: materialName
+        labelFont: UM.Theme.getFont("default")
+        expanded: material_type_section.expanded
+        onClicked:
         {
-            left: parent ? parent.left : undefined
-        }
-        UM.Label
-        {
-            text: materialName
-            height: UM.Theme.getSize("favorites_row").height
-            width: parent.width - parent.leftPadding - UM.Theme.getSize("favorites_button").width
-            id: material_type_name
-        }
-        Item // this one causes lots of warnings
-        {
-            implicitWidth: UM.Theme.getSize("favorites_button").width
-            implicitHeight: UM.Theme.getSize("favorites_button").height
-            UM.RecolorImage {
-                anchors
-                {
-                    verticalCenter: parent ? parent.verticalCenter : undefined
-                    horizontalCenter: parent ? parent.horizontalCenter : undefined
-                }
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
-                color: "black"
-                source: material_type_section.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
-            }
-
-        }
-    }
-    MouseArea // causes lots of warnings
-    {
-        anchors.fill: material_type_header
-        onPressed:
-        {
-            const identifier = materialBrand + "_" + materialName;
-            const i = materialList.expandedTypes.indexOf(identifier)
-            if (i > -1)
+            const identifier = `${materialBrand}_${materialName}`;
+            const i = materialList.expandedTypes.indexOf(identifier);
+            if (i !== -1)
             {
-                // Remove it
-                materialList.expandedTypes.splice(i, 1)
-                material_type_section.expanded = false
+                materialList.expandedTypes.splice(i, 1); // remove
             }
             else
             {
-                // Add it
-                materialList.expandedTypes.push(identifier)
-                material_type_section.expanded = true
+                materialList.expandedTypes.push(identifier); // add
             }
             UM.Preferences.setValue("cura/expanded_types", materialList.expandedTypes.join(";"));
         }
     }
+
     Column
     {
-        height: material_type_section.expanded ? childrenRect.height : 0
         visible: material_type_section.expanded
         width: parent.width
-        anchors.top: material_type_header.bottom
+
         Repeater
         {
             model: colorsModel
@@ -128,7 +68,7 @@ Item
                 return;
             }
 
-            expanded = materialList.expandedTypes.indexOf(materialBrand + "_" + materialName) > -1
+            material_type_section.expanded = materialList.expandedTypes.indexOf(`${materialBrand}_${materialName}`) !== -1;
         }
     }
 }
diff --git a/resources/qml/Preferences/Materials/MaterialsView.qml b/resources/qml/Preferences/Materials/MaterialsView.qml
index 915d36ff57..23cba249ad 100644
--- a/resources/qml/Preferences/Materials/MaterialsView.qml
+++ b/resources/qml/Preferences/Materials/MaterialsView.qml
@@ -4,12 +4,11 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.15
 import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.3
 
 import UM 1.5 as UM
 import Cura 1.0 as Cura
 
-import ".." // Access to ReadOnlyTextArea.qml
-
 Item
 {
     id: base
@@ -19,8 +18,6 @@ Item
 
     property bool editingEnabled: false
     property string currency: UM.Preferences.getValue("cura/currency") ? UM.Preferences.getValue("cura/currency") : "€"
-    property real firstColumnWidth: (width * 0.50) | 0
-    property real secondColumnWidth: (width * 0.40) | 0
     property string containerId: ""
     property var materialPreferenceValues: UM.Preferences.getValue("cura/material_settings") ? JSON.parse(UM.Preferences.getValue("cura/material_settings")) : {}
     property var materialManagementModel: CuraApplication.getMaterialManagementModel()
@@ -67,421 +64,594 @@ Item
         }
     }
 
-    UM.TabRow
+    Rectangle
     {
-        id: pageSelectorTabRow
-        UM.TabRowButton
-        {
-            text: catalog.i18nc("@title", "Information")
-            property string activeView: "information" //To determine which page gets displayed.
-        }
-        UM.TabRowButton
-        {
-            text: catalog.i18nc("@label", "Print settings")
-            property string activeView: "settings"
-        }
-    }
+        color: UM.Theme.getColor("main_background")
 
-    ScrollView
-    {
-        id: informationPage
         anchors
         {
             top: pageSelectorTabRow.bottom
+            topMargin: -UM.Theme.getSize("default_lining").width
             left: parent.left
             right: parent.right
             bottom: parent.bottom
         }
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("border_main")
 
-        ScrollBar.vertical: UM.ScrollBar
+        ScrollView
         {
-            parent: informationPage
+            id: informationPage
             anchors
             {
-                top: parent.top
-                right: parent.right
-                bottom: parent.bottom
+                fill: parent
+                topMargin: UM.Theme.getSize("thin_margin").height
+                bottomMargin: UM.Theme.getSize("thin_margin").height
+                leftMargin: UM.Theme.getSize("thin_margin").width
+                rightMargin: UM.Theme.getSize("thin_margin").width
             }
-        }
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        clip: true
-        visible: pageSelectorTabRow.currentItem.activeView === "information"
 
-        property real columnWidth: (width * 0.5 - UM.Theme.getSize("default_margin").width) | 0
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                id: scrollBar
+                parent: informationPage
+                anchors
+                {
+                    top: parent.top
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+            }
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            clip: true
+            visible: pageSelectorTabRow.currentItem.activeView === "information"
 
-        Flow
-        {
-            id: containerGrid
+            property real columnWidth: Math.floor((width - scrollBar.width - UM.Theme.getSize("narrow_margin").width) / 2)
+            property real rowHeight: UM.Theme.getSize("setting_control").height
+
+            Column
+            {
+                width: informationPage.width
+                spacing: UM.Theme.getSize("narrow_margin").height
 
-            x: UM.Theme.getSize("default_margin").width
-            y: UM.Theme.getSize("default_lining").height
+                Cura.MessageDialog
+                {
+                    id: confirmDiameterChangeDialog
 
-            width: base.width
-            property real rowHeight: brandTextField.height + UM.Theme.getSize("default_lining").height
+                    title: catalog.i18nc("@title:window", "Confirm Diameter Change")
+                    text: catalog.i18nc("@label (%1 is a number)", "The new filament diameter is set to %1 mm, which is not compatible with the current extruder. Do you wish to continue?".arg(new_diameter_value))
+                    standardButtons: Dialog.Yes | Dialog.No
 
-            Cura.MessageDialog
-            {
-                id: confirmDiameterChangeDialog
+                    property var new_diameter_value: null
+                    property var old_diameter_value: null
+                    property var old_approximate_diameter_value: null
 
-                title: catalog.i18nc("@title:window", "Confirm Diameter Change")
-                text: catalog.i18nc("@label (%1 is a number)", "The new filament diameter is set to %1 mm, which is not compatible with the current extruder. Do you wish to continue?".arg(new_diameter_value))
-                standardButtons: Dialog.Yes | Dialog.No
+                    onAccepted:
+                    {
+                        base.setMetaDataEntry("approximate_diameter", old_approximate_diameter_value, getApproximateDiameter(new_diameter_value).toString());
+                        base.setMetaDataEntry("properties/diameter", properties.diameter, new_diameter_value);
+                        // CURA-6868 Make sure to update the extruder to user a diameter-compatible material.
+                        Cura.MachineManager.updateMaterialWithVariant()
+                        base.resetSelectedMaterial()
+                    }
 
-                property var new_diameter_value: null
-                property var old_diameter_value: null
-                property var old_approximate_diameter_value: null
+                    onRejected:
+                    {
+                        base.properties.diameter = old_diameter_value;
+                        diameterTextField.valueText = Qt.binding(function() { return base.properties.diameter })
+                    }
+                }
 
-                onAccepted:
+                Row
                 {
-                    base.setMetaDataEntry("approximate_diameter", old_approximate_diameter_value, getApproximateDiameter(new_diameter_value).toString());
-                    base.setMetaDataEntry("properties/diameter", properties.diameter, new_diameter_value);
-                    // CURA-6868 Make sure to update the extruder to user a diameter-compatible material.
-                    Cura.MachineManager.updateMaterialWithVariant()
-                    base.resetSelectedMaterial()
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Display Name")
+                    }
+                    Cura.TextField
+                    {
+                        id: displayNameTextField
+                        width: informationPage.columnWidth
+                        text: properties.name
+                        enabled: base.editingEnabled
+                        onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
+                    }
                 }
 
-                onRejected:
+                Row
                 {
-                    base.properties.diameter = old_diameter_value;
-                    diameterSpinBox.value = Qt.binding(function() { return base.properties.diameter })
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Brand")
+                    }
+                    Cura.TextField
+                    {
+                        id: brandTextField
+                        width: informationPage.columnWidth
+                        text: properties.brand
+                        enabled: base.editingEnabled
+                        onEditingFinished: base.updateMaterialBrand(properties.brand, text)
+                    }
                 }
-            }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Display Name") }
-            Cura.TextField
-            {
-                id: displayNameTextField;
-                width: informationPage.columnWidth;
-                text: properties.name;
-                enabled: base.editingEnabled;
-                onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Brand") }
-            Cura.TextField
-            {
-                id: brandTextField
-                width: informationPage.columnWidth
-                text: properties.brand
-                enabled: base.editingEnabled
-                onEditingFinished: base.updateMaterialBrand(properties.brand, text)
-            }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Material Type")
+                    }
+                    Cura.TextField
+                    {
+                        id: materialTypeField
+                        width: informationPage.columnWidth
+                        text: properties.material
+                        enabled: base.editingEnabled
+                        onEditingFinished: base.updateMaterialType(properties.material, text)
+                    }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Material Type") }
-            Cura.TextField
-            {
-                id: materialTypeField
-                width: informationPage.columnWidth
-                text: properties.material
-                enabled: base.editingEnabled
-                onEditingFinished: base.updateMaterialType(properties.material, text)
-            }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color")
+                    }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color") }
-            Row
-            {
-                width: informationPage.columnWidth
-                height:  parent.rowHeight
-                spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
+                    Row
+                    {
+                        width: informationPage.columnWidth
+                        spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
+
+                        // color indicator square
+                        Item
+                        {
+                            id: colorSelector
+
+                            anchors.verticalCenter: parent.verticalCenter
+
+                            width: colorSelectorBackground.width + 2 * UM.Theme.getSize("narrow_margin").width
+                            height: colorSelectorBackground.height + 2 * UM.Theme.getSize("narrow_margin").height
+
+                            Rectangle
+                            {
+                                id: colorSelectorBackground
+                                color: properties.color_code
+                                width: UM.Theme.getSize("icon_indicator").width
+                                height: UM.Theme.getSize("icon_indicator").height
+                                radius: width / 2
+                                anchors.centerIn: parent
+                            }
+
+                            // open the color selection dialog on click
+                            MouseArea
+                            {
+                                anchors.fill: parent
+                                onClicked: colorDialog.open()
+                                enabled: base.editingEnabled
+                            }
+                        }
+
+                        // pretty color name text field
+                        Cura.TextField
+                        {
+                            id: colorLabel;
+                            width: parent.width - colorSelector.width - parent.spacing
+                            text: properties.color_name;
+                            enabled: base.editingEnabled
+                            onEditingFinished: base.setMetaDataEntry("color_name", properties.color_name, text)
+                        }
+
+                        // popup dialog to select a new color
+                        // if successful it sets the properties.color_code value to the new color
+                        Cura.ColorDialog
+                        {
+                            id: colorDialog
+                            title: catalog.i18nc("@title", "Material color picker")
+                            color: properties.color_code
+                            onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color)
+                        }
+                    }
+                }
 
-                // color indicator square
-                Rectangle
+                UM.Label
                 {
-                    id: colorSelector
-                    color: properties.color_code
-
-                    width: Math.round(colorLabel.height * 0.75)
-                    height: Math.round(colorLabel.height * 0.75)
-                    border.width: UM.Theme.getSize("default_lining").height
+                    width: parent.width
+                    height: parent.rowHeight
+                    font: UM.Theme.getFont("default_bold")
+                    verticalAlignment: Qt.AlignVCenter
+                    text: catalog.i18nc("@label", "Properties")
+                }
 
-                    anchors.verticalCenter: parent.verticalCenter
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Density")
+                    }
 
-                    // open the color selection dialog on click
-                    MouseArea
+                    Cura.NumericTextFieldWithUnit
                     {
-                        anchors.fill: parent
-                        onClicked: colorDialog.open()
+                        id: densityTextField
                         enabled: base.editingEnabled
+                        valueText: properties.density
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: "g/cm³"
+                        decimals: 2
+                        maximum: 1000
+
+                        editingFinishedFunction: function()
+                        {
+                            var modified_text = valueText.replace(",", ".");
+                            base.setMetaDataEntry("properties/density", properties.density, modified_text)
+                        }
+
+                        onValueTextChanged: updateCostPerMeter()
                     }
                 }
 
-                // pretty color name text field
-                Cura.TextField
+                Row
                 {
-                    id: colorLabel;
-                    width: parent.width - colorSelector.width - parent.spacing
-                    text: properties.color_name;
-                    enabled: base.editingEnabled
-                    onEditingFinished: base.setMetaDataEntry("color_name", properties.color_name, text)
-                }
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Diameter")
+                    }
 
-                // popup dialog to select a new color
-                // if successful it sets the properties.color_code value to the new color
-                Cura.ColorDialog
-                {
-                    id: colorDialog
-                    title: catalog.i18nc("@title", "Material color picker")
-                    color: properties.color_code
-                    onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color)
+                    Cura.NumericTextFieldWithUnit
+                    {
+                        id: diameterTextField
+                        enabled: base.editingEnabled
+                        valueText: properties.diameter
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: "mm"
+                        decimals: 2
+                        maximum: 1000
+
+                        editingFinishedFunction: function()
+                        {
+                            // This does not use a SettingPropertyProvider, because we need to make the change to all containers
+                            // which derive from the same base_file
+                            var old_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "properties/diameter");
+                            var old_approximate_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "approximate_diameter");
+                            var modified_value = valueText.replace(",", ".");
+                            var new_approximate_diameter = getApproximateDiameter(modified_value);
+
+                            if (new_approximate_diameter != Cura.ExtruderManager.getActiveExtruderStack().approximateMaterialDiameter)
+                            {
+                                confirmDiameterChangeDialog.old_diameter_value = old_diameter;
+                                confirmDiameterChangeDialog.new_diameter_value = modified_value;
+                                confirmDiameterChangeDialog.old_approximate_diameter_value = old_approximate_diameter;
+
+                                confirmDiameterChangeDialog.open()
+                            }
+                            else {
+                                base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, new_approximate_diameter);
+                                base.setMetaDataEntry("properties/diameter", properties.diameter, modified_value);
+                            }
+                        }
+
+                        onValueTextChanged: updateCostPerMeter()
+                    }
                 }
-            }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament Cost")
+                    }
 
-            Label { width: parent.width; height: parent.rowHeight; font.bold: true; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Properties") }
+                    Cura.NumericTextFieldWithUnit
+                    {
+                        id: spoolCostTextField
+                        valueText: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: base.currency
+                        decimals: 2
+                        maximum: 100000000
+
+                        editingFinishedFunction: function()
+                        {
+                            var modified_text = valueText.replace(",", ".");
+                            base.setMaterialPreferenceValue(properties.guid, "spool_cost", modified_text);
+                        }
+
+                        onValueTextChanged: updateCostPerMeter()
+                    }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Density") }
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament weight")
+                    }
 
-            Cura.SpinBox
-            {
-                enabled: base.editingEnabled
-                id: densitySpinBox
-                width: informationPage.columnWidth
-                value: properties.density
-                decimals: 2
-                suffix: " g/cm³"
-                stepSize: 0.01
-
-                onEditingFinished: base.setMetaDataEntry("properties/density", properties.density, value)
-                onValueChanged: updateCostPerMeter()
-            }
+                    Cura.NumericTextFieldWithUnit
+                    {
+                        id: spoolWeightTextField
+                        valueText: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: " g"
+                        decimals: 0
+                        maximum: 10000
+
+                        editingFinishedFunction: function()
+                        {
+                            var modified_text = valueText.replace(",", ".")
+                            base.setMaterialPreferenceValue(properties.guid, "spool_weight", modified_text)
+                        }
+
+                        onValueTextChanged: updateCostPerMeter()
+                    }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Diameter") }
-            Cura.SpinBox
-            {
-                enabled: base.editingEnabled
-                id: diameterSpinBox
-                width: informationPage.columnWidth
-                value: properties.diameter
-                decimals: 2
-                suffix: " mm"
-                stepSize: 0.01
-
-                onEditingFinished:
+                Row
                 {
-                    // This does not use a SettingPropertyProvider, because we need to make the change to all containers
-                    // which derive from the same base_file
-                    var old_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "properties/diameter");
-                    var old_approximate_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "approximate_diameter");
-                    var new_approximate_diameter = getApproximateDiameter(value);
-                    if (new_approximate_diameter != Cura.ExtruderManager.getActiveExtruderStack().approximateMaterialDiameter)
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
                     {
-                        confirmDiameterChangeDialog.old_diameter_value = old_diameter;
-                        confirmDiameterChangeDialog.new_diameter_value = value;
-                        confirmDiameterChangeDialog.old_approximate_diameter_value = old_approximate_diameter;
-
-                        confirmDiameterChangeDialog.open()
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament length")
                     }
-                    else {
-                        base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, getApproximateDiameter(value).toString());
-                        base.setMetaDataEntry("properties/diameter", properties.diameter, value);
+                    UM.Label
+                    {
+                        width: informationPage.columnWidth
+                        text: "~ %1 m".arg(Math.round(base.spoolLength))
+                        height: informationPage.rowHeight
                     }
                 }
-                onValueChanged: updateCostPerMeter()
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament Cost") }
 
-            Cura.SpinBox
-            {
-                id: spoolCostSpinBox
-                width: informationPage.columnWidth
-                value: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
-                to: 100000000
-                editable: true
-                prefix: base.currency + " "
-                decimals: 2
-
-                onValueChanged:
+                Row
                 {
-                    base.setMaterialPreferenceValue(properties.guid, "spool_cost", parseFloat(value))
-                    updateCostPerMeter()
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Cost per Meter")
+                    }
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: "~ %1 %2/m".arg(base.costPerMeter.toFixed(2)).arg(base.currency)
+                    }
                 }
-            }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament weight") }
-            Cura.SpinBox
-            {
-                id: spoolWeightSpinBox
-                width: informationPage.columnWidth
-                value: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
-                stepSize: 100
-                to: 10000
-                editable: true
-                suffix: " g"
-
-                onValueChanged:
+                UM.Label
                 {
-                    base.setMaterialPreferenceValue(properties.guid, "spool_weight", parseFloat(value))
-                    updateCostPerMeter()
+                    height: parent.rowHeight
+                    width: informationPage.width
+                    text: catalog.i18nc("@label", "This material is linked to %1 and shares some of its properties.").arg(base.linkedMaterialNames)
+                    wrapMode: Text.WordWrap
+                    visible: unlinkMaterialButton.visible
+                }
+                Cura.SecondaryButton
+                {
+                    id: unlinkMaterialButton
+                    text: catalog.i18nc("@label", "Unlink Material")
+                    visible: base.linkedMaterialNames != ""
+                    onClicked:
+                    {
+                        Cura.ContainerManager.unlinkMaterial(base.currentMaterialNode)
+                        base.reevaluateLinkedMaterials = true
+                    }
                 }
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament length") }
-            Label
-            {
-                width: informationPage.columnWidth
-                text: "~ %1 m".arg(Math.round(base.spoolLength))
-                verticalAlignment: Qt.AlignVCenter
-                height: parent.rowHeight
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Cost per Meter") }
-            Label
-            {
-                width: informationPage.columnWidth
-                text: "~ %1 %2/m".arg(base.costPerMeter.toFixed(2)).arg(base.currency)
-                verticalAlignment: Qt.AlignVCenter
-                height: parent.rowHeight
-            }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height; visible: unlinkMaterialButton.visible }
-            Label
-            {
-                width: 2 * informationPage.columnWidth
-                verticalAlignment: Qt.AlignVCenter
-                text: catalog.i18nc("@label", "This material is linked to %1 and shares some of its properties.").arg(base.linkedMaterialNames)
-                wrapMode: Text.WordWrap
-                visible: unlinkMaterialButton.visible
-            }
-            Button
-            {
-                id: unlinkMaterialButton
-                text: catalog.i18nc("@label", "Unlink Material")
-                visible: base.linkedMaterialNames != ""
-                onClicked:
+                UM.Label
                 {
-                    Cura.ContainerManager.unlinkMaterial(base.currentMaterialNode)
-                    base.reevaluateLinkedMaterials = true
+                    width: informationPage.width
+                    height: parent.rowHeight
+                    text: catalog.i18nc("@label", "Description")
                 }
-            }
+                Cura.ReadOnlyTextArea
+                {
+                    text: properties.description
+                    width: informationPage.width - scrollBar.width
+                    height: 0.4 * informationPage.width
+                    wrapMode: Text.WordWrap
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
+                    readOnly: !base.editingEnabled
 
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Description") }
+                    onEditingFinished: base.setMetaDataEntry("description", properties.description, text)
+                }
 
-            ReadOnlyTextArea
-            {
-                text: properties.description;
-                width: informationPage.columnWidth * 2
-                height: 0.75 * informationPage.columnWidth
-                wrapMode: Text.WordWrap
+                UM.Label
+                {
+                    width: informationPage.width
+                    height: parent.rowHeight
+                    text: catalog.i18nc("@label", "Adhesion Information")
+                }
 
-                readOnly: !base.editingEnabled
+                Cura.ReadOnlyTextArea
+                {
+                    text: properties.adhesion_info
+                    width: informationPage.width - scrollBar.width
+                    height: 0.4 * informationPage.width
+                    wrapMode: Text.WordWrap
+                    readOnly: !base.editingEnabled
 
-                onEditingFinished: base.setMetaDataEntry("description", properties.description, text)
+                    onEditingFinished: base.setMetaDataEntry("adhesion_info", properties.adhesion_info, text)
+                }
             }
+        }
 
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Adhesion Information") }
+        ListView
+        {
+            id: settingsPage
+            visible: pageSelectorTabRow.currentItem.activeView === "settings"
+            clip: true
 
-            ReadOnlyTextArea
+            anchors
             {
-                text: properties.adhesion_info
-                width: 2 * informationPage.columnWidth
-                wrapMode: Text.WordWrap
-                height: 0.75 * informationPage.columnWidth
-                readOnly: !base.editingEnabled
-
-                onEditingFinished: base.setMetaDataEntry("adhesion_info", properties.adhesion_info, text)
+                fill: parent
+                topMargin: UM.Theme.getSize("thin_margin").height
+                bottomMargin: UM.Theme.getSize("thin_margin").height
+                leftMargin: UM.Theme.getSize("thin_margin").width
+                rightMargin: UM.Theme.getSize("thin_margin").width
             }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
-        }
-    }
+            width: settingsPage.width
+            spacing: UM.Theme.getSize("narrow_margin").height
 
-    ListView
-    {
-        anchors
-        {
-            top: pageSelectorTabRow.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                id: settingScrollBar
+                parent: settingsPage
+                anchors
+                {
+                    top: parent.top
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+            }
 
-        model: UM.SettingDefinitionsModel
-        {
-            containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
-            visibilityHandler: Cura.MaterialSettingsVisibilityHandler { }
-            expanded: ["*"]
-        }
-        ScrollBar.vertical: UM.ScrollBar {}
-        clip: true
-        visible: pageSelectorTabRow.currentItem.activeView === "settings"
+            property real columnWidth: Math.floor((width - settingScrollBar.width - UM.Theme.getSize("narrow_margin").width) / 2)
 
-        delegate: UM.TooltipArea
-        {
-            width: childrenRect.width
-            height: childrenRect.height
-            text: model.description
-            Label
+            model: UM.SettingDefinitionsModel
             {
-                id: label
-                width: base.firstColumnWidth;
-                height: spinBox.height + UM.Theme.getSize("default_lining").height
-                text: model.label
-                elide: Text.ElideRight
-                verticalAlignment: Qt.AlignVCenter
+                containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
+                visibilityHandler: Cura.MaterialSettingsVisibilityHandler { }
+                expanded: ["*"]
             }
-            Cura.SpinBox
+
+            delegate: UM.TooltipArea
             {
-                id: spinBox
-                anchors.left: label.right
-                value:
+                width: childrenRect.width
+                height: childrenRect.height
+
+                UM.TooltipArea
                 {
-                    // In case the setting is not in the material...
-                    if (!isNaN(parseFloat(materialPropertyProvider.properties.value)))
-                    {
-                        return parseFloat(materialPropertyProvider.properties.value);
-                    }
-                    // ... we search in the variant, and if it is not there...
-                    if (!isNaN(parseFloat(variantPropertyProvider.properties.value)))
-                    {
-                        return parseFloat(variantPropertyProvider.properties.value);
-                    }
-                    // ... then look in the definition container.
-                    if (!isNaN(parseFloat(machinePropertyProvider.properties.value)))
+                    anchors.fill: parent
+                    text: model.description
+                }
+                UM.Label
+                {
+                    id: label
+                    width: settingsPage.columnWidth
+                    height: spinBox.height + UM.Theme.getSize("default_lining").height
+                    text: model.label
+                    elide: Text.ElideRight
+                    verticalAlignment: Qt.AlignVCenter
+                }
+                Cura.SpinBox
+                {
+                    id: spinBox
+                    anchors.left: label.right
+                    value:
                     {
-                        return parseFloat(machinePropertyProvider.properties.value);
+                        // In case the setting is not in the material...
+                        if (!isNaN(parseFloat(materialPropertyProvider.properties.value)))
+                        {
+                            return parseFloat(materialPropertyProvider.properties.value);
+                        }
+                        // ... we search in the variant, and if it is not there...
+                        if (!isNaN(parseFloat(variantPropertyProvider.properties.value)))
+                        {
+                            return parseFloat(variantPropertyProvider.properties.value);
+                        }
+                        // ... then look in the definition container.
+                        if (!isNaN(parseFloat(machinePropertyProvider.properties.value)))
+                        {
+                            return parseFloat(machinePropertyProvider.properties.value);
+                        }
+                        return 0;
                     }
-                    return 0;
+                    width: settingsPage.columnWidth
+                    suffix: " " + model.unit
+                    to: 99999
+                    decimals: model.unit == "mm" ? 2 : 0
+
+                    onEditingFinished: materialPropertyProvider.setPropertyValue("value", value)
                 }
-                width: base.secondColumnWidth
-                suffix: " " + model.unit
-                to: 99999
-                decimals: model.unit == "mm" ? 2 : 0
 
-                onEditingFinished: materialPropertyProvider.setPropertyValue("value", value)
+                UM.ContainerPropertyProvider
+                {
+                    id: materialPropertyProvider
+                    containerId: base.containerId
+                    watchedProperties: [ "value" ]
+                    key: model.key
+                }
+                UM.ContainerPropertyProvider
+                {
+                    id: variantPropertyProvider
+                    containerId: Cura.MachineManager.activeStack.variant.id
+                    watchedProperties: [ "value" ]
+                    key: model.key
+                }
+                UM.ContainerPropertyProvider
+                {
+                    id: machinePropertyProvider
+                    containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
+                    watchedProperties: ["value"]
+                    key: model.key
+                }
             }
+        }
+    }
 
-            UM.ContainerPropertyProvider
-            {
-                id: materialPropertyProvider
-                containerId: base.containerId
-                watchedProperties: [ "value" ]
-                key: model.key
-            }
-            UM.ContainerPropertyProvider
-            {
-                id: variantPropertyProvider
-                containerId: Cura.MachineManager.activeStack.variant.id
-                watchedProperties: [ "value" ]
-                key: model.key
-            }
-            UM.ContainerPropertyProvider
-            {
-                id: machinePropertyProvider
-                containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
-                watchedProperties: [ "value" ]
-                key: model.key
-            }
+    UM.TabRow
+    {
+        id: pageSelectorTabRow
+        UM.TabRowButton
+        {
+            text: catalog.i18nc("@title", "Information")
+            property string activeView: "information" //To determine which page gets displayed.
+        }
+        UM.TabRowButton
+        {
+            text: catalog.i18nc("@label", "Print settings")
+            property string activeView: "settings"
         }
     }
 
     function updateCostPerMeter()
     {
-        base.spoolLength = calculateSpoolLength(diameterSpinBox.value, densitySpinBox.value, spoolWeightSpinBox.value);
-        base.costPerMeter = calculateCostPerMeter(spoolCostSpinBox.value);
+        var modified_weight = spoolWeightTextField.valueText.replace(",", ".")
+        var modified_cost = spoolCostTextField.valueText.replace(",", ".")
+        var modified_diameter = diameterTextField.valueText.replace(",", ".")
+        var modified_density = densityTextField.valueText.replace(",", ".")
+        base.spoolLength = calculateSpoolLength(modified_diameter, modified_density, parseInt(modified_weight));
+        base.costPerMeter = calculateCostPerMeter(parseFloat(modified_cost));
     }
 
     function calculateSpoolLength(diameter, density, spoolWeight)
diff --git a/resources/qml/Preferences/ProfilesPage.qml b/resources/qml/Preferences/ProfilesPage.qml
index 7358e515bb..c8de3ccb5b 100644
--- a/resources/qml/Preferences/ProfilesPage.qml
+++ b/resources/qml/Preferences/ProfilesPage.qml
@@ -46,19 +46,6 @@ UM.ManagementPage
     property string newQualityNameToSelect: ""
     property bool toActivateNewQuality: false
 
-    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
-
-    isActiveModelFunction: function(model, id) {
-        if (model.is_read_only)
-        {
-            return (model.name == Cura.MachineManager.activeQualityOrQualityChangesName) && (model.intent_category == Cura.MachineManager.activeIntentCategory);
-        }
-        else
-        {
-            return model.name == Cura.MachineManager.activeQualityOrQualityChangesName;
-        }
-    }
-
     onCreateProfile:
     {
         createQualityDialog.object = Cura.ContainerManager.makeUniqueName(Cura.MachineManager.activeQualityOrQualityChangesName);
@@ -67,10 +54,18 @@ UM.ManagementPage
     }
 
     title: catalog.i18nc("@title:tab", "Profiles")
+    detailsPlaneCaption: base.currentItemDisplayName
     scrollviewCaption: catalog.i18nc("@label", "Profiles compatible with active printer:") + "<br><b>" + Cura.MachineManager.activeMachine.name + "</b>"
 
     hamburgerButtonVisible: hasCurrentItem
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
 
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
     sectionRole: "section_name"
 
     model: qualityManagementModel
@@ -97,6 +92,120 @@ UM.ManagementPage
         }
     ]
 
+    Column
+    {
+        id: detailsPanelHeaderColumn
+        anchors
+        {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+
+        spacing: UM.Theme.getSize("default_margin").height
+        visible: base.currentItem != null
+
+        UM.Label
+        {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            text: catalog.i18nc("@action:label", "Some settings from current profile were overwritten.")
+            visible: currentSettingsActions.visible
+        }
+
+        Flow
+        {
+            id: currentSettingsActions
+            width: parent.width
+
+            visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
+
+            spacing: UM.Theme.getSize("default_margin").width
+
+            Cura.SecondaryButton
+            {
+                text: catalog.i18nc("@action:button", "Update profile.")
+                enabled: Cura.MachineManager.hasUserSettings && objectList.currentIndex && !objectList.currentIndex.is_read_only
+                onClicked: Cura.ContainerManager.updateQualityChanges()
+                tooltip: catalog.i18nc("@action:tooltip", "Update profile with current settings/overrides")
+            }
+
+            Cura.SecondaryButton
+            {
+                text: catalog.i18nc("@action:button", "Discard current changes")
+                enabled: Cura.MachineManager.hasUserSettings
+                onClicked: Cura.ContainerManager.clearUserContainers()
+            }
+        }
+
+        UM.Label
+        {
+            id: defaultsMessage
+            visible: false
+            text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
+            width: parent.width
+        }
+        UM.Label
+        {
+            id: noCurrentSettingsMessage
+            visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
+            text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
+            width: parent.width
+        }
+
+        UM.TabRow
+        {
+            id: profileExtruderTabs
+            // One extra tab for the global settings.
+            UM.TabRowButton
+            {
+                text: catalog.i18nc("@title:tab", "Global Settings")
+            }
+
+            Repeater
+            {
+                model: base.extrudersModel
+
+                UM.TabRowButton
+                {
+                    text: model.name
+                }
+            }
+        }
+    }
+
+    Rectangle
+    {
+        color: UM.Theme.getColor("main_background")
+        anchors
+        {
+            top: detailsPanelHeaderColumn.bottom
+            topMargin: -UM.Theme.getSize("default_lining").width
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("thick_lining")
+        visible: base.hasCurrentItem
+    }
+
+    Cura.ProfileOverview
+    {
+        anchors
+        {
+            top: detailsPanelHeaderColumn.bottom
+            margins: UM.Theme.getSize("default_margin").height
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        visible: detailsPanelHeaderColumn.visible
+        qualityItem: base.currentItem
+        extruderPosition: profileExtruderTabs.currentIndex - 1
+    }
+
     Item
     {
         id: content_item
@@ -305,126 +414,5 @@ UM.ManagementPage
                 CuraApplication.setDefaultPath("dialog_profile_path", folder);
             }
         }
-
-        Column
-        {
-            id: detailsPanelHeaderColumn
-            anchors
-            {
-                left: parent.left
-                right: parent.right
-                top: parent.top
-                topMargin: UM.Theme.getSize("narrow_margin").height
-            }
-
-            spacing: UM.Theme.getSize("default_margin").height
-            visible: base.currentItem != null
-            UM.Label
-            {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                text: base.currentItemDisplayName
-                font: UM.Theme.getFont("large_bold")
-                elide: Text.ElideRight
-            }
-            UM.Label
-            {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                text: catalog.i18nc("@action:label", "Some settings from current profile were overwritten.")
-                visible: currentSettingsActions.visible
-            }
-
-            Flow
-            {
-                id: currentSettingsActions
-                width: parent.width
-
-                visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
-                spacing: UM.Theme.getSize("default_margin").width
-                Cura.SecondaryButton
-                {
-                    text: catalog.i18nc("@action:button", "Update profile")
-                    enabled: !Cura.MachineManager.stacksHaveErrors && Cura.MachineManager.hasUserSettings && Cura.MachineManager.activeQualityChangesGroup != null
-                    onClicked: Cura.ContainerManager.updateQualityChanges()
-                    tooltip: catalog.i18nc("@action:tooltip", "Update profile with current settings/overrides")
-                }
-
-                Cura.SecondaryButton
-                {
-                    text: catalog.i18nc("@action:button", "Discard current changes")
-                    enabled: Cura.MachineManager.hasUserSettings
-                    onClicked: Cura.ContainerManager.clearUserContainers()
-                }
-            }
-
-            UM.Label
-            {
-                id: defaultsMessage
-                visible: false
-                text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
-                width: parent.width
-            }
-            UM.Label
-            {
-                id: noCurrentSettingsMessage
-                visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
-                text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
-                width: parent.width
-            }
-
-            UM.TabRow
-            {
-                id: profileExtruderTabs
-
-                // One extra tab for the global settings.
-                UM.TabRowButton
-                {
-                    text: catalog.i18nc("@title:tab", "Global Settings")
-                }
-
-                Repeater
-                {
-                    model: base.extrudersModel
-
-                    UM.TabRowButton
-                    {
-                        text: model.name
-                    }
-                }
-            }
-        }
-
-        Rectangle
-        {
-            color: UM.Theme.getColor("main_background")
-            anchors
-            {
-                top: detailsPanelHeaderColumn.bottom
-                topMargin: -UM.Theme.getSize("default_lining").width
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            border.width: UM.Theme.getSize("default_lining").width
-            border.color: UM.Theme.getColor("thick_lining")
-            visible: base.hasCurrentItem
-        }
-
-        Cura.ProfileOverview
-        {
-            anchors
-            {
-                top: detailsPanelHeaderColumn.bottom
-                margins: UM.Theme.getSize("default_margin").height
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-
-            visible: detailsPanelHeaderColumn.visible
-            qualityItem: base.currentItem
-            extruderPosition: profileExtruderTabs.currentIndex - 1
-        }
     }
 }
diff --git a/resources/qml/Preferences/ReadOnlyTextArea.qml b/resources/qml/Preferences/ReadOnlyTextArea.qml
index c6f253f0ca..291e241718 100644
--- a/resources/qml/Preferences/ReadOnlyTextArea.qml
+++ b/resources/qml/Preferences/ReadOnlyTextArea.qml
@@ -23,13 +23,10 @@ ScrollView
         enabled: !base.readOnly
         selectByMouse: true
 
-        background: Rectangle
-        {
-            radius: UM.Theme.getSize("setting_control_radius").width
-            color: textArea.enabled ? UM.Theme.getColor("setting_control") : UM.Theme.getColor("setting_control_disabled")
-        }
+        background: UM.UnderlineBackground { id: backgroundRectangle }
 
         color: UM.Theme.getColor("text")
+        selectionColor: UM.Theme.getColor("text_selection")
         font: UM.Theme.getFont("default")
 
         Keys.onReturnPressed:  base.editingFinished()
diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json
index 86af42d187..94372d415e 100644
--- a/resources/themes/cura-light/theme.json
+++ b/resources/themes/cura-light/theme.json
@@ -431,8 +431,6 @@
         "layerview_nozzle": [224, 192, 16, 64],
         "layerview_starts": [255, 255, 255, 255],
 
-        "favorites_header_bar": [245, 245, 245, 255],
-        "favorites_row_selected": [196, 239, 255, 255],
 
         "monitor_printer_family_tag": [228, 228, 242, 255],
         "monitor_text_disabled": [238, 238, 238, 255],
@@ -562,10 +560,6 @@
 
         "context_menu": [20, 2],
 
-        "favorites_row": [2, 2],
-        "favorites_button": [2, 2],
-        "favorites_button_icon": [1.2, 1.2],
-
         "icon_indicator": [1, 1],
 
         "printer_status_icon": [1.0, 1.0],