feat(OwnerToken): Create `token owner` and `master token` components

- It creates specific token artwork panel for owner token and token master token  representation.
- It adds support to new component in storybook.

Closes #11294

storybook/PagesModel.qml

@@ -173,6 +173,10 @@ ListModel {
         title: "ChatPermissionQualificationPanel"
         section: "Panels"
     }
+    ListElement {
+        title: "PrivilegedTokenArtworkPanel"
+        section: "Panels"
+    }
     ListElement {
          title: "BurnTokensPopup"
          section: "Popups"

storybook/pages/PrivilegedTokenArtworkPanelPage.qml

@@ -0,0 +1,98 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import AppLayouts.Communities.panels 1.0
+
+import Models 1.0
+import Storybook 1.0
+
+SplitView {
+    orientation: Qt.Vertical
+    SplitView.fillWidth: true
+
+    Logs { id: logs }
+
+    Pane {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        RowLayout {
+            spacing: 100
+            anchors.centerIn: parent
+
+            PrivilegedTokenArtworkPanel {
+                size: PrivilegedTokenArtworkPanel.Size.Small
+                artwork: doodles.checked ? ModelsData.collectibles.doodles : ModelsData.collectibles.mana
+                color: color1.checked ?  "#FFC4E9" : "#f44336"
+                isOwner: ownerMode.checked                
+                showTag: showTag.checked
+            }
+
+            PrivilegedTokenArtworkPanel {
+                size: PrivilegedTokenArtworkPanel.Size.Large
+                artwork: doodles.checked ? ModelsData.collectibles.doodles : ModelsData.collectibles.mana
+                color: color1.checked ?  "#FFC4E9" : "#f44336"
+                isOwner: ownerMode.checked
+                showTag: showTag.checked
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.fillWidth: true
+        SplitView.preferredHeight: 250
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+
+            CheckBox {
+                id: showTag
+
+                text: "Show tag"
+                checked: false
+            }
+
+            RowLayout {
+                RadioButton {
+                    id: ownerMode
+                    text: "Owner"
+                    checked: true
+                }
+
+                RadioButton {
+                    id: masterTokenMode
+                    text: "Token Master"
+                }
+            }
+
+            RowLayout {
+                RadioButton {
+                    id: color1
+
+                    text: "Light pink"
+                    checked: true
+                }
+
+                RadioButton {
+                    text: "Orange"
+                }
+            }
+
+            RowLayout {
+                RadioButton {
+                    id: doodles
+                    text: "Doodles"
+                    checked: true
+                }
+
+                RadioButton {
+                    text: "Mana"
+                }
+            }
+        }
+    }
+}

storybook/src/Models/ModelsData.qml

@@ -61,6 +61,8 @@ QtObject {
         readonly property string kitty5Big: Style.png("collectibles/MagicatBig")
         readonly property string superRare: Style.png("collectibles/SuperRare")
         readonly property string custom: Style.png("collectibles/SNT")
+        readonly property string doodles: Style.png("collectibles/Doodles")
+        readonly property string mana: Style.png("collectibles/MANA-token-icon")
     }
 
     readonly property QtObject networks: QtObject {

ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml

@@ -0,0 +1,90 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.1
+import QtGraphicalEffects 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import utils 1.0
+
+Control {
+    id: root
+
+    required property bool isOwner
+
+    property bool showTag: false
+    property int size: PrivilegedTokenArtworkPanel.Size.Small
+
+    property alias artwork: image.source
+    property alias color: icon.color
+
+    QtObject {
+        id: d
+
+        readonly property int imageSize: size === PrivilegedTokenArtworkPanel.Size.Small ? 80 : 186
+        readonly property int bgSize: size === PrivilegedTokenArtworkPanel.Size.Small ? 120 : 280
+        readonly property int iconSize: size === PrivilegedTokenArtworkPanel.Size.Small ? 16 : 38
+        readonly property int iconMargins: size === PrivilegedTokenArtworkPanel.Size.Small ? 8 : 16
+    }
+
+    enum Size {
+        Small,
+        Large
+    }
+
+    implicitWidth: d.bgSize
+    implicitHeight: implicitWidth
+
+    background: Rectangle {
+        color: "transparent"
+        radius: 8
+        border.color: Theme.palette.baseColor2
+    }
+
+    contentItem: Item {
+        StatusTagItem {
+            visible: root.showTag
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: -height/2
+            height: 20
+            text: qsTr("Included")
+            font.pixelSize: 11
+            font.bold: true
+            isReadonly: true
+            background: Rectangle {
+                color: Theme.palette.primaryColor1
+                radius: 38
+            }
+        }
+
+        Image {
+            id: image
+
+            anchors.centerIn: parent
+            width: d.imageSize
+            height: width
+            fillMode: Image.PreserveAspectFit
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: Rectangle {
+                    width: image.width
+                    height: width
+                    radius: width / 2
+                }
+            }
+        }
+
+        StatusIcon {
+            id: icon
+
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.margins: d.iconMargins
+            width: d.iconSize
+            height: width
+            icon: root.isOwner ? "crown" : "token-sale"
+        }
+    }
+}

ui/app/AppLayouts/Communities/panels/qmldir

@@ -18,6 +18,7 @@ OverviewSettingsPanel 1.0 OverviewSettingsPanel.qml
 PermissionConflictWarningPanel 1.0 PermissionConflictWarningPanel.qml
 PermissionQualificationPanel 1.0 PermissionQualificationPanel.qml
 PermissionsSettingsPanel 1.0 PermissionsSettingsPanel.qml
+PrivilegedTokenArtworkPanel 1.0 PrivilegedTokenArtworkPanel.qml
 ProfilePopupInviteFriendsPanel 1.0 ProfilePopupInviteFriendsPanel.qml
 ProfilePopupInviteMessagePanel 1.0 ProfilePopupInviteMessagePanel.qml
 ProfilePopupOverviewPanel 1.0 ProfilePopupOverviewPanel.qml