From 958118423df1c804aaf17b4282b1ebf9c400198c Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Fri, 2 Dec 2022 17:16:08 +0500
Subject: [PATCH 1/9] implementing free drop button design

---
 .../images/svg/curved_corner_red_bg.svg       |  13 --
 wallet/i18n/de.json                           |   5 +-
 wallet/i18n/en.json                           |   5 +-
 wallet/i18n/es.json                           |   5 +-
 wallet/i18n/id.json                           |   5 +-
 wallet/i18n/ja.json                           |   7 +-
 wallet/i18n/ko.json                           |   8 +-
 wallet/i18n/ru.json                           |   5 +-
 wallet/i18n/vi.json                           |   5 +-
 wallet/lib/generated/locale_keys.g.dart       |   3 +
 .../purchase_item/purchase_item_screen.dart   |  90 ++++----
 .../purchase_item/widgets/buy_nft_button.dart | 199 +++++++++---------
 wallet/lib/utils/constants.dart               |   1 +
 wallet/lib/utils/svg_util.dart                |   1 -
 14 files changed, 190 insertions(+), 162 deletions(-)
 delete mode 100644 wallet/assets/images/svg/curved_corner_red_bg.svg

diff --git a/wallet/assets/images/svg/curved_corner_red_bg.svg b/wallet/assets/images/svg/curved_corner_red_bg.svg
deleted file mode 100644
index 86d0b6040a..0000000000
--- a/wallet/assets/images/svg/curved_corner_red_bg.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="193" height="51" viewBox="0 0 193 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_b_6603_2257)">
-        <path d="M0 51L176.08 51L193 32.2301V-3.8147e-05L15.666 0L0 18L0 51Z" fill="#AF381F"/>
-    </g>
-    <defs>
-        <filter id="filter0_b_6603_2257" x="-10" y="-10" width="213" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feGaussianBlur in="BackgroundImageFix" stdDeviation="5"/>
-            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_6603_2257"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_6603_2257" result="shape"/>
-        </filter>
-    </defs>
-</svg>
\ No newline at end of file
diff --git a/wallet/i18n/de.json b/wallet/i18n/de.json
index aa7604cefb..48763647a5 100644
--- a/wallet/i18n/de.json
+++ b/wallet/i18n/de.json
@@ -369,5 +369,8 @@
   "ea": "ea",
   "maintenance_mode_message": "We ondervinden technische problemen en hebben tijdelijk de onderhoudsmodus gestart voor het oplossen van problemen. Maak je geen zorgen, je collectie is veilig. U kunt echter geen on-chain-transacties starten totdat we het probleem hebben opgelost en de normale functionaliteit hebben hersteld.",
   "maintenance_mode_header": "onderhoudsstand",
-  "invalid_mnemonic" : "Ungültige mnemonic"
+  "invalid_mnemonic": "Ungültige mnemonic",
+  "claim_now": "Beanspruche jetzt",
+  "remaining_and_total_editions": "{remaining} Von {total}",
+  "remaining": "verblieben"
 }
diff --git a/wallet/i18n/en.json b/wallet/i18n/en.json
index a7a560a9f2..22bdb165e9 100644
--- a/wallet/i18n/en.json
+++ b/wallet/i18n/en.json
@@ -371,5 +371,8 @@
   "ea": "ea",
   "maintenance_mode_message": "We are experiencing technical issues and have temporarily initiated maintenance mode for troubleshooting. Don't worry, your collection is safe. However, you cannot initiate on-chain transactions until we've resolved the problem and restored normal functionality.",
   "maintenance_mode_header": "Maintenance Mode",
-  "invalid_mnemonic" : "Invalid mnemonic"
+  "invalid_mnemonic": "Invalid mnemonic",
+  "claim_now": "Claim Now",
+  "remaining_and_total_editions": "{remaining} of {total}",
+  "remaining":"remaining"
 }
diff --git a/wallet/i18n/es.json b/wallet/i18n/es.json
index 7231d3fb4f..fd741f7025 100644
--- a/wallet/i18n/es.json
+++ b/wallet/i18n/es.json
@@ -369,5 +369,8 @@
   "ea": "cada uno",
   "maintenance_mode_message": "Estamos experimentando problemas técnicos y hemos iniciado temporalmente el modo de mantenimiento para solucionar problemas. No te preocupes, tu colección está segura. Sin embargo, no puede iniciar transacciones en cadena hasta que hayamos resuelto el problema y restablecido la funcionalidad normal.",
   "maintenance_mode_header": "Modo de mantenimiento",
-  "invalid_mnemonic" : "Mnemonic inválido"
+  "invalid_mnemonic": "Mnemonic inválido",
+  "claim_now": "Reclama ahora",
+  "remaining_and_total_editions": "{remaining} De {total}",
+  "remaining": "restante"
 }
\ No newline at end of file
diff --git a/wallet/i18n/id.json b/wallet/i18n/id.json
index 778168129c..03bf7e94a6 100644
--- a/wallet/i18n/id.json
+++ b/wallet/i18n/id.json
@@ -369,5 +369,8 @@
   "ea": "ea",
   "maintenance_mode_message": "Kami mengalami masalah teknis dan untuk sementara memulai mode pemeliharaan untuk pemecahan masalah. Jangan khawatir, koleksi Anda aman. Namun, Anda tidak dapat memulai transaksi on-chain sampai kami menyelesaikan masalah dan memulihkan fungsionalitas normal.",
   "maintenance_mode_header": "Mode Pemeliharaan",
-  "invalid_mnemonic" : "Mnemonic tidak valid"
+  "invalid_mnemonic": "Mnemonic tidak valid",
+  "claim_now": "Klaim Sekarang",
+  "remaining_and_total_editions": "{remaining} Dari {total}",
+  "remaining": "tersisa"
 }
\ No newline at end of file
diff --git a/wallet/i18n/ja.json b/wallet/i18n/ja.json
index 1c62499737..45018f1370 100644
--- a/wallet/i18n/ja.json
+++ b/wallet/i18n/ja.json
@@ -10,7 +10,7 @@
   "recommended": "おすすめされた",
   "following": "続く",
   "select_a_date": "日付を選択",
-  "network_error_description":"トランザクションの処理中にネットワーク エラーが発生しました。アカウントの更新をもう一度お試しください。再試行しても 2 回請求されることはありません。",
+  "network_error_description": "トランザクションの処理中にネットワーク エラーが発生しました。アカウントの更新をもう一度お試しください。再試行しても 2 回請求されることはありません。",
   "what_is_new": "新着情報",
   "trending": "トレンド",
   "price": "価格",
@@ -369,5 +369,8 @@
   "ea": "えー",
   "maintenance_mode_message": "技術的な問題が発生しており、トラブルシューティングのために一時的にメンテナンス モードを開始しました。心配はいりません。あなたのコレクションは安全です。ただし、問題が解決され、通常の機能が回復するまで、オンチェーン トランザクションを開始することはできません。",
   "maintenance_mode_header": "メンテナンスモード",
-  "invalid_mnemonic" : "無効 mnemonic"
+  "invalid_mnemonic": "無効 mnemonic",
+  "claim_now": "今すぐ請求",
+  "remaining_and_total_editions": "{remaining} の {total}",
+  "remaining": "残り"
 }
