From b2b9116066e7042c885a265325619271e2299f0e Mon Sep 17 00:00:00 2001
From: Jibz1 <godwinjibs@gmail.com>
Date: Wed, 19 Oct 2022 08:49:05 -0700
Subject: [PATCH] Wallet small design fixes (#5380)

* set border for active filter to transparent

* fix cut off app section

* fix list view bottom margin

* change nft image and nft spacing
---
 .../ui/app/components/filters-tags/Filters.module.scss   | 1 +
 .../ui/app/components/nft-display/NFTDisplay.module.scss | 2 +-
 .../ui/app/components/sui-apps/Playground.module.scss    | 2 +-
 .../src/ui/app/pages/home/nfts/NFTPage.module.scss       | 4 ++--
 apps/wallet/src/ui/app/redux/slices/sui-objects/NFT.ts   | 9 +++++----
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/filters-tags/Filters.module.scss b/apps/wallet/src/ui/app/components/filters-tags/Filters.module.scss
index 0578936078a58..39f2b3340aa4c 100644
--- a/apps/wallet/src/ui/app/components/filters-tags/Filters.module.scss
+++ b/apps/wallet/src/ui/app/components/filters-tags/Filters.module.scss
@@ -20,6 +20,7 @@
         &.active {
             background: v.use(v.$colors-nav-item-highlighted-color);
             color: colors.$white;
+            border: 1px solid transparent;
         }
     }
 }
diff --git a/apps/wallet/src/ui/app/components/nft-display/NFTDisplay.module.scss b/apps/wallet/src/ui/app/components/nft-display/NFTDisplay.module.scss
index f4f65ee6862ed..04cb2d28bcd57 100644
--- a/apps/wallet/src/ui/app/components/nft-display/NFTDisplay.module.scss
+++ b/apps/wallet/src/ui/app/components/nft-display/NFTDisplay.module.scss
@@ -75,7 +75,7 @@
     }
 
     .nftfields {
-        line-height: 12px;
+        line-height: 150%;
         text-decoration: none;
         font-weight: 500;
         font-size: 13px;
diff --git a/apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss b/apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss
index 75d6df6b55a85..890cc060f12b6 100644
--- a/apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss
+++ b/apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss
@@ -66,7 +66,7 @@
 }
 
 .apps {
-    margin-bottom: 100px;
+    margin-bottom: 120px;
 }
 
 .app-cards {
diff --git a/apps/wallet/src/ui/app/pages/home/nfts/NFTPage.module.scss b/apps/wallet/src/ui/app/pages/home/nfts/NFTPage.module.scss
index c770f59dc8efb..05ff339ff6dc9 100644
--- a/apps/wallet/src/ui/app/pages/home/nfts/NFTPage.module.scss
+++ b/apps/wallet/src/ui/app/pages/home/nfts/NFTPage.module.scss
@@ -1,6 +1,6 @@
 .nft-gallery-container {
     margin-top: 20px;
-    padding-bottom: 50px;
+    padding-bottom: 65px;
     flex-grow: 1;
     padding-left: 25px;
     padding-right: 25px;
@@ -12,7 +12,7 @@
     .nft-gallery {
         display: grid;
         grid-template-columns: repeat(1, 1fr) 50%;
-        grid-gap: 30px 10px;
+        grid-gap: 16px 10px;
 
         a {
             text-decoration: none;
diff --git a/apps/wallet/src/ui/app/redux/slices/sui-objects/NFT.ts b/apps/wallet/src/ui/app/redux/slices/sui-objects/NFT.ts
index 66a0d1bdbfa0a..08a6f364331db 100644
--- a/apps/wallet/src/ui/app/redux/slices/sui-objects/NFT.ts
+++ b/apps/wallet/src/ui/app/redux/slices/sui-objects/NFT.ts
@@ -7,6 +7,9 @@ import type {
     SuiExecuteTransactionResponse,
 } from '@mysten/sui.js';
 
+const DEFAULT_NFT_IMAGE =
+    'ipfs://QmZPWWy5Si54R3d26toaqRiqvCH7HkGdXkxwUgCm2oKKM2?filename=img-sq-01.png';
+
 // TODO: Remove this after internal dogfooding
 export class ExampleNFT {
     /**
@@ -29,8 +32,7 @@ export class ExampleNFT {
             arguments: [
                 name || 'Example NFT',
                 description || 'An NFT created by Sui Wallet',
-                imageUrl ||
-                    'ipfs://bafkreibngqhl3gaa7daob4i2vccziay2jjlp435cf66vhono7nrvww53ty',
+                imageUrl || DEFAULT_NFT_IMAGE,
             ],
             gasBudget: 10000,
         });
@@ -55,8 +57,7 @@ export class ExampleNFT {
             arguments: [
                 name || 'Example NFT',
                 description || 'An NFT created by Sui Wallet',
-                imageUrl ||
-                    'ipfs://bafkreibngqhl3gaa7daob4i2vccziay2jjlp435cf66vhono7nrvww53ty',
+                imageUrl || DEFAULT_NFT_IMAGE,
             ],
             gasBudget: 10000,
         });