feat(GODT-3121): finalize UI for KB suggestions.

internal/frontend/bridge-gui/bridge-gui/qml/BugReport/BugReportFlow.qml

@@ -36,7 +36,7 @@ Item {
     }
     function showBugQuestion() {
         bugQuestion.setCategoryId(root.categoryId);
-        bugQuestion.positionViewAtBegining();
+        bugQuestion.positionViewAtBeginning();
         bugReportFlow.currentIndex = 1;
     }
     function showBugReport() {

internal/frontend/bridge-gui/bridge-gui/qml/BugReport/BugReportView.qml

@@ -18,9 +18,8 @@ import ".."
 
 SettingsView {
     id: root
-
     property var selectedAddress
-    property var categoryId:-1
+    property var categoryId: -1
     property string category: Backend.getBugCategory(root.categoryId)
     property var suggestions: null
 
@@ -53,134 +52,144 @@ SettingsView {
         root.setDefaultValue();
     }
 
-    Label {
-        colorScheme: root.colorScheme
-        text: qsTr("Send report")
-        type: Label.Heading
-    }
-    TextArea {
-        id: description
-
-        KeyNavigation.priority: KeyNavigation.BeforeItem
-        KeyNavigation.tab: address
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-        Layout.minimumHeight: heightForLinesVisible(4)
-        colorScheme: root.colorScheme
-        textFormat: Text.MarkdownText
-
-        // set implicitHeight to explicit height because se don't
-        // want TextArea implicitHeight (which is height of all text)
-        // to be considered in SettingsView internal scroll view
-        implicitHeight: height
-        label: "Your answers to: " + qsTr(root.category);
-        readOnly : true
-    }
-
     ColumnLayout {
-        id: suggestionBox
+        spacing: 32
-        visible: suggestions && suggestions.length > 0
-        spacing: 8
 
         Label {
             colorScheme: root.colorScheme
-            text: qsTr("We believe these links might be relevant for your problem")
+            text: qsTr("Send report")
-            type: Label.Body_semibold
+            type: Label.Heading
         }
-        Repeater {
+        TextArea {
-            model: suggestions
+            id: description
-            LinkLabel {
+
-                required property var modelData
+            KeyNavigation.priority: KeyNavigation.BeforeItem
+            KeyNavigation.tab: address
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.minimumHeight: heightForLinesVisible(4)
+            colorScheme: root.colorScheme
+            textFormat: Text.MarkdownText
+            // set implicitHeight to explicit height because se don't
+            // want TextArea implicitHeight (which is height of all text)
+            // to be considered in SettingsView internal scroll view
+            implicitHeight: height
+            label: "Your answers to: " + qsTr(root.category);
+            readOnly: true
+        }
+
+        ColumnLayout {
+            id: suggestionBox
+            visible: suggestions && suggestions.length > 0
+            spacing: 8
+
+            Label {
                 colorScheme: root.colorScheme
-                text: modelData.title
+                text: qsTr("We believe these links might be relevant for your problem")
-                link: modelData.url
+                type: Label.Body_semibold
-                external: true
+            }
+            Repeater {
+                model: suggestions
+                LinkLabel {
+                    required property var modelData
+                    colorScheme: root.colorScheme
+                    text: modelData.title
+                    link: modelData.url
+                    external: true
+                }
             }
         }
-    }
 
-    TextField {
+        RowLayout {
-        id: address
+            spacing: 12
-        Layout.fillWidth: true
+
-        colorScheme: root.colorScheme
+            TextField {
-        label: qsTr("Your contact email")
+                id: address
-        placeholderText: qsTr("e.g. jane.doe@protonmail.com")
+                Layout.preferredWidth: 1
-        validator: function (str) {
+                Layout.fillWidth: true
-            if (!isValidEmail(str)) {
+                colorScheme: root.colorScheme
-                return qsTr("Enter valid email address");
+                label: qsTr("Your contact email")
+                placeholderText: qsTr("e.g. jane.doe@protonmail.com")
+                validator: function (str) {
+                    if (!isValidEmail(str)) {
+                        return qsTr("Enter valid email address");
+                    }
+                }
+            }
+            TextField {
+                id: emailClient
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+                colorScheme: root.colorScheme
+                label: qsTr("Your email client (including version)")
+                placeholderText: qsTr("e.g. Apple Mail 14.0")
+                validator: function (str) {
+                    if (str.length === 0) {
+                        return qsTr("Enter an email client name and version");
+                    }
+                }
             }
         }
-    }
+        RowLayout {
-    TextField {
+            spacing: 12
-        id: emailClient
+
-        Layout.fillWidth: true
+            CheckBox {
-        colorScheme: root.colorScheme
+                id: includeLogs
-        label: qsTr("Your email client (including version)")
+                checked: true
-        placeholderText: qsTr("e.g. Apple Mail 14.0")
+                colorScheme: root.colorScheme
-        validator: function (str) {
+                text: qsTr("Include my recent logs")
-            if (str.length === 0) {
+            }
-                return qsTr("Enter an email client name and version");
+
+            Button {
+                colorScheme: root.colorScheme
+                secondary: true
+                text: qsTr("View logs")
+
+                onClicked: Backend.openExternalLink(Backend.logsPath)
+            }
+
+            Label {
+                Layout.fillWidth: true
+                verticalAlignment: Qt.AlignVCenter
+                colorScheme: root.colorScheme
+                type: Label.Caption
+                color: root.colorScheme.text_weak
+                text: qsTr("Reports are not end-to-end encrypted, please do not send any sensitive information.")
+                wrapMode: Text.WordWrap
             }
         }
-    }
+
-    RowLayout {
-        CheckBox {
-            id: includeLogs
-            checked: true
-            colorScheme: root.colorScheme
-            text: qsTr("Include my recent logs")
-        }
         Button {
-            Layout.leftMargin: 12
+            id: sendButton
             colorScheme: root.colorScheme
-            secondary: true
+            enabled: !loading
-            text: qsTr("View logs")
+            text: qsTr("Send")
 
-            onClicked: Backend.openExternalLink(Backend.logsPath)
+            onClicked: {
-        }
+                description.validate();
-    }
+                address.validate();
-    TextEdit {
+                emailClient.validate();
-        Layout.fillWidth: true
+                if (description.error || address.error || emailClient.error) {
-        color: root.colorScheme.text_weak
+                    return;
-        font.family: ProtonStyle.font_family
+                }
-        font.letterSpacing: ProtonStyle.caption_letter_spacing
+                submit();
-        font.pixelSize: ProtonStyle.caption_font_size
+            }
-        font.weight: ProtonStyle.fontWeight_400
-        readOnly: true
-        selectByMouse: true
-        selectedTextColor: root.colorScheme.text_invert
-        // No way to set lineHeight: ProtonStyle.caption_line_height
-        selectionColor: root.colorScheme.interaction_norm
-        text: qsTr("Reports are not end-to-end encrypted, please do not send any sensitive information.")
-        wrapMode: Text.WordWrap
-    }
-    Button {
-        id: sendButton
-        colorScheme: root.colorScheme
-        enabled: !loading
-        text: qsTr("Send")
 
-        onClicked: {
+            Connections {
-            description.validate();
+                function onBugReportSendSuccess() {
-            address.validate();
+                    root.bugReportWasSent();
-            emailClient.validate();
+                }
-            if (description.error || address.error || emailClient.error) {
-                return;
-            }
-            submit();
-        }
 
-        Connections {
+                function onReportBugFinished() {
-            function onBugReportSendSuccess() {
+                    sendButton.loading = false;
-                root.bugReportWasSent();
+                }
+
+                function onReceivedKnowledgeBaseSuggestions(suggestions) {
+                    root.suggestions = suggestions
+                }
+
+                target: Backend
             }
-            function onReportBugFinished() {
-                sendButton.loading = false;
-            }
-            function onReceivedKnowledgeBaseSuggestions(suggestions) {
-                root.suggestions = suggestions
-            }
-            target: Backend
         }
     }
 }

internal/frontend/bridge-gui/bridge-gui/qml/SettingsView.qml

@@ -30,7 +30,7 @@ Item {
     property bool fillHeight: false
     default property alias items: content.children
 
-    function positionViewAtBegining() {
+    function positionViewAtBeginning() {
         scrollView.ScrollBar.vertical.position = 0
     }
     signal back