\ No newline at end of file
diff --git a/wallet/i18n/ko.json b/wallet/i18n/ko.json
index fd12f51331..aa73e753df 100644
--- a/wallet/i18n/ko.json
+++ b/wallet/i18n/ko.json
@@ -368,5 +368,11 @@
   "ea": "에아",
   "maintenance_mode_message": "기술적인 문제가 발생했으며 문제 해결을 위해 일시적으로 유지 관리 모드를 시작했습니다. 걱정하지 마세요. 컬렉션은 안전합니다. 그러나 문제를 해결하고 정상적인 기능을 복원할 때까지 온체인 트랜잭션을 시작할 수 없습니다.",
   "maintenance_mode_header": "유지 관리 모드",
-  "invalid_mnemonic" : "유효하지 않은 mnemonic"
+  "invalid_mnemonic" : "유효하지 않은 mnemonic",
+  "claim_now": "지금 청구하세요",
+  "remaining_and_total_editions": "{remaining} 의 {total}",
+  "remaining":"남은"
+
+
+
 }
\ No newline at end of file
diff --git a/wallet/i18n/ru.json b/wallet/i18n/ru.json
index 817650970f..a7ee5f0d51 100644
--- a/wallet/i18n/ru.json
+++ b/wallet/i18n/ru.json
@@ -369,5 +369,8 @@
   "ea": "шт.",
   "maintenance_mode_message": "У нас возникли технические проблемы, и мы временно запустили режим обслуживания для устранения неполадок. Не волнуйтесь, ваша коллекция в безопасности. Однако вы не можете инициировать транзакции в сети, пока мы не решим проблему и не восстановим нормальную работу.",
   "maintenance_mode_header": "Режим технического обслуживания",
-  "invalid_mnemonic" : "Инвалид mnemonic"
+  "invalid_mnemonic": "Инвалид mnemonic",
+  "claim_now": "Заявить сейчас",
+  "remaining_and_total_editions": "{remaining} Из {total}",
+  "remaining": "осталось"
 }
\ No newline at end of file
diff --git a/wallet/i18n/vi.json b/wallet/i18n/vi.json
index 8728bba467..d62b471a1f 100644
--- a/wallet/i18n/vi.json
+++ b/wallet/i18n/vi.json
@@ -369,5 +369,8 @@
   "ea": "ea",
   "maintenance_mode_message": "Chúng tôi đang gặp sự cố kỹ thuật và đã tạm thời bắt đầu chế độ bảo trì để khắc phục sự cố. Đừng lo lắng, bộ sưu tập của bạn vẫn an toàn. Tuy nhiên, bạn không thể bắt đầu các giao dịch trên chuỗi cho đến khi chúng tôi giải quyết xong sự cố và khôi phục chức năng bình thường.",
   "maintenance_mode_header": "Chế độ bảo trì",
-  "invalid_mnemonic" : "Không hợp lệ menmonic"
+  "invalid_mnemonic": "Không hợp lệ menmonic",
+  "claim_now": "yêu cầu ngay bây giờ",
+  "remaining_and_total_editions": "{remaining} Của {total}",
+  "remaining": "còn lại"
 }
\ No newline at end of file
diff --git a/wallet/lib/generated/locale_keys.g.dart b/wallet/lib/generated/locale_keys.g.dart
index 07d306f3d2..6031aa9827 100644
--- a/wallet/lib/generated/locale_keys.g.dart
+++ b/wallet/lib/generated/locale_keys.g.dart
@@ -373,5 +373,8 @@ abstract class  LocaleKeys {
   static const maintenance_mode_message = 'maintenance_mode_message';
   static const maintenance_mode_header = 'maintenance_mode_header';
   static const invalid_mnemonic = 'invalid_mnemonic';
+  static const claim_now = 'claim_now';
+  static const remaining_and_total_editions = 'remaining_and_total_editions';
+  static const remaining = 'remaining';
 
 }
diff --git a/wallet/lib/pages/purchase_item/purchase_item_screen.dart b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
index 35a6011dbe..db084f3c10 100644
--- a/wallet/lib/pages/purchase_item/purchase_item_screen.dart
+++ b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
@@ -311,7 +311,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                       ),
                       Text(
                         viewModel.viewsCount.toString(),
-                        style: TextStyle(color: Colors.white, fontSize: 11.sp, fontFamily: kUniversalFontFamily,fontWeight: FontWeight.w700),
+                        style: TextStyle(color: Colors.white, fontSize: 11.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
                       ),
                       SizedBox(
                         height: 5.h,
@@ -408,7 +408,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
         ),
         Text(
           viewModel.likesCount.toString(),
-          style: TextStyle(color: Colors.white, fontSize: 10.sp, fontFamily: kUniversalFontFamily,fontWeight: FontWeight.w700),
+          style: TextStyle(color: Colors.white, fontSize: 10.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
         ),
       ],
     );
@@ -441,46 +441,6 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
     return Stack(
       key: const Key(kPurchaseItemBottomSheetKey),
       children: [
-        Align(
-          alignment: Alignment.topRight,
-          child: ClipPath(
-            clipper: RightTriangleClipper(orientation: enums.Orientation.Orientation_SW),
-            child: Container(
-              color: AppColors.kDarkRed,
-              height: 50.h,
-              width: 50.w,
-              child: Center(
-                child: IconButton(
-                  key: const Key(kCloseBottomSheetKey),
-                  alignment: Alignment.topRight,
-                  padding: EdgeInsets.only(
-                    bottom: 8.h,
-                    left: 8.w,
-                  ),
-                  icon: const Icon(Icons.keyboard_arrow_down_outlined),
-                  onPressed: () {
-                    viewModel.toChangeCollapse();
-                  },
-                  iconSize: 32.h,
-                  color: Colors.white,
-                ),
-              ),
-            ),
-          ),
-        ),
-        Positioned.fill(
-          child: Align(
-            alignment: Alignment.bottomLeft,
-            child: ClipPath(
-              clipper: RightTriangleClipper(orientation: enums.Orientation.Orientation_NE),
-              child: Container(
-                color: AppColors.kDarkRed,
-                height: 30.h,
-                width: 30.w,
-              ),
-            ),
-          ),
-        ),
         ClipPath(
           clipper: ExpandedViewClipper(),
           child: BackdropFilter(
@@ -608,7 +568,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                               ),
                               Text(
                                 viewModel.viewsCount.toString(),
-                                style: TextStyle(color: Colors.white, fontSize: 11.sp, fontFamily: kUniversalFontFamily,fontWeight: FontWeight.w700),
+                                style: TextStyle(color: Colors.white, fontSize: 11.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
                               ),
                               SizedBox(
                                 height: 18.h,
@@ -684,7 +644,47 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
               ),
             ),
           ),
-        )
+        ),
+        Align(
+          alignment: Alignment.topRight,
+          child: ClipPath(
+            clipper: RightTriangleClipper(orientation: enums.Orientation.Orientation_SW),
+            child: Container(
+              color: AppColors.kDarkRed,
+              height: 50.r,
+              width: 50.r,
+              child: Center(
+                child: IconButton(
+                  key: const Key(kCloseBottomSheetKey),
+                  alignment: Alignment.topRight,
+                  padding: EdgeInsets.only(
+                    bottom: 12.h,
+                    left: 12.w,
+                  ),
+                  icon: const Icon(Icons.keyboard_arrow_down_outlined),
+                  onPressed: () {
+                    viewModel.toChangeCollapse();
+                  },
+                  iconSize: 32.h,
+                  color: Colors.white,
+                ),
+              ),
+            ),
+          ),
+        ),
+        Positioned.fill(
+          child: Align(
+            alignment: Alignment.bottomLeft,
+            child: ClipPath(
+              clipper: RightTriangleClipper(orientation: enums.Orientation.Orientation_NE),
+              child: Container(
+                color: AppColors.kDarkRed,
+                height: 30.h,
+                width: 30.w,
+              ),
+            ),
+          ),
+        ),
       ],
     );
   }
