From 440d6fa5250bd763b1e5026ee7da23e2f043fe95 Mon Sep 17 00:00:00 2001
From: "j.delarago" <joeydelarago@gmail.com>
Date: Mon, 28 Feb 2022 11:20:31 +0100
Subject: [PATCH] Update style of TextFIeld and ComboxBox to match new designs.
 Remove borders and radius on corners.

Update Prefereces title to be bold and centered with button

Make prefereces pages selection buttons correct height.

CURA-8688
---
 resources/qml/Widgets/ComboBox.qml  | 10 +---------
 resources/qml/Widgets/TextField.qml | 27 ++++-----------------------
 2 files changed, 5 insertions(+), 32 deletions(-)

diff --git a/resources/qml/Widgets/ComboBox.qml b/resources/qml/Widgets/ComboBox.qml
index 6420f41823..121c5f15da 100644
--- a/resources/qml/Widgets/ComboBox.qml
+++ b/resources/qml/Widgets/ComboBox.qml
@@ -26,7 +26,6 @@ ComboBox
         {
             name: "disabled"
             when: !control.enabled
-            PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_disabled_border")}
             PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")}
             PropertyChanges { target: contentLabel; color: UM.Theme.getColor("setting_control_disabled_text")}
         },
@@ -34,20 +33,13 @@ ComboBox
         {
             name: "highlighted"
             when: control.hovered || control.activeFocus
-            PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_border_highlight") }
             PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_highlight")}
         }
     ]
 
-    background: Rectangle
+    background: UM.UnderlineBackground
     {
         id: backgroundRectangle
-        color: UM.Theme.getColor("setting_control")
-
-        radius: UM.Theme.getSize("setting_control_radius").width
-        border.width: UM.Theme.getSize("default_lining").width
-        border.color: UM.Theme.getColor("setting_control_border")
-
     }
 
     indicator: UM.RecolorImage
diff --git a/resources/qml/Widgets/TextField.qml b/resources/qml/Widgets/TextField.qml
index b995c34f10..bace79a98a 100644
--- a/resources/qml/Widgets/TextField.qml
+++ b/resources/qml/Widgets/TextField.qml
@@ -4,7 +4,7 @@
 import QtQuick 2.10
 import QtQuick.Controls 2.3
 
-import UM 1.3 as UM
+import UM 1.5 as UM
 import Cura 1.1 as Cura
 
 
@@ -17,6 +17,8 @@ TextField
 
     property alias leftIcon: iconLeft.source
 
+    height: UM.Theme.getSize("setting_control").height
+
     hoverEnabled: true
     selectByMouse: true
     font: UM.Theme.getFont("default")
@@ -29,45 +31,24 @@ TextField
         {
             name: "disabled"
             when: !textField.enabled
-            PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_disabled_border")}
             PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")}
         },
         State
         {
             name: "invalid"
             when: !textField.acceptableInput
-            PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_validation_error")}
             PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_validation_error_background")}
         },
         State
         {
             name: "hovered"
             when: textField.hovered || textField.activeFocus
-            PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_border_highlight") }
         }
     ]
 
-    background: Rectangle
+    background: UM.UnderlineBackground
     {
         id: backgroundRectangle
-
-        color: UM.Theme.getColor("main_background")
-
-        radius: UM.Theme.getSize("setting_control_radius").width
-
-        border.color:
-        {
-            if (!textField.enabled)
-            {
-                return UM.Theme.getColor("setting_control_disabled_border")
-            }
-            if (textField.hovered || textField.activeFocus)
-            {
-                return UM.Theme.getColor("setting_control_border_highlight")
-            }
-            return UM.Theme.getColor("setting_control_border")
-        }
-
         //Optional icon added on the left hand side.
         UM.RecolorImage
         {