diff --git a/clients/bitwindow/lib/pages/overview_page.dart b/clients/bitwindow/lib/pages/overview_page.dart index 96676c3f..dc5b67f2 100644 --- a/clients/bitwindow/lib/pages/overview_page.dart +++ b/clients/bitwindow/lib/pages/overview_page.dart @@ -110,6 +110,7 @@ class TransactionsView extends StatelessWidget { SailRawCard( bottomPadding: false, title: 'Latest Transactions', + subtitle: 'View the latest transactions on the sidechain', child: SizedBox( height: 300, child: LatestTransactionTable( @@ -126,7 +127,8 @@ class TransactionsView extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ SailRawCard( - title: 'Latest blocks', + title: 'Latest Blocks', + subtitle: 'View the latest blocks on the blockchain', bottomPadding: false, child: SizedBox( height: 300, @@ -467,9 +469,9 @@ class CoinNewsView extends StatelessWidget { child: SailRow( spacing: SailStyleValues.padding08, children: [ - SailText.primary15( - 'Coin News', - bold: true, + CardHeader( + title: 'Coin News', + subtitle: 'Stay up-to-date on the latest world developments', ), Expanded(child: Container()), QtButton( @@ -566,6 +568,7 @@ class CoinNewsView extends StatelessWidget { await widgetDialog( context: context, title: 'Broadcast News', + subtitle: 'Broadcast News to the whole world, in the list you prefer.', child: BroadcastNewsView(), ); } @@ -574,6 +577,7 @@ class CoinNewsView extends StatelessWidget { await widgetDialog( context: context, title: 'Create Topic', + subtitle: 'Create a new topic, that you and others can subscribe to, and post news for.', child: CreateTopicView(), ); } @@ -582,6 +586,7 @@ class CoinNewsView extends StatelessWidget { await widgetDialog( context: context, title: 'Graffitti Explorer', + subtitle: 'List all previous OP_RETURN messages found in the blockchain.', maxWidth: MediaQuery.of(context).size.width - 100, child: GraffittiExplorerView(), ); @@ -916,8 +921,7 @@ class GraffittiExplorerView extends StatelessWidget { onPressed: () => newGraffittiDialog(context), size: ButtonSize.small, ), - SizedBox( - height: 500, + Expanded( child: GraffittiTable( entries: viewModel.entries, onSort: viewModel.onSort, diff --git a/clients/bitwindow/lib/pages/sidechains_page.dart b/clients/bitwindow/lib/pages/sidechains_page.dart index 7eadd8b3..1aa4c29e 100644 --- a/clients/bitwindow/lib/pages/sidechains_page.dart +++ b/clients/bitwindow/lib/pages/sidechains_page.dart @@ -61,6 +61,7 @@ class SidechainsList extends ViewModelWidget { Widget build(BuildContext context, SidechainsViewModel viewModel) { return SailRawCard( title: 'Sidechains', + subtitle: 'List of sidechains and their current status', child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -508,6 +509,7 @@ class MakeDepositsView extends ViewModelWidget { Expanded( child: SailRawCard( title: 'Your Recent Deposits', + subtitle: 'Recent deposits to sidechains, coming from your onchain-wallet.', shadowSize: ShadowSize.none, padding: false, child: RecentDepositsTable(), diff --git a/clients/bitwindow/lib/pages/wallet_page.dart b/clients/bitwindow/lib/pages/wallet_page.dart index 44c3f060..0b9933d7 100644 --- a/clients/bitwindow/lib/pages/wallet_page.dart +++ b/clients/bitwindow/lib/pages/wallet_page.dart @@ -61,6 +61,7 @@ class SendTab extends ViewModelWidget { Widget build(BuildContext context, SendPageViewModel viewModel) { return SailRawCard( title: 'Send Bitcoin', + subtitle: 'Send bitcoin to bitcoin-addresses. No sidechains involved.', child: Column( children: [ Row( @@ -527,6 +528,7 @@ class ReceiveTab extends StatelessWidget { Expanded( child: SailRawCard( title: 'Receive Bitcoin', + subtitle: 'Receive bitcoin to your bitcoin-wallet. No sidechains involved.', child: SailColumn( spacing: SailStyleValues.padding16, mainAxisSize: MainAxisSize.min, @@ -714,7 +716,9 @@ class _TransactionTableState extends State { return LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return SailRawCard( - title: 'Your Wallet Transaction History', + title: 'Wallet Transaction History', + subtitle: + 'List of transactions for your bitcoin-wallet. Contains send, receive and sidechain-interaction transactions.', bottomPadding: false, child: Column( children: [ diff --git a/clients/sail_ui/lib/style/color_scheme.dart b/clients/sail_ui/lib/style/color_scheme.dart index 83a59cf7..6c6bbfd7 100644 --- a/clients/sail_ui/lib/style/color_scheme.dart +++ b/clients/sail_ui/lib/style/color_scheme.dart @@ -12,7 +12,7 @@ abstract class SailColorScheme { static const redLight = Color(0xffFD7979); static const black = Color(0xff000000); static const blackLighter = Color.fromARGB(255, 31, 31, 31); - static const blackLightest = Color(0xff20272D); + static const blackLightest = Color(0xff64748B); static const purple = Color(0xffBB87FC); static const greenLight = Color(0xff79FD7E); static const green = Color(0xff2AB517); diff --git a/clients/sail_ui/lib/widgets/containers/sail_card.dart b/clients/sail_ui/lib/widgets/containers/sail_card.dart index 4751b449..017b3569 100644 --- a/clients/sail_ui/lib/widgets/containers/sail_card.dart +++ b/clients/sail_ui/lib/widgets/containers/sail_card.dart @@ -3,6 +3,7 @@ import 'package:sail_ui/sail_ui.dart'; class SailRawCard extends StatelessWidget { final String? title; + final String? subtitle; final Widget? header; final VoidCallback? onPressed; final bool padding; @@ -16,6 +17,7 @@ class SailRawCard extends StatelessWidget { const SailRawCard({ super.key, this.title, + this.subtitle, this.header, this.onPressed, this.padding = true, @@ -32,6 +34,10 @@ class SailRawCard extends StatelessWidget { Widget build(BuildContext context) { final theme = SailTheme.of(context); + if ((title != null) != (subtitle != null)) { + throw ArgumentError('Title and subtitle must be set together. Got title: $title and subtitle: $subtitle'); + } + return SailShadow( shadowSize: shadowSize, child: Material( @@ -55,9 +61,9 @@ class SailRawCard extends StatelessWidget { children: [ if (header != null) header!, if (title != null) - SailText.primary15( - title!, - bold: true, + CardHeader( + title: title!, + subtitle: subtitle, ), if (title != null) const SailSpacing(SailStyleValues.padding16), Flexible( diff --git a/clients/sail_ui/lib/widgets/containers/sail_dialogs.dart b/clients/sail_ui/lib/widgets/containers/sail_dialogs.dart index 8a07040e..22129273 100644 --- a/clients/sail_ui/lib/widgets/containers/sail_dialogs.dart +++ b/clients/sail_ui/lib/widgets/containers/sail_dialogs.dart @@ -113,6 +113,38 @@ Future widgetDialog({ ); } +class CardHeader extends StatelessWidget { + final String title; + final String? subtitle; + + const CardHeader({ + super.key, + required this.title, + this.subtitle, + }); + + @override + Widget build(BuildContext context) { + final theme = SailTheme.of(context); + + return SailColumn( + spacing: 0, + mainAxisSize: MainAxisSize.min, + children: [ + SailText.primary20( + title, + bold: true, + ), + if (subtitle != null) + SailText.primary12( + subtitle!, + color: theme.colors.textTertiary, + ), + ], + ); + } +} + enum DialogType { info, error, success } class DialogHeader extends StatelessWidget { @@ -129,26 +161,10 @@ class DialogHeader extends StatelessWidget { @override Widget build(BuildContext context) { - final theme = SailTheme.of(context); - return SailRow( spacing: SailStyleValues.padding08, children: [ - SailColumn( - spacing: 0, - mainAxisSize: MainAxisSize.min, - children: [ - SailText.primary15( - title, - bold: true, - ), - if (subtitle != null) - SailText.primary10( - subtitle!, - color: theme.colors.textSecondary, - ), - ], - ), + CardHeader(title: title, subtitle: subtitle), Expanded(child: Container()), SailScaleButton( onPressed: onClose, diff --git a/clients/sail_ui/lib/widgets/core/sail_text.dart b/clients/sail_ui/lib/widgets/core/sail_text.dart index 8625ac98..b592f15a 100644 --- a/clients/sail_ui/lib/widgets/core/sail_text.dart +++ b/clients/sail_ui/lib/widgets/core/sail_text.dart @@ -190,6 +190,7 @@ class SailText { bool italic = false, Color? color, bool monospace = false, + TextOverflow overflow = TextOverflow.ellipsis, }) { return Builder( builder: (context) { @@ -202,6 +203,7 @@ class SailText { fontWeight: bold ? SailStyleValues.boldWeight : null, fontStyle: italic ? FontStyle.italic : FontStyle.normal, fontFamily: monospace ? 'SourceCodePro' : 'Inter', + overflow: overflow, ), textAlign: textAlign, );