[ui] round boxes for preferences

gui/components/Preferences.qml

 import QtQuick 2.9
 import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.14
 import QtQuick.Controls.Material 2.1
 
 import "../themes/themes.js" as Theme
@@ -7,69 +8,130 @@ import "../themes/themes.js" as Theme
 ThemedPage {
     title: qsTr("Preferences")
 
-    Column {
-        id: prefCol
-        // FIXME checkboxes in Material style force lineHeights too big.
-        // need to override the style
-        // See: https://bugreports.qt.io/browse/QTBUG-95385
-        topPadding: root.width * 0.05
-        leftPadding: root.width * 0.1
-        rightPadding: root.width * 0.15
+    // TODO - convert "boxed" themedpage with white background into
+    // a QML template.
 
-        Rectangle {
-            id: turnOffWarning
-            visible: false
-            height: 40
-            width: 300
-            color: Theme.bgColor
+    Rectangle {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: root.appWidth * 0.80
+        // FIXME - just the needed height
+        height: getBoxHeight()
+        radius: 10
+        color: "white"
+
+        anchors {
+            fill: parent
+            margins: 10
+        }
+
+        ColumnLayout {
+            id: prefCol
+            width: root.appWidth * 0.80
+            // FIXME checkboxes in Material style force lineHeights too big.
+            // need to override the style
+            // See: https://bugreports.qt.io/browse/QTBUG-95385
+
+            Rectangle {
+                id: turnOffWarning
+                visible: false
+                height: 40
+                width: parent.width
+                color: Theme.bgColor
+
+
+                Label {
+                    color: "red"
+                    text: qsTr("Turn off the VPN to make changes")
+                    width: prefCol.width
+                }
+                Layout.topMargin: 10
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
+            }
 
-            anchors.horizontalCenter: parent.horizontalCenter
 
             Label {
-                color: "red"
-                text: qsTr("Turn off the VPN to make changes")
-                width: prefCol.width
+                id: circumLabel
+                text: qsTr("Censorship circumvention")
+                font.bold: true
+                Layout.topMargin: 10
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
             }
-        }
 
+            Label {
+                text: qsTr("These techniques can bypass censorship, but are slower. Please use them only if needed.")
+                color: "gray"
+                visible: true
+                wrapMode: Text.Wrap
+                font.pixelSize: Theme.fontSize - 3
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
+                Layout.preferredWidth: 240
+            }
 
-        Label {
-            text: qsTr("Anti-censorship")
-            font.bold: true
-        }
+            CheckBox {
+                id: useBridgesCheckBox
+                checked: false
+                text: qsTr("Use obfs4 bridges")
+	        // TODO refactor - this sets wrapMode on checkbox
+		contentItem: Label {
+			text: useBridgesCheckBox.text
+			font: useBridgesCheckBox.font
+			horizontalAlignment: Text.AlignLeft
+			verticalAlignment: Text.AlignVCenter
+			leftPadding: useBridgesCheckBox.indicator.width + useBridgesCheckBox.spacing
+			wrapMode: Label.Wrap
+		}
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
+		onClicked: {
+                    // TODO there's a corner case that needs to be dealt with in the backend,
+                    // if an user has a manual location selected and switches to bridges:
+                    // we need to fallback to "auto" selection if such location does not 
+                    // offer bridges
+                    useBridges(checked)
+                }
+            }
 
-        CheckBox {
-            id: useBridgesCheckBox
-            checked: false
-            text: qsTr("Use obfs4 bridges")
-            onClicked: {
-                // TODO there's a corner case that needs to be dealt with in the backend,
-                // if an user has a manual location selected and switches to bridges:
-                // we need to fallback to "auto" selection if such location does not 
-                // offer bridges
-                useBridges(checked)
+            CheckBox {
+                id: useSnowflake
+                //wrapMode: Label.Wrap
+                text: qsTr("Use Snowflake (experimental)")
+                enabled: false
+                checked: false
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
             }
-        }
 
-        CheckBox {
-            id: useSnowflake
-            text: qsTr("Use Snowflake (experimental)")
-            enabled: false
-            checked: false
-        }
+            Label {
+                text: qsTr("Transport")
+                font.bold: true
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
+            }
 
-        Label {
-            text: qsTr("Transport")
-            font.bold: true
-        }
+            Label {
+                text: qsTr("UDP can make the VPN faster")
+                width: parent.width
+                color: "gray"
+                visible: true
+                wrapMode: Text.Wrap
+                font.pixelSize: Theme.fontSize - 3
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
+            }
 
-        CheckBox {
-            id: useUDP
-            text: qsTr("UDP")
-            enabled: false
-            checked: false
-            onClicked: {
-                doUseUDP(checked)
+            CheckBox {
+                id: useUDP
+                text: qsTr("UDP")
+                enabled: false
+                checked: false
+                Layout.leftMargin: 10
+                Layout.rightMargin: 10
+                onClicked: {
+                    doUseUDP(checked)
+                }
             }
         }
     }
@@ -145,6 +207,10 @@ ThemedPage {
         }
     }
 
+    function getBoxHeight() {
+        return prefCol.height + 15
+    }
+
     Component.onCompleted: {
         if (ctx && ctx.transport == "obfs4") {
             useBridgesCheckBox.checked = true