Merge pull request #52 from cake-tech/CWA-203-transaction-and-trade-details

CWA-203 | applied new design to standart_list_row, transaction_detail…

lib/src/screens/trade_details/trade_details_page.dart

@@ -9,13 +9,15 @@ import 'package:cake_wallet/src/stores/settings/settings_store.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/transaction_details/standart_list_item.dart';
 import 'package:cake_wallet/src/screens/transaction_details/standart_list_row.dart';
+import 'package:cake_wallet/palette.dart';
 
 class TradeDetailsPage extends BasePage {
-  @override
-  String get title => S.current.trade_details_title;
 
   @override
-  bool get isModalBackButton => true;
+  Color get backgroundColor => PaletteDark.historyPanel;
+
+  @override
+  String get title => S.current.trade_details_title;
 
   @override
   Widget body(BuildContext context) {
@@ -26,7 +28,8 @@ class TradeDetailsPage extends BasePage {
           formatDefault: "dd.MM.yyyy, HH:mm");
 
     return Container(
-        padding: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20, right: 15),
+        color: PaletteDark.historyPanel,
+        padding: EdgeInsets.only(top: 20, bottom: 20),
         child: Observer(builder: (_) {
           final trade = exchangeStore.trade;
           final items = [
@@ -58,15 +61,22 @@ class TradeDetailsPage extends BasePage {
           }
 
           return ListView.separated(
-              separatorBuilder: (_, __) => Divider(
+              separatorBuilder: (_, __) => Container(
-                    color: Theme.of(context).dividerTheme.color,
+                height: 1,
-                    height: 1.0,
+                padding: EdgeInsets.only(left: 24),
-                  ),
+                color: PaletteDark.menuList,
-              padding:
+                child: Container(
-                  EdgeInsets.only(left: 25, top: 10, right: 25, bottom: 15),
+                  height: 1,
+                  color: PaletteDark.walletCardTopEndSync,
+                ),
+              ),
               itemCount: items.length,
               itemBuilder: (BuildContext context, int index) {
                 final item = items[index];
+
+                final isDrawTop = index == 0 ? true : false;
+                final isDrawBottom = index == items.length - 1 ? true : false;
+
                 return GestureDetector(
                     onTap: () {
                       Clipboard.setData(ClipboardData(text: '${item.value}'));
@@ -80,7 +90,11 @@ class TradeDetailsPage extends BasePage {
                       );
                     },
                     child: StandartListRow(
-                        title: '${item.title}', value: '${item.value}'));
+                      title: '${item.title}',
+                      value: '${item.value}',
+                      isDrawTop: isDrawTop,
+                      isDrawBottom: isDrawBottom,
+                    ));
               });
         }));
   }

lib/src/screens/transaction_details/standart_list_row.dart

@@ -2,29 +2,57 @@ import 'package:flutter/material.dart';
 import 'package:cake_wallet/palette.dart';
 
 class StandartListRow extends StatelessWidget {
-  StandartListRow({this.title, this.value});
+  StandartListRow({this.title, this.value, this.isDrawTop, this.isDrawBottom});
 
   final String title;
   final String value;
+  final bool isDrawTop;
+  final bool isDrawBottom;
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Column(
-      padding: const EdgeInsets.only(top: 10, bottom: 10),
+      children: <Widget>[
-      child: Column(
+        isDrawTop
-          crossAxisAlignment: CrossAxisAlignment.start,
+        ? Container(
-          children: <Widget>[
+          width: double.infinity,
-            Text(title,
+          height: 1,
-                style: TextStyle(
+          color: PaletteDark.walletCardTopEndSync,
-                    fontSize: 14,
+        )
-                    color: Theme.of(context).primaryTextTheme.overline.color),
+        : Offstage(),
-                textAlign: TextAlign.left),
+        Container(
-            Padding(
+          width: double.infinity,
-              padding: const EdgeInsets.only(top: 5),
+          color: PaletteDark.menuList,
-              child: Text(value,
+          child: Padding(
-                  style: TextStyle(fontSize: 14, color: Palette.wildDarkBlue)),
+            padding: const EdgeInsets.only(left: 24, top: 16, bottom: 16, right: 24),
-            )
+            child: Column(
-          ]),
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  Text(title,
+                      style: TextStyle(
+                          fontSize: 14,
+                          fontWeight: FontWeight.w600,
+                          color: PaletteDark.walletCardText),
+                      textAlign: TextAlign.left),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 12),
+                    child: Text(value,
+                        style: TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w600,
+                            color: Colors.white)),
+                  )
+                ]),
+          ),
+        ),
+        isDrawBottom
+        ? Container(
+          width: double.infinity,
+          height: 1,
+          color: PaletteDark.walletCardTopEndSync,
+        )
+        : Offstage(),
+      ],
     );
   }
 }

lib/src/screens/transaction_details/transaction_details_page.dart

@@ -8,6 +8,7 @@ import 'package:cake_wallet/src/stores/settings/settings_store.dart';
 import 'package:cake_wallet/src/screens/transaction_details/standart_list_item.dart';
 import 'package:cake_wallet/src/screens/transaction_details/standart_list_row.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/palette.dart';
 
 class TransactionDetailsPage extends BasePage {
   TransactionDetailsPage({this.transactionInfo});
@@ -15,7 +16,7 @@ class TransactionDetailsPage extends BasePage {
   final TransactionInfo transactionInfo;
 
   @override
-  bool get isModalBackButton => true;
+  Color get backgroundColor => PaletteDark.historyPanel;
 
   @override
   String get title => S.current.transaction_details_title;
@@ -77,17 +78,25 @@ class TransactionDetailsFormState extends State<TransactionDetailsForm> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: EdgeInsets.only(left: 20, right: 15, top: 10, bottom: 10),
+      color: PaletteDark.historyPanel,
+      padding: EdgeInsets.only(top: 20, bottom: 20),
       child: ListView.separated(
           separatorBuilder: (context, index) => Container(
-                height: 1,
+            height: 1,
-                color: Theme.of(context).dividerTheme.color,
+            padding: EdgeInsets.only(left: 24),
-              ),
+            color: PaletteDark.menuList,
-          padding: EdgeInsets.only(left: 25, top: 10, right: 25, bottom: 15),
+            child: Container(
+              height: 1,
+              color: PaletteDark.walletCardTopEndSync,
+            ),
+          ),
           itemCount: _items.length,
           itemBuilder: (context, index) {
             final item = _items[index];
 
+            final isDrawTop = index == 0 ? true : false;
+            final isDrawBottom = index == _items.length - 1 ? true : false;
+
             return GestureDetector(
               onTap: () {
                 Clipboard.setData(ClipboardData(text: item.value));
@@ -101,7 +110,11 @@ class TransactionDetailsFormState extends State<TransactionDetailsForm> {
                 );
               },
               child:
-                  StandartListRow(title: '${item.title}:', value: item.value),
+              StandartListRow(
+                  title: '${item.title}:',
+                  value: item.value,
+                  isDrawTop: isDrawTop,
+                  isDrawBottom: isDrawBottom),
             );
           }),
     );