Skip to content

Commit 6c1470a

Browse files
i5hii5hi
authored
Merge pull request #1771 from SatoshiPortal/exchange-banner-ux
Exchange Announcement Banner improvements
2 parents abbc2c1 + fef26fc commit 6c1470a

1 file changed

Lines changed: 142 additions & 28 deletions

File tree

‎lib/features/exchange/ui/widgets/announcement_banner.dart‎

Lines changed: 142 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:bb_mobile/core/exchange/domain/entity/announcement.dart';
22
import 'package:bb_mobile/core/themes/app_theme.dart';
3+
import 'package:bb_mobile/core/widgets/bottom_sheet/x.dart';
34
import 'package:bb_mobile/core/widgets/text/text.dart';
45
import 'package:bb_mobile/features/exchange/presentation/exchange_cubit.dart';
56
import 'package:flutter/material.dart';
@@ -34,44 +35,157 @@ class _AnnouncementItem extends StatelessWidget {
3435

3536
final Announcement announcement;
3637

38+
@override
39+
Widget build(BuildContext context) {
40+
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
41+
42+
return GestureDetector(
43+
onTap: () => _AnnouncementBottomSheet.show(context, announcement),
44+
child: Container(
45+
margin: const EdgeInsets.only(bottom: 8),
46+
padding: const EdgeInsets.all(16),
47+
decoration: BoxDecoration(
48+
color: isDarkMode
49+
? context.appColors.surface
50+
: context.appColors.secondary,
51+
borderRadius: BorderRadius.circular(2),
52+
border: isDarkMode
53+
? Border.all(
54+
color: context.appColors.outline.withValues(alpha: 0.3),
55+
)
56+
: null,
57+
),
58+
child: Row(
59+
children: [
60+
Icon(
61+
Icons.info_outline,
62+
color: isDarkMode
63+
? context.appColors.onSurface
64+
: context.appColors.onSecondary,
65+
size: 32,
66+
),
67+
const Gap(16),
68+
Expanded(
69+
child: Column(
70+
crossAxisAlignment: CrossAxisAlignment.start,
71+
children: [
72+
BBText(
73+
announcement.title,
74+
style: context.font.bodyMedium?.copyWith(
75+
fontWeight: FontWeight.bold,
76+
),
77+
color: isDarkMode
78+
? context.appColors.onSurface
79+
: context.appColors.onSecondary,
80+
maxLines: 1,
81+
overflow: TextOverflow.ellipsis,
82+
),
83+
const Gap(4),
84+
BBText(
85+
announcement.description,
86+
style: context.font.bodySmall,
87+
color: isDarkMode
88+
? context.appColors.onSurface.withValues(alpha: 0.7)
89+
: context.appColors.onSecondary,
90+
maxLines: 1,
91+
overflow: TextOverflow.ellipsis,
92+
),
93+
],
94+
),
95+
),
96+
],
97+
),
98+
),
99+
);
100+
}
101+
}
102+
103+
class _AnnouncementBottomSheet extends StatelessWidget {
104+
const _AnnouncementBottomSheet({required this.announcement});
105+
106+
final Announcement announcement;
107+
108+
static Future<void> show(BuildContext context, Announcement announcement) {
109+
return BlurredBottomSheet.show(
110+
context: context,
111+
child: _AnnouncementBottomSheet(announcement: announcement),
112+
);
113+
}
114+
37115
@override
38116
Widget build(BuildContext context) {
39117
return Container(
40-
margin: const EdgeInsets.only(bottom: 8),
41-
padding: const EdgeInsets.all(16),
118+
constraints: BoxConstraints(
119+
maxHeight: MediaQuery.of(context).size.height * 0.8,
120+
),
42121
decoration: BoxDecoration(
43-
color: context.appColors.secondary,
44-
borderRadius: BorderRadius.circular(2),
122+
color: context.appColors.surface,
123+
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
45124
),
46-
child: Row(
47-
children: [
48-
Icon(
49-
Icons.info_outline,
50-
color: context.appColors.onSecondary,
51-
size: 32,
52-
),
53-
const Gap(16),
54-
Expanded(
55-
child: Column(
56-
crossAxisAlignment: CrossAxisAlignment.start,
57-
children: [
58-
BBText(
59-
announcement.title,
60-
style: context.font.bodyMedium?.copyWith(
61-
fontWeight: FontWeight.bold,
125+
child: SafeArea(
126+
child: Column(
127+
mainAxisSize: MainAxisSize.min,
128+
crossAxisAlignment: CrossAxisAlignment.start,
129+
children: [
130+
Padding(
131+
padding: const EdgeInsets.only(top: 16),
132+
child: Center(
133+
child: Container(
134+
width: 40,
135+
height: 4,
136+
decoration: BoxDecoration(
137+
color: context.appColors.outline.withValues(alpha: 0.3),
138+
borderRadius: BorderRadius.circular(2),
62139
),
63-
color: context.appColors.onSecondary,
64140
),
65-
const Gap(4),
66-
BBText(
141+
),
142+
),
143+
Padding(
144+
padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
145+
child: Row(
146+
crossAxisAlignment: CrossAxisAlignment.center,
147+
children: [
148+
Icon(
149+
Icons.info_outline,
150+
color: context.appColors.onSurface,
151+
size: 24,
152+
),
153+
const Gap(12),
154+
Expanded(
155+
child: BBText(
156+
announcement.title,
157+
style: context.font.titleLarge?.copyWith(
158+
fontWeight: FontWeight.bold,
159+
),
160+
),
161+
),
162+
const Gap(12),
163+
GestureDetector(
164+
onTap: () => Navigator.of(context).pop(),
165+
child: Icon(
166+
Icons.close,
167+
color: context.appColors.onSurface,
168+
size: 24,
169+
),
170+
),
171+
],
172+
),
173+
),
174+
const Gap(16),
175+
Flexible(
176+
child: SingleChildScrollView(
177+
padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
178+
child: BBText(
67179
announcement.description,
68-
style: context.font.bodySmall,
69-
color: context.appColors.onSecondary,
180+
style: context.font.bodyMedium?.copyWith(
181+
color: context.appColors.onSurface.withValues(alpha: 0.8),
182+
height: 1.5,
183+
),
70184
),
71-
],
185+
),
72186
),
73-
),
74-
],
187+
],
188+
),
75189
),
76190
);
77191
}

0 commit comments

Comments
 (0)