feat(GODT-3121): reuse InfoTooltip.

internal/frontend/bridge-gui/bridge-gui/Resources.qrc

@@ -89,6 +89,7 @@
         <file>qml/BugReport/BugReportFlow.qml</file>
         <file>qml/BugReport/BugReportView.qml</file>
         <file>qml/BugReport/CategoryItem.qml</file>
+        <file>qml/BugReport/QuestionItem.qml</file>
         <file>qml/Proton/Action.qml</file>
         <file>qml/Proton/ApplicationWindow.qml</file>
         <file>qml/Proton/Button.qml</file>
@@ -109,7 +110,6 @@
         <file>qml/Proton/TextArea.qml</file>
         <file>qml/Proton/TextField.qml</file>
         <file>qml/Proton/Toggle.qml</file>
-        <file>qml/QuestionItem.qml</file>
         <file>qml/Resources/bug_report_flow.json</file>
         <file>qml/Resources/Help/Template.html</file>
         <file>qml/Resources/Help/WhyBridge.html</file>

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

@@ -33,7 +33,7 @@ Item {
 
     RowLayout {
         anchors.fill: parent
-        spacing: 16
+        spacing: 12
 
         Label {
             id: mainLabel
@@ -45,42 +45,13 @@ Item {
             wrapMode: Text.WordWrap
         }
 
-        ColorImage {
-            id: infoImage
+        InfoTooltip {
             Layout.alignment: Qt.AlignVCenter
+            Layout.topMargin: 4
             Layout.bottomMargin: root._bottomMargin
-            color: root.colorScheme.interaction_norm
-            height: 21
-            width: 21
-            source: "/qml/icons/ic-info-circle.svg"
-            sourceSize.height: 21
-            sourceSize.width: 21
-            visible: root.hint !== ""
-            MouseArea {
-                id: imageArea
-                anchors.fill: infoImage
-                hoverEnabled: true
-            }
-            ToolTip {
-                id: toolTipinfo
-                text: root.hint
-                visible: imageArea.containsMouse
-                implicitWidth: Math.min(400, tooltipText.implicitWidth)
-                background: Rectangle {
-                    radius: 4
-                    border.color: root.colorScheme.border_weak
-                    color: root.colorScheme.background_weak
-                }
-                contentItem: Text {
-                    id: tooltipText
-                    color: root.colorScheme.text_hint
-                    text: toolTipinfo.text
-                    wrapMode: Text.WordWrap
-
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
+            colorScheme: root.colorScheme
+            text: root.hint
+            size: 16
         }
 
         // fill height so the footer label will always be attached to the bottom

internal/frontend/bridge-gui/bridge-gui/qml/Proton/InfoTooltip.qml

@@ -19,17 +19,18 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 ColorImage {
+    id: root
+
     property var colorScheme
     property string text
-    id: root
-    Layout.alignment: Qt.AlignVCenter
-    Layout.bottomMargin: root._bottomMargin
+    property int size: 16
+
     color: root.colorScheme.interaction_norm
-    height: sourceSize.height
-    width: sourceSize.width
+    height: size
+    width: size
     source: "/qml/icons/ic-info-circle.svg"
-    sourceSize.height: 16
-    sourceSize.width: 16
+    sourceSize.height: size
+    sourceSize.width: size
     visible: root.hint !== ""
     MouseArea {
         id: imageArea