feat(history-details): better text style

get10101 · Sep 13, 2023 · 65ff23f · 65ff23f
1 parent 32aacb1
commit 65ff23f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/mobile/lib/common/middle_ellipsised_text.dart b/mobile/lib/common/middle_ellipsised_text.dart
@@ -2,8 +2,9 @@ import 'package:flutter/material.dart';
 
 class MiddleEllipsisedText extends StatelessWidget {
   final String value;
+  final TextStyle? style;
 
-  const MiddleEllipsisedText(this.value, {super.key});
+  const MiddleEllipsisedText(this.value, {this.style, super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -17,18 +18,19 @@ class MiddleEllipsisedText extends StatelessWidget {
 
     if (textSize.width > MediaQuery.sizeOf(context).width - 100) {
       return Row(children: [
-        Text(value.substring(0, 3)),
+        Text(value.substring(0, 3), style: style),
         Expanded(
             child: Text(
           value.substring(3, value.length - 3),
           softWrap: false,
           overflow: TextOverflow.fade,
+          style: style,
         )),
-        const Text('...', overflow: TextOverflow.fade, softWrap: false),
-        Text(value.substring(value.length - 3, value.length)),
+        Text('...', overflow: TextOverflow.fade, softWrap: false, style: style),
+        Text(value.substring(value.length - 3, value.length), style: style),
       ]);
     } else {
-      return Text(value);
+      return Text(value, style: style);
     }
   }
 }
diff --git a/mobile/lib/features/wallet/wallet_history_item.dart b/mobile/lib/features/wallet/wallet_history_item.dart
@@ -151,7 +151,7 @@ abstract class WalletHistoryItem extends StatelessWidget {
           )),
       HistoryDetail(
           label: "When",
-          displayWidget: Text(timeago.format(data.timestamp)),
+          displayWidget: Text(timeago.format(data.timestamp), style: HistoryDetail.defaultValueStyle),
           value: dateFormat.format(data.timestamp)),
       ...getDetails(),
     ];
@@ -197,20 +197,25 @@ class HistoryDetail extends StatelessWidget {
   final String value;
   final Widget? displayWidget;
 
-  const HistoryDetail({super.key, required this.label, required this.value, this.displayWidget});
+  static const TextStyle defaultValueStyle = TextStyle(fontSize: 16);
+  static const TextStyle codeStyle = TextStyle(fontSize: 16, fontFamily: "Courier");
+  final TextStyle? valueStyle;
+
+  const HistoryDetail({super.key, required this.label, required this.value, this.displayWidget, this.valueStyle});
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 8.0),
-      child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
+    return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
         Padding(
           padding: const EdgeInsets.only(right: 8.0),
-          child: Text(label, style: const TextStyle(fontWeight: FontWeight.bold)),
+          child: Text(label, style: defaultValueStyle.copyWith(fontWeight: FontWeight.bold)),
         ),
         Expanded(
-          child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
-            Expanded(child: displayWidget ?? MiddleEllipsisedText(value)),
+          child: Row(children: [
+            Expanded(child: Align(
+              alignment: Alignment.centerRight,
+                child: displayWidget ?? MiddleEllipsisedText(value, style: valueStyle ?? defaultValueStyle))
+            ),
             IconButton(
                 padding: EdgeInsets.zero,
                 onPressed: () {
@@ -221,8 +226,7 @@ class HistoryDetail extends StatelessWidget {
                 icon: const Icon(Icons.copy, size: 18))
           ]),
         )
-      ]),
-    );
+    ]);
   }
 }
 
@@ -252,7 +256,7 @@ class TransactionIdText extends StatelessWidget {
 
     return Row(
       children: [
-        Expanded(child: MiddleEllipsisedText(txId)),
+        Expanded(child: MiddleEllipsisedText(txId, style: HistoryDetail.codeStyle)),
         IconButton(
             padding: EdgeInsets.zero,
             onPressed: () => launchUrl(Uri(
@@ -286,13 +290,13 @@ class LightningPaymentHistoryItem extends WalletHistoryItem {
       ),
       Visibility(
         visible: data.invoice != null,
-        child: HistoryDetail(label: "Lightning invoice", value: data.invoice ?? ''),
+        child: HistoryDetail(label: "Lightning invoice", value: data.invoice ?? '', valueStyle: HistoryDetail.codeStyle),
       ),
       HistoryDetail(label: "Invoice description", value: data.description),
-      HistoryDetail(label: "Payment hash", value: data.paymentHash),
+      HistoryDetail(label: "Payment hash", value: data.paymentHash, valueStyle: HistoryDetail.codeStyle),
       Visibility(
         visible: data.preimage != null,
-        child: HistoryDetail(label: "Payment preimage", value: data.preimage ?? ''),
+        child: HistoryDetail(label: "Payment preimage", value: data.preimage ?? '', valueStyle: HistoryDetail.codeStyle),
       ),
     ];
   }
@@ -320,7 +324,7 @@ class TradeHistoryItem extends WalletHistoryItem {
 
   @override
   List<Widget> getDetails() {
-    return [HistoryDetail(label: "Order", value: data.orderId)];
+    return [HistoryDetail(label: "Order", value: data.orderId, valueStyle: HistoryDetail.codeStyle)];
   }
 
   @override
@@ -352,8 +356,8 @@ class OrderMatchingFeeHistoryItem extends WalletHistoryItem {
   @override
   List<Widget> getDetails() {
     return [
-      HistoryDetail(label: "Order", value: data.orderId),
-      HistoryDetail(label: "Payment hash", value: data.paymentHash)
+      HistoryDetail(label: "Order", value: data.orderId, valueStyle: HistoryDetail.codeStyle),
+      HistoryDetail(label: "Payment hash", value: data.paymentHash, valueStyle: HistoryDetail.codeStyle)
     ];
   }