Wallet small design fixes (MystenLabs#5380)

* set border for active filter to transparent * fix cut off app section * fix list view bottom margin * change nft image and nft spacing
VOKA-AI · Oct 19, 2022 · b2b9116 · b2b9116
1 parent 8a99c67
commit b2b9116
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
         });
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,7 +66,7 @@ @@
     }
     .apps {
-        margin-bottom: 100px;
+        margin-bottom: 120px;
     }
     .app-cards {
@@ Expand Down @@