@@ -699,7 +699,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
             Flexible(
               child: Text(
                 nft.name,
-                style: TextStyle(color: Colors.white, fontSize: 18.sp, fontFamily: kUniversalFontFamily,fontWeight: FontWeight.w700),
+                style: TextStyle(color: Colors.white, fontSize: 18.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
               ),
diff --git a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
index 0c61fdda5d..1371b733ec 100644
--- a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
+++ b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
@@ -2,15 +2,12 @@ import 'package:auto_size_text/auto_size_text.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
 import 'package:pylons_wallet/main_prod.dart';
 import 'package:pylons_wallet/model/nft.dart';
 import 'package:pylons_wallet/pages/home/currency_screen/model/ibc_coins.dart';
 import 'package:pylons_wallet/pages/purchase_item/purchase_item_view_model.dart';
 import 'package:pylons_wallet/utils/constants.dart';
-import 'package:pylons_wallet/utils/svg_util.dart';
-
 import '../../../generated/locale_keys.g.dart';
 import '../clipper/top_left_bottom_right_clipper.dart';
 
@@ -23,42 +20,6 @@ class BuyNFTButton extends StatelessWidget {
   Widget getButtonContent(NFT nft, PurchaseItemViewModel viewModel) {
     final double btnHeight = 35.h;
     final double btnWidth = isTablet ? 160.w : 200.w;
-    if (double.parse(nft.price) == 0) {
-      return Container(
-        height: 60.h,
-        color: AppColors.kDarkRed.withOpacity(0.8),
-        child: Padding(
-          padding: EdgeInsets.symmetric(horizontal: 16.w),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              AutoSizeText(
-                LocaleKeys.claim_free_nft.tr(),
-                maxLines: 1,
-                style: TextStyle(color: AppColors.kWhite, fontSize: 16.sp, fontFamily: kUniversalFontFamily),
-              ),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  AutoSizeText(
-                    LocaleKeys.before_too_late.tr(),
-                    maxLines: 1,
-                    style: TextStyle(color: AppColors.kWhite, fontSize: 12.sp, fontFamily: kUniversalFontFamily),
-                  ),
-                  SizedBox(width: 8.w),
-                  SizedBox(
-                    height: 20.h,
-                    width: 20.h,
-                    child: nft.ibcCoins.getAssets(),
-                  ),
-                ],
-              ),
-            ],
-          ),
-        ),
-      );
-    }
     return Container(
       height: btnHeight,
       width: btnWidth,
@@ -69,69 +30,88 @@ class BuyNFTButton extends StatelessWidget {
         children: [
           Expanded(
             flex: 4,
-            child: Stack(
-              children: [
-                Align(
-                  alignment: Alignment.centerRight,
-                  child: SvgPicture.asset(
-                    SVGUtil.CURVED_CORNER_RED_BG,
-                    height: btnHeight,
-                    fit: BoxFit.fill,
-                  ),
-                ),
-                Center(
-                  child: AutoSizeText(
-                    LocaleKeys.buy_now.tr(),
-                    textAlign: TextAlign.center,
-                    style: TextStyle(
-                      color: Colors.white,
-                      fontSize: 12.sp,
-                      fontFamily: kUniversalFontFamily,
-                      fontWeight: FontWeight.w700,
-                    ),
-                    maxLines: 1,
-                  ),
-                ),
-              ],
+            child: ClipPath(
+              clipper: TopLeftBottomRightClipper(),
+              child: ColoredBox(
+                color: AppColors.kDarkRedColor,
+                child: getMessageContent(),
+              ),
             ),
           ),
-          Expanded(
-            flex: 3,
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                RichText(
-                  text: TextSpan(
-                    text: "\$${nft.ibcCoins.getCoinValueBasedOnDollar(nft.price)}",
+          getPriceAndAvailability(nft),
+        ],
+      ),
+    );
+  }
+
+  Expanded getPriceAndAvailability(NFT nft) {
+    if (double.parse(nft.price) != 0) {
+      return Expanded(
+        flex: 3,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            RichText(
+              text: TextSpan(
+                text: "\$${nft.ibcCoins.getCoinValueBasedOnDollar(nft.price)}",
+                style: TextStyle(
+                  color: AppColors.kWhite,
+                  fontSize: 10.sp,
+                  fontFamily: kUniversalFontFamily,
+                  fontWeight: FontWeight.w700,
+                ),
+                children: [
+                  TextSpan(
+                    text: " ${LocaleKeys.ea.tr()}.",
                     style: TextStyle(
                       color: AppColors.kWhite,
                       fontSize: 10.sp,
                       fontFamily: kUniversalFontFamily,
                       fontWeight: FontWeight.w700,
                     ),
-                    children: [
-                      TextSpan(
-                        text: " ${LocaleKeys.ea.tr()}.",
-                        style: TextStyle(
-                          color: AppColors.kWhite,
-                          fontSize: 10.sp,
-                          fontFamily: kUniversalFontFamily,
-                          fontWeight: FontWeight.w700,
-                        ),
-                      )
-                    ],
-                  ),
-                ),
-                Text(
-                  "${nft.quantity - nft.amountMinted} ${LocaleKeys.available.tr()}",
-                  style: TextStyle(
-                    color: AppColors.kGreyLight,
-                    fontSize: 9.sp,
-                    fontWeight: FontWeight.normal,
-                    fontFamily: kUniversalFontFamily,
-                  ),
-                ),
-              ],
+                  )
+                ],
+              ),
+            ),
+            Text(
+              "${nft.quantity - nft.amountMinted} ${LocaleKeys.available.tr()}",
+              style: TextStyle(
+                color: AppColors.kGreyLight,
+                fontSize: 9.sp,
+                fontWeight: FontWeight.normal,
+                fontFamily: kUniversalFontFamily,
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+    return Expanded(
+      flex: 3,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            LocaleKeys.remaining_and_total_editions.tr(
+              namedArgs: {
+                'remaining': '${nft.quantity - nft.amountMinted}',
+                'total': '${nft.quantity}',
+              },
+            ),
+            style: TextStyle(
+              color: AppColors.kGreyLight,
+              fontSize: 9.sp,
+              fontWeight: FontWeight.normal,
+              fontFamily: kUniversalFontFamily,
+            ),
+          ),
+          Text(
+            LocaleKeys.remaining.tr(),
+            style: TextStyle(
+              color: AppColors.kGreyLight,
+              fontSize: 9.sp,
+              fontWeight: FontWeight.normal,
+              fontFamily: kUniversalFontFamily,
             ),
           ),
         ],
@@ -139,6 +119,37 @@ class BuyNFTButton extends StatelessWidget {
     );
   }
 
+  Center getMessageContent() {
+    if (double.parse(nft.price) != 0) {
+      return Center(
+        child: AutoSizeText(
+          LocaleKeys.buy_now.tr(),
+          textAlign: TextAlign.center,
+          style: TextStyle(
+            color: AppColors.kWhite,
+            fontSize: 12.sp,
+            fontFamily: kUniversalFontFamily,
+            fontWeight: FontWeight.w700,
+          ),
+          maxLines: 1,
+        ),
+      );
+    }
+    return Center(
+      child: AutoSizeText(
+        LocaleKeys.claim_now.tr(),
+        textAlign: TextAlign.center,
+        style: TextStyle(
+          color: AppColors.kWhite,
+          fontSize: 12.sp,
+          fontFamily: kUniversalFontFamily,
+          fontWeight: FontWeight.w700,
+        ),
+        maxLines: 1,
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final viewModel = context.read<PurchaseItemViewModel>();
diff --git a/wallet/lib/utils/constants.dart b/wallet/lib/utils/constants.dart
index 9396665471..cec390b295 100644
--- a/wallet/lib/utils/constants.dart
+++ b/wallet/lib/utils/constants.dart
@@ -46,6 +46,7 @@ class AppColors {
   static Color kDarkDividerColor = const Color(0xffE5E5E5);
   static Color kTradeReceiptTextColor = const Color(0xff8F8FCE);
   static Color kHashtagColor = const Color(0xFFB6B6E8);
+  static Color kDarkRedColor = const Color(0xFFAF381F);
 
   static Color kUserInputTextColor = const Color(0xff8D8C8C);
   static Color kSettingsUserNameColor = kBlue;
diff --git a/wallet/lib/utils/svg_util.dart b/wallet/lib/utils/svg_util.dart
index f9384b5d81..2668d1e1b1 100644
--- a/wallet/lib/utils/svg_util.dart
+++ b/wallet/lib/utils/svg_util.dart
@@ -100,5 +100,4 @@ class SVGUtil {
   static const kSvgNftFormatAudio = 'assets/images/svg/nft_format_audio.svg';
   static const kSvgNftFormatPDF = 'assets/images/svg/nft_format_pdf.svg';
   static String BOTTOM_RIGHT_CURVED_GREY_BG = "assets/images/svg/bottom_right_curved_grey_bg.svg";
-  static String CURVED_CORNER_RED_BG = "assets/images/svg/curved_corner_red_bg.svg";
 }

From c91ee89eff2c5b776dfb6894ad42c1e608b5a5eb Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Fri, 2 Dec 2022 18:18:24 +0500
Subject: [PATCH 2/9] Added test cases

---
 .../purchase_item/widgets/buy_nft_button.dart | 11 +++-
 .../buttons/nft_buy_button_test.dart          | 65 ++++++++++++++++++-
 2 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
index 1371b733ec..79de704c5a 100644
--- a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
+++ b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
@@ -18,7 +18,7 @@ class BuyNFTButton extends StatelessWidget {
   const BuyNFTButton({Key? key, required this.onTapped, required this.nft}) : super(key: key);
 
   Widget getButtonContent(NFT nft, PurchaseItemViewModel viewModel) {
-    final double btnHeight = 35.h;
+    final double btnHeight = 37.h;
     final double btnWidth = isTablet ? 160.w : 200.w;
     return Container(
       height: btnHeight,
@@ -29,7 +29,7 @@ class BuyNFTButton extends StatelessWidget {
       child: Row(
         children: [
           Expanded(
-            flex: 4,
+            flex: getFlexForMessageContainer(),
             child: ClipPath(
               clipper: TopLeftBottomRightClipper(),
               child: ColoredBox(
@@ -44,6 +44,13 @@ class BuyNFTButton extends StatelessWidget {
     );
   }
 
+  int getFlexForMessageContainer() {
+    if (double.parse(nft.price) == 0) {
+      return 5;
+    }
+    return 4;
+  }
+
   Expanded getPriceAndAvailability(NFT nft) {
     if (double.parse(nft.price) != 0) {
       return Expanded(
diff --git a/wallet/test/widget_testing/components/buttons/nft_buy_button_test.dart b/wallet/test/widget_testing/components/buttons/nft_buy_button_test.dart
index 6481136b58..ad1742474d 100644
--- a/wallet/test/widget_testing/components/buttons/nft_buy_button_test.dart
+++ b/wallet/test/widget_testing/components/buttons/nft_buy_button_test.dart
@@ -1,4 +1,5 @@
 import 'dart:io';
+import 'package:dartz/dartz.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -20,10 +21,10 @@ void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
   final WalletsStore walletStore = MockWalletStore();
   final PurchaseItemViewModel viewModel = MockPurchaseItemViewModel();
+  GetIt.I.registerLazySingleton<PurchaseItemViewModel>(() => viewModel);
 
   testWidgets("check buy button is in expanded view or not", (tester) async {
     GetIt.I.registerLazySingleton<WalletsStore>(() => walletStore);
-    GetIt.I.registerLazySingleton<PurchaseItemViewModel>(() => viewModel);
 
     when(viewModel.collapsed).thenAnswer((realInvocation) => false);
     when(viewModel.nft).thenAnswer((realInvocation) => MOCK_NFT_FREE_VIDEO);
@@ -42,7 +43,7 @@ void main() {
   });
 
   testWidgets('should show the Free Drop NFT Buy Button and make sure user is able to tap', (tester) async {
-    final buyButtonFinder = find.text(LocaleKeys.claim_free_nft.tr());
+    final buyButtonFinder = find.text(LocaleKeys.claim_now.tr());
     var isTapped = false;
 
     await tester.setScreenSize();
@@ -89,10 +90,68 @@ void main() {
     expect(counter, 1);
   });
 
+  testWidgets('should show remaining quantity & total quantity in Free NFT Buy Button ', (tester) async {
+    await tester.setScreenSize();
+    await tester.testAppForWidgetTesting(ChangeNotifierProvider.value(
+      value: viewModel,
+      child: Material(
+        child: BuyNFTButton(
+          key: const Key(MOCK_BUY_BUTTON_KEY_VALUE),
+          onTapped: () {},
+          nft: MOCK_NFT_FREE_IMAGE,
+        ),
+      ),
+    ));
+    final buyButton = find.text(LocaleKeys.remaining_and_total_editions.tr(
+      namedArgs: {
+        'remaining': '${MOCK_NFT_FREE_IMAGE.quantity - MOCK_NFT_FREE_IMAGE.amountMinted}',
+        'total': '${MOCK_NFT_FREE_IMAGE.quantity}',
+      },
+    ));
+    expect(buyButton, findsOneWidget);
+  });
+
+  testWidgets('should show claim now in Free NFT Buy Button ', (tester) async {
+    await tester.setScreenSize();
+    await tester.testAppForWidgetTesting(ChangeNotifierProvider.value(
+      value: viewModel,
+      child: Material(
+        child: BuyNFTButton(
+          key: const Key(MOCK_BUY_BUTTON_KEY_VALUE),
+          onTapped: () {},
+          nft: MOCK_NFT_FREE_IMAGE,
+        ),
+      ),
+    ));
+    final buyButton = find.text(LocaleKeys.claim_now.tr());
+    expect(buyButton, findsOneWidget);
+  });
+
+  testWidgets('should show buy now in Premium NFT Buy Button ', (tester) async {
+    await tester.setScreenSize();
+    await tester.testAppForWidgetTesting(ChangeNotifierProvider.value(
+      value: viewModel,
+      child: Material(
+        child: BuyNFTButton(
+          key: const Key(MOCK_BUY_BUTTON_KEY_VALUE),
+          onTapped: () {},
+          nft: MOCK_NFT_PREMIUM,
+        ),
+      ),
+    ));
+    final buyButton = find.text(LocaleKeys.buy_now.tr());
+    expect(buyButton, findsOneWidget);
+  });
+
   testWidgets("Checkout Dialog should show on Buy Now Button Click", (tester) async {
     when(viewModel.collapsed).thenAnswer((realInvocation) => false);
-    when(viewModel.nft).thenAnswer((realInvocation) => MOCK_NFT_FREE_VIDEO);
+    when(viewModel.nft).thenAnswer((realInvocation) => MOCK_NFT_PREMIUM);
     when(viewModel.showBuyNowButton(isPlatformAndroid: Platform.isAndroid)).thenAnswer((realInvocation) => true);
+    when(viewModel.shouldShowSwipeToBuy(
+      selectedDenom: MOCK_NFT_PREMIUM.denom,
+      requiredAmount: double.parse(MOCK_NFT_PREMIUM.price) / kBigIntBase,
+    )).thenAnswer((realInvocation) => Future.value(const Right(true)));
+    await tester.setScreenSize();
     await tester.testAppForWidgetTesting(
       ChangeNotifierProvider<PurchaseItemViewModel>.value(
         value: viewModel,

From dc381b6881eb144fec3cc2414c5f13f73924d85c Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Fri, 2 Dec 2022 18:24:30 +0500
Subject: [PATCH 3/9] Code refactoring

---
 wallet/i18n/ko.json                           |  7 ++-----
 .../purchase_item/purchase_item_screen.dart   | 20 +++++++++----------
 .../purchase_item/widgets/buy_nft_button.dart |  4 ++--
 wallet/lib/utils/constants.dart               |  2 ++
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/wallet/i18n/ko.json b/wallet/i18n/ko.json
index aa73e753df..6a2cce0ce0 100644
--- a/wallet/i18n/ko.json
+++ b/wallet/i18n/ko.json
@@ -368,11 +368,8 @@
   "ea": "에아",
   "maintenance_mode_message": "기술적인 문제가 발생했으며 문제 해결을 위해 일시적으로 유지 관리 모드를 시작했습니다. 걱정하지 마세요. 컬렉션은 안전합니다. 그러나 문제를 해결하고 정상적인 기능을 복원할 때까지 온체인 트랜잭션을 시작할 수 없습니다.",
   "maintenance_mode_header": "유지 관리 모드",
-  "invalid_mnemonic" : "유효하지 않은 mnemonic",
+  "invalid_mnemonic": "유효하지 않은 mnemonic",
   "claim_now": "지금 청구하세요",
   "remaining_and_total_editions": "{remaining} 의 {total}",
-  "remaining":"남은"
-
-
-
+  "remaining": "남은"
 }
\ No newline at end of file
diff --git a/wallet/lib/pages/purchase_item/purchase_item_screen.dart b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
index db084f3c10..47da37fafb 100644
--- a/wallet/lib/pages/purchase_item/purchase_item_screen.dart
+++ b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
@@ -311,7 +311,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                       ),
                       Text(
                         viewModel.viewsCount.toString(),
-                        style: TextStyle(color: Colors.white, fontSize: 11.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
+                        style: TextStyle(color: AppColors.kWhite, fontSize: 11.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
                       ),
                       SizedBox(
                         height: 5.h,
@@ -342,7 +342,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                         icon: Icon(
                           Icons.keyboard_arrow_up,
                           size: 28.h,
-                          color: Colors.white,
+                          color: AppColors.kWhite,
                         ),
                         onPressed: () {
                           viewModel.toChangeCollapse();
@@ -377,7 +377,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
               children: [
                 Text(
                   kSoldOut,
-                  style: TextStyle(color: Colors.white, fontSize: 18.sp, fontWeight: FontWeight.bold),
+                  style: TextStyle(color: AppColors.kWhite, fontSize: 18.sp, fontWeight: FontWeight.bold),
                 ),
                 SizedBox(
                   width: 8.w,
@@ -408,7 +408,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
         ),
         Text(
           viewModel.likesCount.toString(),
-          style: TextStyle(color: Colors.white, fontSize: 10.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
+          style: TextStyle(color: AppColors.kWhite, fontSize: 10.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
         ),
       ],
     );
@@ -432,7 +432,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
       child: Image.asset(
         'assets/images/icons/${likedByMe ? 'like_full' : 'like'}.png',
         fit: BoxFit.fill,
-        color: likedByMe ? AppColors.kDarkRed : Colors.white,
+        color: likedByMe ? AppColors.kDarkRed : AppColors.kWhite,
       ),
     );
   }
@@ -568,7 +568,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                               ),
                               Text(
                                 viewModel.viewsCount.toString(),
-                                style: TextStyle(color: Colors.white, fontSize: 11.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
+                                style: TextStyle(color: AppColors.kWhite, fontSize: 11.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
                               ),
                               SizedBox(
                                 height: 18.h,
@@ -584,7 +584,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                               ),
                               Text(
                                 viewModel.likesCount.toString(),
-                                style: TextStyle(color: Colors.white, fontSize: 10.sp),
+                                style: TextStyle(color: AppColors.kWhite, fontSize: 10.sp),
                               ),
                               SizedBox(
                                 height: 20.h,
@@ -666,7 +666,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                     viewModel.toChangeCollapse();
                   },
                   iconSize: 32.h,
-                  color: Colors.white,
+                  color: AppColors.kWhite,
                 ),
               ),
             ),
@@ -699,7 +699,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
             Flexible(
               child: Text(
                 nft.name,
-                style: TextStyle(color: Colors.white, fontSize: 18.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
+                style: TextStyle(color: AppColors.kWhite, fontSize: 18.sp, fontFamily: kUniversalFontFamily, fontWeight: FontWeight.w700),
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
               ),
@@ -714,7 +714,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
             children: [
               TextSpan(
                 text: LocaleKeys.created_by.tr(),
-                style: TextStyle(color: Colors.white, fontSize: 11.sp),
+                style: TextStyle(color: AppColors.kWhite, fontSize: 11.sp),
               ),
               TextSpan(text: owner, style: TextStyle(color: AppColors.kCopyColor, fontSize: 13.sp)),
               WidgetSpan(
diff --git a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
index 79de704c5a..fae1b8ec92 100644
--- a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
+++ b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
@@ -101,8 +101,8 @@ class BuyNFTButton extends StatelessWidget {
           Text(
             LocaleKeys.remaining_and_total_editions.tr(
               namedArgs: {
-                'remaining': '${nft.quantity - nft.amountMinted}',
-                'total': '${nft.quantity}',
+                kRemaining: '${nft.quantity - nft.amountMinted}',
+                kTotal: '${nft.quantity}',
               },
             ),
             style: TextStyle(
diff --git a/wallet/lib/utils/constants.dart b/wallet/lib/utils/constants.dart
index cec390b295..7b40a1ebb7 100644
--- a/wallet/lib/utils/constants.dart
+++ b/wallet/lib/utils/constants.dart
@@ -467,3 +467,5 @@ const String kShareNftButtonExpandedKey = "share_nft_expanded";
 
 const String kGetFirebaseAppCheckTokenMethodChannelKey = "getFirebaseAppCheckTokenMethodChannel";
 const String kGetFirebaseAppCheckDebugTokenKey = "getFirebaseAppCheckDebugToken";
+const String kRemaining = 'remaining';
+const kTotal = 'total';

From 133b909cbf22d937b7759ea646d41120340a9a13 Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Mon, 5 Dec 2022 10:54:47 +0500
Subject: [PATCH 4/9] Added submit feedback in purchase screen

---
 .../purchase_item/purchase_item_screen.dart   | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/wallet/lib/pages/purchase_item/purchase_item_screen.dart b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
index 47da37fafb..2075cf5d7d 100644
--- a/wallet/lib/pages/purchase_item/purchase_item_screen.dart
+++ b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
@@ -27,6 +27,7 @@ import 'package:pylons_wallet/pages/purchase_item/widgets/purchase_video_player_
 import 'package:pylons_wallet/pages/purchase_item/widgets/purchase_video_progress_widget.dart';
 import 'package:pylons_wallet/pages/purchase_item/widgets/trade_receipt_dialog.dart';
 import 'package:pylons_wallet/pages/purchase_item/widgets/transaction_complete_dialog.dart';
+import 'package:pylons_wallet/pages/settings/screens/submit_feedback.dart';
 import 'package:pylons_wallet/utils/clipper_utils.dart';
 import 'package:pylons_wallet/utils/constants.dart';
 import 'package:pylons_wallet/utils/dependency_injection/dependency_injection.dart';
@@ -177,6 +178,43 @@ class _PurchaseItemContentState extends State<PurchaseItemContent> {
                 ),
               ),
             ),
+            Visibility(
+              visible: !viewModel.isViewingFullNft,
+              child: Padding(
+                padding: EdgeInsets.only(
+                  left: 8.w,
+                  right: 8.w,
+                  bottom: 8.h,
+                  top: MediaQuery.of(context).viewPadding.top.h,
+                ),
+                child: SizedBox(
+                  height: 100.h,
+                  width: double.infinity,
+                  child: ListTile(
+                    leading: GestureDetector(
+                      onTap: () {
+                        viewModel.destroyPlayers();
+                        Navigator.pop(context);
+                      },
+                      child: SvgPicture.asset(
+                        SVGUtil.OWNER_BACK_ICON,
+                        height: 25.h,
+                      ),
+                    ),
+                    trailing: GestureDetector(
+                      onTap: () {
+                        final SubmitFeedback submitFeedbackDialog = SubmitFeedback(context: context);
+                        submitFeedbackDialog.show();
+                      },
+                      child: SvgPicture.asset(
+                        SVGUtil.OWNER_REPORT,
+                        height: 25.h,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
             Visibility(
               visible: !viewModel.isViewingFullNft,
               child: const Align(

From 7b8513d9eadd51d050484d74420cd20cc72341b6 Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Mon, 5 Dec 2022 12:41:50 +0500
Subject: [PATCH 5/9] Design changes mentioned in PR

---
 wallet/assets/images/icons/eye_bold.svg       |  17 +++++++
 wallet/assets/images/icons/like_bold.png      | Bin 0 -> 7113 bytes
 .../widgets/tab_fields.dart                   |  46 ++++++++++--------
 .../purchase_item/purchase_item_screen.dart   |  32 ++++--------
 .../purchase_item/widgets/buy_nft_button.dart |  21 ++++++--
 wallet/lib/utils/svg_util.dart                |   1 +
 6 files changed, 69 insertions(+), 48 deletions(-)
 create mode 100644 wallet/assets/images/icons/eye_bold.svg
 create mode 100644 wallet/assets/images/icons/like_bold.png

diff --git a/wallet/assets/images/icons/eye_bold.svg b/wallet/assets/images/icons/eye_bold.svg
new file mode 100644
index 0000000000..530fa1dabd
--- /dev/null
+++ b/wallet/assets/images/icons/eye_bold.svg
@@ -0,0 +1,17 @@
+<svg width="31" height="22" viewBox="0 0 31 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_6759_3057)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.75876 1H21.2412L28 7.55483V13.5694L21.1562 19H7.84384L1 13.5694V7.55483L7.75876 1ZM8.97457 4L4 8.82448V12.1202L8.88949 16H20.1105L25 12.1202V8.82448L20.0254 4H8.97457ZM12.1039 5.77273H16.5197L20.733 9.85893L16.5197 13.9451H12.1039L7.89053 9.85893L12.1039 5.77273ZM13.3197 8.77273L12.1997 9.85893L13.3197 10.9451H15.3039L16.4239 9.85893L15.3039 8.77273H13.3197Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_6759_3057" x="0" y="0" width="31" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6759_3057"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6759_3057" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/wallet/assets/images/icons/like_bold.png b/wallet/assets/images/icons/like_bold.png
new file mode 100644
index 0000000000000000000000000000000000000000..77d0e538ecd850c777f4e18a148b3c729d28bc65
GIT binary patch
literal 7113
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

literal 0
HcmV?d00001

diff --git a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
index 09f1e787f9..ce759f0646 100644
--- a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
+++ b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
@@ -61,23 +61,14 @@ class _TabFieldState extends State<TabField> {
   Map<String, String> getNFTDetailsMap() {
     switch (widget.nft.type) {
       case NftType.TYPE_RECIPE:
-        return {
-          LocaleKeys.recipe_id.tr(): widget.nft.recipeID,
-          LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}",
-          LocaleKeys.ipfs_cid.tr(): widget.nft.cid
-        };
+        return {LocaleKeys.recipe_id.tr(): widget.nft.recipeID, LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}", LocaleKeys.ipfs_cid.tr(): widget.nft.cid};
       case NftType.TYPE_ITEM:
-        return {
-          LocaleKeys.recipe_id.tr(): widget.nft.recipeID
-        };
+        return {LocaleKeys.recipe_id.tr(): widget.nft.recipeID};
       case NftType.TYPE_TRADE:
         break;
     }
 
-    return {
-      LocaleKeys.recipe_id.tr(): widget.nft.recipeID,
-      LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}",
-      LocaleKeys.ipfs_cid.tr(): widget.nft.cid};
+    return {LocaleKeys.recipe_id.tr(): widget.nft.recipeID, LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}", LocaleKeys.ipfs_cid.tr(): widget.nft.cid};
   }
 
   @override
@@ -90,10 +81,10 @@ class _TabFieldState extends State<TabField> {
 
     final listDetails = nftDetail.entries
         .map(
-            (element) => _tabDetails(
-                field: element.key,
-                value: element.value,
-                customWidget: (element.key == LocaleKeys.recipe_id.tr() || element.key == LocaleKeys.ipfs_cid.tr()) && element.value.isNotEmpty ? _tabDetailsWithIcon(value: element.value) : null),
+          (element) => _tabDetails(
+              field: element.key,
+              value: element.value,
+              customWidget: (element.key == LocaleKeys.recipe_id.tr() || element.key == LocaleKeys.ipfs_cid.tr()) && element.value.isNotEmpty ? _tabDetailsWithIcon(value: element.value) : null),
         )
         .toList();
 
@@ -112,7 +103,10 @@ class _TabFieldState extends State<TabField> {
                     child: AutoSizeText(
                       widget.name,
                       maxLines: 1,
-                      style: const TextStyle(color: Colors.white),
+                      style: TextStyle(
+                        color: AppColors.kWhite,
+                        fontWeight: FontWeight.bold,
+                      ),
                     ),
                   ),
                   SizedBox(
@@ -157,10 +151,20 @@ class _TabFieldState extends State<TabField> {
                 children: [
                   Container(
                     width: 100.w,
-                    height: 10.h,
-                    decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.white, width: 2))),
+                    height: 6.h,
+                    decoration: BoxDecoration(
+                      border: Border(
+                        bottom: BorderSide(
+                          color: AppColors.kWhite,
+                          width: 2,
+                        ),
+                      ),
+                    ),
+                  ),
+                  CustomPaint(
+                    size: Size(6.w, 6.h),
+                    painter: DiagonalLinePainter(),
                   ),
-                  CustomPaint(size: Size(10.w, 10.h), painter: DiagonalLinePainter()),
                 ],
               ),
               SizedBox(
@@ -279,7 +283,7 @@ class DiagonalLinePainter extends CustomPainter {
   @override
   void paint(Canvas canvas, Size size) {
     final point1 = Offset(-0.5, size.height - 1);
-    final point2 = Offset(size.width, 0);
+    final point2 = Offset(size.width, -3);
     final paint = Paint()
       ..color = Colors.white
       ..strokeWidth = 2;
diff --git a/wallet/lib/pages/purchase_item/purchase_item_screen.dart b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
index 2075cf5d7d..79c6c43b6b 100644
--- a/wallet/lib/pages/purchase_item/purchase_item_screen.dart
+++ b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
@@ -11,6 +11,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
 import 'package:pylons_wallet/components/loading.dart';
+import 'package:pylons_wallet/main_prod.dart';
 import 'package:pylons_wallet/model/nft.dart';
 import 'package:pylons_wallet/pages/detailed_asset_view/widgets/nft_3d_asset.dart';
 import 'package:pylons_wallet/pages/detailed_asset_view/widgets/nft_image_asset.dart';
@@ -340,7 +341,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                   Column(
                     children: [
                       SvgPicture.asset(
-                        SVGUtil.OWNER_VIEWS,
+                        SVGUtil.OWNER_VIEWS_BOLD,
                         width: 20.w,
                         height: 15.h,
                       ),
@@ -465,10 +466,10 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
 
   Widget getLikeIcon({required bool likedByMe}) {
     return SizedBox(
-      height: 15.h,
-      width: 15.w,
+      height: 20.r,
+      width: 20.r,
       child: Image.asset(
-        'assets/images/icons/${likedByMe ? 'like_full' : 'like'}.png',
+        'assets/images/icons/${likedByMe ? 'like_full' : 'like_bold'}.png',
         fit: BoxFit.fill,
         color: likedByMe ? AppColors.kDarkRed : AppColors.kWhite,
       ),
@@ -597,7 +598,7 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
                           child: Column(
                             children: [
                               SvgPicture.asset(
-                                SVGUtil.OWNER_VIEWS,
+                                SVGUtil.OWNER_VIEWS_BOLD,
                                 width: 15.w,
                                 height: 15.h,
                               ),
@@ -689,15 +690,15 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
             clipper: RightTriangleClipper(orientation: enums.Orientation.Orientation_SW),
             child: Container(
               color: AppColors.kDarkRed,
-              height: 50.r,
-              width: 50.r,
+              height: 55.r,
+              width: 55.r,
               child: Center(
                 child: IconButton(
                   key: const Key(kCloseBottomSheetKey),
                   alignment: Alignment.topRight,
                   padding: EdgeInsets.only(
-                    bottom: 12.h,
-                    left: 12.w,
+                    bottom: 15.h,
+                    left: isTablet ? 16.w : 20.w,
                   ),
                   icon: const Icon(Icons.keyboard_arrow_down_outlined),
                   onPressed: () {
@@ -710,19 +711,6 @@ class _OwnerBottomDrawerState extends State<OwnerBottomDrawer> {
             ),
           ),
         ),
-        Positioned.fill(
-          child: Align(
-            alignment: Alignment.bottomLeft,
-            child: ClipPath(
-              clipper: RightTriangleClipper(orientation: enums.Orientation.Orientation_NE),
-              child: Container(
-                color: AppColors.kDarkRed,
-                height: 30.h,
-                width: 30.w,
-              ),
-            ),
-          ),
-        ),
       ],
     );
   }
diff --git a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
index fae1b8ec92..05b710a9c1 100644
--- a/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
+++ b/wallet/lib/pages/purchase_item/widgets/buy_nft_button.dart
@@ -30,11 +30,22 @@ class BuyNFTButton extends StatelessWidget {
         children: [
           Expanded(
             flex: getFlexForMessageContainer(),
-            child: ClipPath(
-              clipper: TopLeftBottomRightClipper(),
-              child: ColoredBox(
-                color: AppColors.kDarkRedColor,
-                child: getMessageContent(),
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                boxShadow: [
+                  BoxShadow(
+                    color: AppColors.kBlack.withOpacity(0.35),
+                    blurRadius: 20,
+                    spreadRadius: 2,
+                  ),
+                ],
+              ),
+              child: ClipPath(
+                clipper: TopLeftBottomRightClipper(),
+                child: ColoredBox(
+                  color: AppColors.kDarkRedColor,
+                  child: getMessageContent(),
+                ),
               ),
             ),
           ),
diff --git a/wallet/lib/utils/svg_util.dart b/wallet/lib/utils/svg_util.dart
index 2668d1e1b1..18c565fdba 100644
--- a/wallet/lib/utils/svg_util.dart
+++ b/wallet/lib/utils/svg_util.dart
@@ -38,6 +38,7 @@ class SVGUtil {
   static String OWNER_VERIFIED_ICON = 'assets/images/icons/verified.svg';
   static String OWNER_SHARE = 'assets/images/icons/share.svg';
   static String OWNER_VIEWS = 'assets/images/icons/views.svg';
+  static String OWNER_VIEWS_BOLD = 'assets/images/icons/eye_bold.svg';
   static String DEV_NET = "assets/images/icons/dev_net.svg";
   static String PYLONS_CURRENCY = "assets/images/icons/pylons_engagement_token.svg";
   static String QR_ICON = 'assets/images/icons/qr.svg';

From 349ad959c4d90cfd75914f027df0c77c83a3a1d2 Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Mon, 5 Dec 2022 12:45:22 +0500
Subject: [PATCH 6/9] Code refactoring

---
 .../purchase_item/purchase_item_screen.dart   | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/wallet/lib/pages/purchase_item/purchase_item_screen.dart b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
index 79c6c43b6b..d3d53293e8 100644
--- a/wallet/lib/pages/purchase_item/purchase_item_screen.dart
+++ b/wallet/lib/pages/purchase_item/purchase_item_screen.dart
@@ -156,29 +156,6 @@ class _PurchaseItemContentState extends State<PurchaseItemContent> {
         child: Stack(
           children: [
             getTypeWidget(viewModel),
-            Visibility(
-              visible: !viewModel.isViewingFullNft,
-              child: Padding(
-                padding: EdgeInsets.only(left: 8.w, right: 8.w, bottom: 8.h, top: MediaQuery.of(context).viewPadding.top.h),
-                child: SizedBox(
-                  height: 100.h,
-                  width: double.infinity,
-                  child: ListTile(
-                    leading: GestureDetector(
-                      onTap: () {
-                        viewModel.destroyPlayers();
-                        Navigator.pop(context);
-                      },
-                      child: SvgPicture.asset(
-                        SVGUtil.OWNER_BACK_ICON,
-                        height: 25.h,
-                      ),
-                    ),
-                    trailing: const SizedBox(),
-                  ),
-                ),
-              ),
-            ),
             Visibility(
               visible: !viewModel.isViewingFullNft,
               child: Padding(

From d29b59c639507920e365191d39a4158801cdd191 Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Mon, 5 Dec 2022 12:49:46 +0500
Subject: [PATCH 7/9] Code refactoring

---
 .../widgets/tab_fields.dart                   | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
index ce759f0646..6aba706941 100644
--- a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
+++ b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
@@ -61,14 +61,24 @@ class _TabFieldState extends State<TabField> {
   Map<String, String> getNFTDetailsMap() {
     switch (widget.nft.type) {
       case NftType.TYPE_RECIPE:
-        return {LocaleKeys.recipe_id.tr(): widget.nft.recipeID, LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}", LocaleKeys.ipfs_cid.tr(): widget.nft.cid};
+        return {
+          LocaleKeys.recipe_id.tr(): widget.nft.recipeID,
+          LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}",
+          LocaleKeys.ipfs_cid.tr(): widget.nft.cid,
+        };
       case NftType.TYPE_ITEM:
-        return {LocaleKeys.recipe_id.tr(): widget.nft.recipeID};
+        return {
+          LocaleKeys.recipe_id.tr(): widget.nft.recipeID,
+        };
       case NftType.TYPE_TRADE:
         break;
     }
 
-    return {LocaleKeys.recipe_id.tr(): widget.nft.recipeID, LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}", LocaleKeys.ipfs_cid.tr(): widget.nft.cid};
+    return {
+      LocaleKeys.recipe_id.tr(): widget.nft.recipeID,
+      LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}",
+      LocaleKeys.ipfs_cid.tr(): widget.nft.cid,
+    };
   }
 
   @override
@@ -77,14 +87,27 @@ class _TabFieldState extends State<TabField> {
 
     final nftDetail = getNFTDetailsMap();
 
-    final listOwnership = ownership.entries.map((element) => _tabDetails(field: element.key, value: element.value, customColor: element.key == LocaleKeys.owner.tr() ? Colors.red : null)).toList();
+    final listOwnership = ownership.entries
+        .map(
+          (element) => _tabDetails(
+            field: element.key,
+            value: element.value,
+            customColor: element.key == LocaleKeys.owner.tr() ? Colors.red : null,
+          ),
+        )
+        .toList();
 
     final listDetails = nftDetail.entries
         .map(
           (element) => _tabDetails(
-              field: element.key,
-              value: element.value,
-              customWidget: (element.key == LocaleKeys.recipe_id.tr() || element.key == LocaleKeys.ipfs_cid.tr()) && element.value.isNotEmpty ? _tabDetailsWithIcon(value: element.value) : null),
+            field: element.key,
+            value: element.value,
+            customWidget: (element.key == LocaleKeys.recipe_id.tr() || element.key == LocaleKeys.ipfs_cid.tr()) && element.value.isNotEmpty
+                ? _tabDetailsWithIcon(
+                    value: element.value,
+                  )
+                : null,
+          ),
         )
         .toList();
 

From 023340f0e7e78fb7dd26cfe2cfbe6e6a13d108c3 Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Mon, 5 Dec 2022 12:56:15 +0500
Subject: [PATCH 8/9] Code refactoring

---
 wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart | 4 ++--
 wallet/lib/utils/constants.dart                              | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
index 6aba706941..1375d097ad 100644
--- a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
+++ b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
@@ -92,7 +92,7 @@ class _TabFieldState extends State<TabField> {
           (element) => _tabDetails(
             field: element.key,
             value: element.value,
-            customColor: element.key == LocaleKeys.owner.tr() ? Colors.red : null,
+            customColor: element.key == LocaleKeys.owner.tr() ? AppColors.kRed : null,
           ),
         )
         .toList();
@@ -308,7 +308,7 @@ class DiagonalLinePainter extends CustomPainter {
     final point1 = Offset(-0.5, size.height - 1);
     final point2 = Offset(size.width, -3);
     final paint = Paint()
-      ..color = Colors.white
+      ..color = AppColors.kWhite
       ..strokeWidth = 2;
     canvas.drawLine(point1, point2, paint);
   }
diff --git a/wallet/lib/utils/constants.dart b/wallet/lib/utils/constants.dart
index 7b40a1ebb7..558f690937 100644
--- a/wallet/lib/utils/constants.dart
+++ b/wallet/lib/utils/constants.dart
@@ -25,6 +25,7 @@ class AppColors {
   static Color kYellow = const Color(0xffFED564);
   static Color kDarkPurple = const Color(0xff0A004A);
   static Color kDarkRed = const Color(0xffEF4421);
+  static Color kRed = Colors.red;
   static Color kDarkGreen = const Color(0xFF3A8977);
   static Color kWhite01 = const Color(0xFFFBFBFB);
   static Color kButtonColor = const Color(0xFFFFFFFF);

From 8ba8d42cef9084da9b87e6b67150bfa405887a7c Mon Sep 17 00:00:00 2001
From: Ahmad Hassan <ahmad.hassan@rnssol.com>
Date: Wed, 14 Dec 2022 10:03:17 +0500
Subject: [PATCH 9/9] Code refactoring

---
 .../lib/pages/detailed_asset_view/widgets/tab_fields.dart | 8 ++++----
 .../purchase_item_view_model_test.mocks.dart              | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
index af0983e35b..aa31c7ddfe 100644
--- a/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
+++ b/wallet/lib/pages/detailed_asset_view/widgets/tab_fields.dart
@@ -63,7 +63,7 @@ class _TabFieldState extends State<TabField> {
       case NftType.TYPE_RECIPE:
         return {
           LocaleKeys.recipe_id.tr(): widget.nft.recipeID,
-          LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height}",
+          LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height} ${widget.nft.fileExtension.toUpperCase()}",
           LocaleKeys.ipfs_cid.tr(): widget.nft.cid,
         };
       case NftType.TYPE_ITEM:
@@ -76,7 +76,7 @@ class _TabFieldState extends State<TabField> {
 
     return {
       LocaleKeys.recipe_id.tr(): widget.nft.recipeID,
-      LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height} ${widget.nft.fileExtension}",
+      LocaleKeys.resolution.tr(): "${widget.nft.width}x${widget.nft.height} ${widget.nft.fileExtension.toUpperCase()}",
       LocaleKeys.ipfs_cid.tr(): widget.nft.cid,
     };
   }
@@ -126,7 +126,7 @@ class _TabFieldState extends State<TabField> {
                     child: AutoSizeText(
                       widget.name,
                       maxLines: 1,
-                      style: TextStyle(
+                      style: const TextStyle(
                         color: AppColors.kWhite,
                         fontWeight: FontWeight.bold,
                       ),
@@ -175,7 +175,7 @@ class _TabFieldState extends State<TabField> {
                   Container(
                     width: 100.w,
                     height: 6.h,
-                    decoration: BoxDecoration(
+                    decoration: const BoxDecoration(
                       border: Border(
                         bottom: BorderSide(
                           color: AppColors.kWhite,
diff --git a/wallet/test/unit_testing/pages/purchase_item/purchase_item_view_model_test.mocks.dart b/wallet/test/unit_testing/pages/purchase_item/purchase_item_view_model_test.mocks.dart
index cc813f873d..612a49a4d6 100644
--- a/wallet/test/unit_testing/pages/purchase_item/purchase_item_view_model_test.mocks.dart
+++ b/wallet/test/unit_testing/pages/purchase_item/purchase_item_view_model_test.mocks.dart
@@ -2,7 +2,7 @@
 // in pylons_wallet/test/unit_testing/pages/purchase_item/purchase_item_view_model_test.dart.
 // Do not manually edit this file.
 
-// ignore_for_file: no_leading_underscores_for_library_prefixes
+// ignore_for_file: no_leading_underscores_for_library_prefixes, must_be_immutable
 import 'dart:async' as _i8;
 
 import 'package:dartz/dartz.dart' as _i2;