rework trade details screen (#449)

* create standart list card item

* create standart list status item

* update localization

* fix date format

* fix theme gradient

* PR comments

* fix issues from code review

lib/src/screens/dashboard/widgets/sync_indicator_icon.dart

@@ -2,20 +2,56 @@ import 'package:flutter/material.dart';
 import 'package:cake_wallet/palette.dart';
 
 class SyncIndicatorIcon extends StatelessWidget {
-  SyncIndicatorIcon({this.isSynced});
+  SyncIndicatorIcon(
+      {this.boolMode = true,
+      this.isSynced = false,
+      this.value = waiting,
+      this.size = 4.0});
 
+  final bool boolMode;
   final bool isSynced;
+  final String value;
+  final double size;
+
+  static const String waiting = 'waiting';
+  static const String actionRequired = 'action required';
+  static const String created = 'created';
+  static const String fetching = 'fetching';
+  static const String finished = 'finished';
 
   @override
   Widget build(BuildContext context) {
+    Color indicatorColor;
+
+    if (boolMode) {
+      indicatorColor = isSynced
+          ? PaletteDark.brightGreen
+          : Theme.of(context).textTheme.caption.color;
+    } else {
+      switch (value.toLowerCase()) {
+        case waiting:
+          indicatorColor = Colors.red;
+          break;
+        case actionRequired:
+          indicatorColor = Theme.of(context).textTheme.display3.decorationColor;
+          break;
+        case created:
+          indicatorColor = PaletteDark.brightGreen;
+          break;
+        case fetching:
+          indicatorColor = Colors.red;
+          break;
+        case finished:
+          indicatorColor = PaletteDark.brightGreen;
+          break;
+        default:
+          indicatorColor = Colors.red;
+      }
+    }
     return Container(
-      height: 4,
-      width: 4,
-      decoration: BoxDecoration(
-          shape: BoxShape.circle,
-          color: isSynced
-              ? PaletteDark.brightGreen
-              : Theme.of(context).textTheme.caption.color),
-    );
+        height: size,
+        width: size,
+        decoration:
+            BoxDecoration(shape: BoxShape.circle, color: indicatorColor));
   }
 }

lib/src/screens/trade_details/trade_details_list_card.dart

@@ -0,0 +1,35 @@
+import 'package:cake_wallet/src/screens/transaction_details/standart_list_item.dart';
+import 'package:cw_core/crypto_currency.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:cake_wallet/generated/i18n.dart';
+
+class TradeDetailsListCardItem extends StandartListItem {
+  TradeDetailsListCardItem(
+      {String title,
+      String value,
+      this.id,
+      this.createdAt,
+      this.pair,
+      this.onTap})
+      : super(title: title, value: value);
+
+  factory TradeDetailsListCardItem.tradeDetails(
+      {@required String id,
+      @required String createdAt,
+      @required CryptoCurrency from,
+      @required CryptoCurrency to,
+      @required Function onTap}) {
+    return TradeDetailsListCardItem(
+        id: '${S.current.trade_details_id}  ${formatAsText(id)}',
+        createdAt: formatAsText(createdAt),
+        pair: '${formatAsText(from)} → ${formatAsText(to)}',
+        onTap: onTap);
+  }
+
+  final String id;
+  final String createdAt;
+  final String pair;
+  final Function onTap;
+
+  static String formatAsText<T>(T value) => value?.toString() ?? '';
+}

lib/src/screens/trade_details/trade_details_page.dart

@@ -1,4 +1,6 @@
 import 'package:cake_wallet/src/widgets/standard_list.dart';
+import 'package:cake_wallet/src/widgets/standart_list_card.dart';
+import 'package:cake_wallet/src/widgets/standart_list_status_row.dart';
 import 'package:cake_wallet/utils/show_bar.dart';
 import 'package:cake_wallet/view_model/trade_details_view_model.dart';
 import 'package:flutter/material.dart';
@@ -9,6 +11,8 @@ import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/widgets/standart_list_row.dart';
 import 'package:cake_wallet/src/screens/trade_details/track_trade_list_item.dart';
+import 'package:cake_wallet/src/screens/trade_details/trade_details_list_card.dart';
+import 'package:cake_wallet/src/screens/trade_details/trade_details_status_item.dart';
 
 class TradeDetailsPage extends BasePage {
   TradeDetailsPage(this.tradeDetailsViewModel);
@@ -58,7 +62,23 @@ class TradeDetailsPageBodyState extends State<TradeDetailsPageBody> {
                   onTap: item.onTap,
                   child: StandartListRow(
                       title: '${item.title}', value: '${item.value}'));
-            } else {
+            }
+
+            if (item is DetailsListStatusItem) {
+              return StandartListStatusRow(
+                  title: item.title,
+                  value: item.value);
+            }
+
+            if (item is TradeDetailsListCardItem) {
+              return TradeDatailsStandartListCard(
+                  id: item.id,
+                  create: item.createdAt,
+                  pair: item.pair,
+                  currentTheme: tradeDetailsViewModel.settingsStore.currentTheme.type,
+                  onTap: item.onTap,);
+            }
+
               return GestureDetector(
                   onTap: () {
                     Clipboard.setData(ClipboardData(text: '${item.value}'));
@@ -66,7 +86,6 @@ class TradeDetailsPageBodyState extends State<TradeDetailsPageBody> {
                   },
                   child: StandartListRow(
                       title: '${item.title}', value: '${item.value}'));
-            }
           });
     });
   }

