From 1332fdc0d9d676696e88472975e0941be749cc2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Mon, 24 Jul 2023 13:16:26 +0200
Subject: [PATCH] feat(StatusInfoBox): add support for icons

with predefined Info, Danger, Success and Warning colors
---
 storybook/pages/StatusInfoBoxPanelPage.qml    | 42 +++++++++++----
 .../StatusQ/Components/StatusInfoBoxPanel.qml | 51 ++++++++++++++++++-
 2 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/storybook/pages/StatusInfoBoxPanelPage.qml b/storybook/pages/StatusInfoBoxPanelPage.qml
index 457c392dfa..cb251e79d9 100644
--- a/storybook/pages/StatusInfoBoxPanelPage.qml
+++ b/storybook/pages/StatusInfoBoxPanelPage.qml
@@ -35,6 +35,8 @@ SplitView {
                 Layout.preferredWidth: slider.value
 
                 title: "No hodlers just yet"
+                icon: "settings"
+                iconType: ctrlIconType.currentIndex
                 text: ModelsData.descriptions.airdropInfo
                 buttonText: "Airdrop"
 
@@ -51,19 +53,39 @@ SplitView {
 
         logsView.logText: logs.logText
 
-        Row {
-            Label {
-                anchors.verticalCenter: parent.verticalCenter
-                text: "Panel width:"
+        ColumnLayout {
+            Row {
+                Label {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "Panel width: "
+                }
+
+                Slider {
+                    id: slider
+                    value: 700
+                    from: 300
+                    to: 600
+                }
             }
 
-            Slider {
-                id: slider
-                value: 700
-                from: 300
-                to: 600
+            Row {
+                Label {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "Icon type: "
+                }
+
+                ComboBox {
+                    id: ctrlIconType
+                    textRole: "text"
+                    valueRole: "value"
+                    model: [
+                        { value: StatusInfoBoxPanel.Type.Info, text: "Info" },
+                        { value: StatusInfoBoxPanel.Type.Danger, text: "Danger" },
+                        { value: StatusInfoBoxPanel.Type.Success, text: "Success" },
+                        { value: StatusInfoBoxPanel.Type.Warning, text: "Warning" }
+                    ]
+                }
             }
         }
-
     }
 }
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml b/ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml
index 61a18be60a..6155a0f7d3 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml
@@ -6,20 +6,55 @@ import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
+import utils 1.0
 
 Control {
     id: root
 
     property alias title: titleComponent.text
     property alias text: textComponent.text
+    property string icon
+    property int iconType: StatusInfoBoxPanel.Type.Info
     property alias buttonText: button.text
     property alias buttonVisible: button.visible
 
+    enum Type {
+        Info,
+        Danger,
+        Success,
+        Warning
+    }
+
     signal clicked
 
     verticalPadding: 40
     horizontalPadding: 56
 
+    QtObject {
+        id: d
+        property color bgColor
+        property color fgColor
+    }
+
+    states: [
+        State {
+            when: root.iconType === StatusInfoBoxPanel.Type.Info
+            PropertyChanges { target: d; bgColor: Theme.palette.primaryColor3; fgColor: Theme.palette.primaryColor1 }
+        },
+        State {
+            when: root.iconType === StatusInfoBoxPanel.Type.Danger
+            PropertyChanges { target: d; bgColor: Theme.palette.dangerColor3; fgColor: Theme.palette.dangerColor1 }
+        },
+        State {
+            when: root.iconType === StatusInfoBoxPanel.Type.Success
+            PropertyChanges { target: d; bgColor: Theme.palette.successColor2; fgColor: Theme.palette.successColor1 }
+        },
+        State {
+            when: root.iconType === StatusInfoBoxPanel.Type.Warning
+            PropertyChanges { target: d; bgColor: Theme.palette.warningColor3; fgColor: Theme.palette.warningColor1 }
+        }
+    ]
+
     background: Rectangle {
         color: Theme.palette.statusListItem.backgroundColor
         radius: 8
@@ -27,6 +62,20 @@ Control {
     }
 
     contentItem: ColumnLayout {
+        spacing: Style.current.padding
+
+        StatusRoundIcon {
+            id: iconComponent
+            Layout.preferredWidth: 40
+            Layout.preferredHeight: 40
+            Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: 12
+            visible: !!root.icon
+            asset.name: root.icon
+            asset.color: d.fgColor
+            asset.bgColor: d.bgColor
+        }
+
         StatusBaseText {
             id: titleComponent
 
@@ -44,8 +93,6 @@ Control {
             id: textComponent
 
             Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 16
 
             wrapMode: Text.Wrap
             font.pixelSize: 15