From 7fcd280fe0797f8ec3b5b06b30ee66a0c926e03c Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Tue, 2 Nov 2021 13:57:52 +0100
Subject: [PATCH] fix(@desktop/wallet): ensure NFT background colors are
 rendered correctly

Also adjust margins of collectible items to adhere to designs.

Fixes: #3981
---
 .../main/wallet_section/collectibles/collectibles/item.nim | 2 +-
 ui/app/AppLayouts/Wallet/views/CollectiblesView.qml        | 7 ++-----
 .../views/collectibles/CollectibleCollectionView.qml       | 1 +
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/modules/main/wallet_section/collectibles/collectibles/item.nim b/src/app/modules/main/wallet_section/collectibles/collectibles/item.nim
index a161fc1823..22d33139f5 100644
--- a/src/app/modules/main/wallet_section/collectibles/collectibles/item.nim
+++ b/src/app/modules/main/wallet_section/collectibles/collectibles/item.nim
@@ -48,7 +48,7 @@ proc initItem*(
   result.id = id
   result.name = name
   result.imageUrl = imageUrl
-  result.backgroundColor = backgroundColor
+  result.backgroundColor = if (backgroundColor == ""): "transparent" else: ("#" & backgroundColor)
   result.permalink = permalink
   result.properties = properties
   result.rankings = rankings
diff --git a/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml b/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml
index 0f587a802d..10d0f230da 100644
--- a/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml
+++ b/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml
@@ -58,18 +58,15 @@ Item {
                     id: collectionsRepeater
                     model: RootStore.collectionList
                     delegate: StatusExpandableItem {
-                        width: parent.width - 156
-                        anchors.horizontalCenter: parent.horizontalCenter
-
+                        anchors.left: parent.left
+                        anchors.right: parent.right
                         primaryText: model.name
                         image.source: model.imageUrl
                         type: StatusExpandableItem.Type.Secondary
                         expandableComponent:  CollectibleCollectionView {
                             slug: model.slug
                             anchors.left: parent.left
-                            anchors.leftMargin: Style.current.bigPadding
                             anchors.right: parent.right
-                            anchors.rightMargin: Style.current.bigPadding
                             onCollectibleClicked: {
                                 root.collectibleClicked();
                             }
diff --git a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleCollectionView.qml b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleCollectionView.qml
index 0b4ef8ca06..2019f73c69 100644
--- a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleCollectionView.qml
+++ b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleCollectionView.qml
@@ -29,6 +29,7 @@ Item {
         id: contentLoader
         width: parent.width
         anchors.top: parent.top
+        anchors.topMargin: 16
         anchors.horizontalCenter: parent.horizontalCenter
         sourceComponent: root.collectiblesLoaded ? loaded : loading
     }