lib/src/screens/trade_details/trade_details_status_item.dart

@@ -0,0 +1,7 @@
+import 'package:cake_wallet/src/screens/transaction_details/standart_list_item.dart';
+
+class DetailsListStatusItem extends StandartListItem {
+  DetailsListStatusItem(
+      {String title, String value})
+      : super(title: title, value: value);
+}

lib/src/widgets/standard_list.dart

@@ -1,4 +1,6 @@
 import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/src/widgets/standart_list_card.dart';
+import 'package:cake_wallet/src/widgets/standart_list_status_row.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
@@ -212,6 +214,10 @@ class SectionStandardList extends StatelessWidget {
             return Container();
           }
 
+          if (row is StandartListStatusRow || row is TradeDatailsStandartListCard) {
+            return Container();
+          }
+
           final nextRow = totalRows[index + 1];
 
           // If current row is pre last and last row is separator.

lib/src/widgets/standart_list_card.dart

@@ -0,0 +1,77 @@
+import 'package:cake_wallet/palette.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:cake_wallet/themes/theme_base.dart';
+
+class TradeDatailsStandartListCard extends StatelessWidget {
+  TradeDatailsStandartListCard(
+      {this.id, this.create, this.pair, this.onTap, this.currentTheme});
+
+  final String id;
+  final String create;
+  final String pair;
+  final ThemeType currentTheme;
+  final Function onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final darkTheme = currentTheme == ThemeType.dark;
+
+    final baseGradient = LinearGradient(colors: [
+      Theme.of(context).primaryTextTheme.subtitle.color,
+      Theme.of(context).primaryTextTheme.subtitle.decorationColor,
+    ], begin: Alignment.centerLeft, end: Alignment.centerRight);
+
+    final gradient = LinearGradient(colors: [
+      PaletteDark.wildNightBlue,
+      PaletteDark.oceanBlue,
+    ], begin: Alignment.bottomCenter, end: Alignment.topCenter);
+
+    final textColor = Colors.white;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
+      child: GestureDetector(
+        onTap: () => onTap(context),
+        child: Container(
+          decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(15.0),
+              gradient: darkTheme ? gradient : baseGradient),
+          child: Padding(
+            padding:
+                const EdgeInsets.symmetric(horizontal: 20.0, vertical: 16.0),
+            child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(id,
+                      style: TextStyle(
+                          fontSize: 16,
+                          fontFamily: 'Lato',
+                          fontWeight: FontWeight.w400,
+                          color: textColor)),
+                  SizedBox(
+                    height: 8,
+                  ),
+                  Text(create,
+                      style: TextStyle(
+                          fontSize: 12,
+                          fontFamily: 'Lato',
+                          fontWeight: FontWeight.w400,
+                          color: textColor)),
+                  SizedBox(
+                    height: 35,
+                  ),
+                  Text(pair,
+                      style: TextStyle(
+                          fontSize: 24,
+                          fontFamily: 'Lato',
+                          fontWeight: FontWeight.bold,
+                          color: textColor)),
+                ]),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/widgets/standart_list_status_row.dart

@@ -0,0 +1,66 @@
+import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class StandartListStatusRow extends StatelessWidget {
+  StandartListStatusRow({this.title, this.value});
+
+  final String title;
+  final String value;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      color: Theme.of(context).backgroundColor,
+      child: Padding(
+        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.w500,
+                      color: Theme.of(context).primaryTextTheme.overline.color),
+                  textAlign: TextAlign.left),
+              Padding(
+                padding: const EdgeInsets.only(top: 12),
+                child: Container(
+                  decoration: BoxDecoration(
+                    color: Theme.of(context).accentTextTheme.display2.color,
+                    borderRadius: BorderRadius.circular(30.0),
+                  ),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: <Widget>[
+                        SyncIndicatorIcon(
+                          boolMode: false,
+                          value: value,
+                          size: 6,
+                        ),
+                        SizedBox(
+                          width: 5,
+                        ),
+                        Text(value,
+                            style: TextStyle(
+                                fontSize: 16,
+                                fontWeight: FontWeight.w500,
+                                color: Theme.of(context)
+                                    .primaryTextTheme
+                                    .title
+                                    .color))
+                      ],
+                    ),
+                  ),
+                ),
+              )
+            ]),
+      ),
+    );
+  }
+}