From ea462bc9c0264a9c0fbccf2366f0048bd3936697 Mon Sep 17 00:00:00 2001 From: Richard Holzeis Date: Thu, 7 Mar 2024 14:33:22 +0100 Subject: [PATCH 1/3] chore(app): Improve text component alignments on channel config modal --- .../features/trade/channel_configuration.dart | 31 +++++++------------ 1 file changed, 12 insertions(+), 19 deletions(-) diff --git a/mobile/lib/features/trade/channel_configuration.dart b/mobile/lib/features/trade/channel_configuration.dart index 3e1ad576d..16e84349b 100644 --- a/mobile/lib/features/trade/channel_configuration.dart +++ b/mobile/lib/features/trade/channel_configuration.dart @@ -141,25 +141,21 @@ class _ChannelConfiguration extends State { return Form( key: _formKey, child: Container( - padding: const EdgeInsets.only(top: 5, left: 20, right: 20), + padding: const EdgeInsets.only(top: 20, left: 20, right: 20), child: Column(children: [ const Text("DLC Channel Configuration", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17)), - const SizedBox( - height: 20, - ), - RichText( - text: TextSpan( - text: - "This is your first trade. 10101 will open a DLC channel with you, creating your position in the process.\n\nPlease specify your preferred channel size, impacting how much you will be able to win up to.", - style: DefaultTextStyle.of(context).style, - )), - const SizedBox( - height: 10, - ), + const SizedBox(height: 20), + Text( + "This is your first trade. 10101 will open a DLC channel with you, creating your position in the process.", + style: DefaultTextStyle.of(context).style), + const SizedBox(height: 10), + Text( + "Please specify your preferred channel size, impacting how much you will be able to win up to.", + style: DefaultTextStyle.of(context).style), Center( child: Container( - padding: const EdgeInsets.only(top: 10), + padding: const EdgeInsets.only(top: 20), child: Column( children: [ Wrap( @@ -203,9 +199,7 @@ class _ChannelConfiguration extends State { infoText: "Your total collateral in the dlc channel.\n\nChoose a bigger amount here if you plan to make bigger trades in the future and don't want to open a new channel.", )), - const SizedBox( - width: 10, - ), + const SizedBox(width: 10), Flexible( child: AmountTextField( value: counterpartyCollateral, @@ -214,7 +208,6 @@ class _ChannelConfiguration extends State { ], ), ), - const SizedBox(height: 10), ValueDataRow( type: ValueType.amount, value: ownTotalCollateral, @@ -244,7 +237,7 @@ class _ChannelConfiguration extends State { .add(fundingTxFee) .add(channelFeeReserve), label: "Total"), - const SizedBox(height: 17), + const SizedBox(height: 10), Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisAlignment: MainAxisAlignment.end, From 06412ec1de45dbcc28042cb4caed0548f987dfb9 Mon Sep 17 00:00:00 2001 From: Richard Holzeis Date: Thu, 7 Mar 2024 14:34:21 +0100 Subject: [PATCH 2/3] chore(app): Align text input field heights --- mobile/lib/common/amount_text_field.dart | 23 +++++++++---------- .../common/amount_text_input_form_field.dart | 2 +- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/mobile/lib/common/amount_text_field.dart b/mobile/lib/common/amount_text_field.dart index 7c3a4fff4..a2196a1c4 100644 --- a/mobile/lib/common/amount_text_field.dart +++ b/mobile/lib/common/amount_text_field.dart @@ -21,18 +21,17 @@ class _AmountTextState extends State { return InputDecorator( decoration: InputDecoration( - border: const OutlineInputBorder(), - labelText: widget.label, - labelStyle: const TextStyle(color: Colors.black87), - errorStyle: TextStyle( - color: Colors.red[900], - ), - errorText: widget.error, - filled: true, - suffixIcon: widget.suffixIcon, - fillColor: Colors.grey[50], - ), - child: Text(value, style: const TextStyle(fontSize: 15)), + contentPadding: const EdgeInsets.fromLTRB(12, 24, 12, 17), + border: const OutlineInputBorder(), + labelText: widget.label, + labelStyle: const TextStyle(color: Colors.black87), + errorStyle: TextStyle( + color: Colors.red[900], + ), + errorText: widget.error, + filled: true, + suffixIcon: widget.suffixIcon, + child: Text(value, style: const TextStyle(fontSize: 16)), ); } } diff --git a/mobile/lib/common/amount_text_input_form_field.dart b/mobile/lib/common/amount_text_input_form_field.dart index f48171467..b39c8d690 100644 --- a/mobile/lib/common/amount_text_input_form_field.dart +++ b/mobile/lib/common/amount_text_input_form_field.dart @@ -39,7 +39,7 @@ class AmountInputField extends StatelessWidget { @override Widget build(BuildContext context) { return TextFormField( - style: style ?? const TextStyle(color: Colors.black87), + style: style ?? const TextStyle(color: Colors.black87, fontSize: 16), enabled: enabled, controller: controller, initialValue: controller != null ? null : value.formatted(), From 804898c2db727e986491653c2e1f01d43b414c65 Mon Sep 17 00:00:00 2001 From: Richard Holzeis Date: Thu, 7 Mar 2024 14:35:19 +0100 Subject: [PATCH 3/3] chore(app): Increase shade on disabled fields to better emphasis which fields can be edited and which don't. --- mobile/lib/common/amount_text_field.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/mobile/lib/common/amount_text_field.dart b/mobile/lib/common/amount_text_field.dart index a2196a1c4..05cc2fb53 100644 --- a/mobile/lib/common/amount_text_field.dart +++ b/mobile/lib/common/amount_text_field.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:get_10101/common/color.dart'; import 'package:get_10101/common/domain/model.dart'; class AmountTextField extends StatefulWidget { @@ -31,6 +32,7 @@ class _AmountTextState extends State { errorText: widget.error, filled: true, suffixIcon: widget.suffixIcon, + fillColor: tenTenOnePurple.shade50.withOpacity(0.3)), child: Text(value, style: const TextStyle(fontSize: 16)), ); }