qml: styling InfoTextArea

electrum/gui/qml/components/Constants.qml

@@ -35,9 +35,11 @@ Item {
     property color colorCredit: "#ff80ff80"
     property color colorDebit: "#ffff8080"
 
-    property color colorMine: "yellow"
-    property color colorError: '#ffff8080'
+    property color colorInfo: Material.accentColor
     property color colorWarning: 'yellow'
+    property color colorError: '#ffff8080'
+
+    property color colorMine: "yellow"
     property color colorLightningLocal: "blue"
     property color colorLightningRemote: "yellow"
     property color colorChannelOpen: "#ff80ff80"

electrum/gui/qml/components/controls/InfoTextArea.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.1
 import QtQuick.Controls.Material 2.0
 
-Item {
+TextHighlightPane {
     enum IconStyle {
         None,
         Info,
@@ -15,50 +15,36 @@ Item {
     property int iconStyle: InfoTextArea.IconStyle.Info
     property alias textFormat: infotext.textFormat
 
-    implicitHeight: layout.height
-
-    ColumnLayout {
-        id: layout
-
-        spacing: 0
+    // borderColor: constants.colorWarning
+    borderColor: iconStyle == InfoTextArea.IconStyle.Info
+        ? constants.colorInfo
+        : iconStyle == InfoTextArea.IconStyle.Warn
+            ? constants.colorWarning
+            : iconStyle == InfoTextArea.IconStyle.Error
+                ? constants.colorError
+                : constants.colorInfo
+    padding: constants.paddingXLarge
+
+    RowLayout {
         width: parent.width
-
-        Rectangle {
-            height: 2
-            Layout.fillWidth: true
-            color: Qt.rgba(1,1,1,0.25)
+        Image {
+            source: iconStyle == InfoTextArea.IconStyle.Info
+                ? "../../../icons/info.png"
+                : iconStyle == InfoTextArea.IconStyle.Warn
+                    ? "../../../icons/warning.png"
+                    : iconStyle == InfoTextArea.IconStyle.Error
+                        ? "../../../icons/expired.png"
+                        : ""
+            Layout.preferredWidth: constants.iconSizeMedium
+            Layout.preferredHeight: constants.iconSizeMedium
         }
+        Label {
 
-        TextArea {
             id: infotext
             Layout.fillWidth: true
-            Layout.minimumHeight: constants.iconSizeLarge + 2*constants.paddingLarge
-            readOnly: true
-            rightPadding: constants.paddingLarge
-            leftPadding: 2*constants.iconSizeLarge
-            wrapMode: TextInput.Wrap
-            textFormat: TextEdit.RichText
-            background: Rectangle {
-                color: Qt.rgba(1,1,1,0.05) // whiten 5%
-            }
-
-            Image {
-                source: iconStyle == InfoTextArea.IconStyle.Info ? "../../../icons/info.png" : iconStyle == InfoTextArea.IconStyle.Warn ? "../../../icons/warning.png" : iconStyle == InfoTextArea.IconStyle.Error ? "../../../icons/expired.png" : ""
-                anchors.left: parent.left
-                anchors.top: parent.top
-                anchors.leftMargin: constants.paddingLarge
-                anchors.topMargin: constants.paddingLarge
-                height: constants.iconSizeLarge
-                width: constants.iconSizeLarge
-                fillMode: Image.PreserveAspectCrop
-            }
-
-        }
-
-        Rectangle {
-            height: 2
-            Layout.fillWidth: true
-            color: Qt.rgba(0,0,0,0.25)
+            width: parent.width
+            text: invoice.userinfo
+            wrapMode: Text.Wrap
         }
     }
 }