Skip to content

Commit b9feecf

Browse files
fix(cat-voices): onboarding visuals fixes (#2656)
* chore: capitalize wallets names * move select wallet widgets into separate dir + split into smaller files * chore: make more space for wallets list * chore: use rounded formatting for reg. transaction * chore: introduce and use RegistrationDetailsPanelScaffold * chore: use scaffold in recovery * chore: cleanup refactor * fix: wallets list view incorrect index --------- Co-authored-by: Oleksandr Prokhorenko <[email protected]>
1 parent 23d863d commit b9feecf

36 files changed

+930
-920
lines changed

catalyst_voices/apps/voices/lib/pages/registration/account_completed/account_completed_panel.dart

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:catalyst_voices/common/ext/account_role_ext.dart';
22
import 'package:catalyst_voices/pages/registration/widgets/next_step.dart';
3+
import 'package:catalyst_voices/pages/registration/widgets/registration_details_panel_scaffold.dart';
34
import 'package:catalyst_voices/routes/routing/account_route.dart';
45
import 'package:catalyst_voices/routes/routing/spaces_route.dart';
56
import 'package:catalyst_voices/widgets/widgets.dart';
@@ -16,44 +17,46 @@ class AccountCompletedPanel extends StatelessWidget {
1617

1718
@override
1819
Widget build(BuildContext context) {
19-
return Column(
20-
crossAxisAlignment: CrossAxisAlignment.stretch,
21-
children: [
22-
Expanded(
23-
child: SingleChildScrollView(
24-
child: Column(
25-
mainAxisSize: MainAxisSize.min,
26-
crossAxisAlignment: CrossAxisAlignment.stretch,
27-
children: [
28-
const _TitleText(),
29-
const SizedBox(height: 10),
30-
Column(
31-
children: const <Widget>[
32-
_CatalystKeychainCreatedCard(),
33-
_WalletConnectedCardSelector(),
34-
_RolesSelectedCardSelector(),
35-
].separatedBy(const SizedBox(height: 10)).toList(),
36-
),
20+
return RegistrationDetailsPanelScaffold(
21+
body: const SingleChildScrollView(
22+
child: Column(
23+
mainAxisSize: MainAxisSize.min,
24+
crossAxisAlignment: CrossAxisAlignment.stretch,
25+
children: [
26+
_TitleText(),
27+
SizedBox(height: 10),
28+
Column(
29+
spacing: 10,
30+
children: <Widget>[
31+
_CatalystKeychainCreatedCard(),
32+
_WalletConnectedCardSelector(),
33+
_RolesSelectedCardSelector(),
3734
],
3835
),
39-
),
40-
),
41-
const _NextStep(),
42-
const SizedBox(height: 10),
43-
_OpenDiscoveryButton(
44-
onTap: () {
45-
Navigator.pop(context);
46-
const DiscoveryRoute().go(context);
47-
},
48-
),
49-
const SizedBox(height: 10),
50-
_ReviewMyAccountButton(
51-
onTap: () {
52-
Navigator.pop(context);
53-
const AccountRoute().go(context);
54-
},
36+
],
5537
),
56-
],
38+
),
39+
footer: Column(
40+
mainAxisSize: MainAxisSize.min,
41+
crossAxisAlignment: CrossAxisAlignment.stretch,
42+
children: [
43+
const _NextStep(),
44+
const SizedBox(height: 10),
45+
_OpenDiscoveryButton(
46+
onTap: () {
47+
Navigator.pop(context);
48+
const DiscoveryRoute().go(context);
49+
},
50+
),
51+
const SizedBox(height: 10),
52+
_ReviewMyAccountButton(
53+
onTap: () {
54+
Navigator.pop(context);
55+
const AccountRoute().go(context);
56+
},
57+
),
58+
],
59+
),
5760
);
5861
}
5962
}

catalyst_voices/apps/voices/lib/pages/registration/create_account_progress/account_create_progress_panel.dart

Lines changed: 46 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:catalyst_voices/pages/registration/widgets/next_step.dart';
2+
import 'package:catalyst_voices/pages/registration/widgets/registration_details_panel_scaffold.dart';
23
import 'package:catalyst_voices/pages/registration/widgets/registration_progress_stepper.dart';
34
import 'package:catalyst_voices/widgets/buttons/voices_filled_button.dart';
45
import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
@@ -26,44 +27,30 @@ class AccountCreateProgressPanel extends StatelessWidget {
2627
final nextStep = lastCompletedStep?.next;
2728
final nextStepText = lastCompletedStep?._nextStepText(context);
2829

29-
return Column(
30+
return RegistrationDetailsPanelScaffold(
3031
key: const Key('AccountCreateProgressPanel'),
31-
crossAxisAlignment: CrossAxisAlignment.stretch,
32-
children: [
33-
const SizedBox(height: 24),
34-
Expanded(
35-
child: SingleChildScrollView(
36-
child: Column(
37-
mainAxisSize: MainAxisSize.min,
38-
crossAxisAlignment: CrossAxisAlignment.stretch,
39-
children: [
40-
if (title != null) ...[
41-
_TitleText(title),
42-
const SizedBox(height: 24),
43-
],
44-
RegistrationProgressStepper(
45-
completed: completedSteps.toSet(),
46-
current:
47-
AccountCreateStepType.values.whereNot(completedSteps.contains).firstOrNull,
48-
),
49-
],
50-
),
51-
),
52-
),
53-
if (nextStepText != null) ...[
54-
const SizedBox(height: 10),
55-
NextStep(nextStepText, key: const Key('NextStep')),
32+
title: title != null ? _TitleText(title) : null,
33+
body: RegistrationProgressStepper(
34+
completed: completedSteps.toSet(),
35+
current: AccountCreateStepType.values.whereNot(completedSteps.contains).firstOrNull,
36+
),
37+
footer: Column(
38+
mainAxisSize: MainAxisSize.min,
39+
crossAxisAlignment: CrossAxisAlignment.stretch,
40+
children: [
41+
if (nextStepText != null) ...[
42+
NextStep(nextStepText, key: const Key('NextStep')),
43+
],
44+
if (nextStep == AccountCreateStepType.keychain) ...[
45+
const SizedBox(height: 10),
46+
_CreateKeychainButton(onTap: () => _goToNextStep(context)),
47+
],
48+
if (nextStep == AccountCreateStepType.walletLink) ...[
49+
const SizedBox(height: 10),
50+
_LinkWalletAndRolesButton(onTap: () => _goToNextStep(context)),
51+
],
5652
],
57-
if (nextStep == AccountCreateStepType.keychain) ...[
58-
const SizedBox(height: 10),
59-
_CreateKeychainButton(onTap: () => _goToNextStep(context)),
60-
],
61-
if (nextStep == AccountCreateStepType.walletLink) ...[
62-
const SizedBox(height: 10),
63-
_LinkWalletAndRolesButton(onTap: () => _goToNextStep(context)),
64-
],
65-
const SizedBox(height: 24),
66-
],
53+
),
6754
);
6855
}
6956

@@ -72,23 +59,6 @@ class AccountCreateProgressPanel extends StatelessWidget {
7259
}
7360
}
7461

75-
class _TitleText extends StatelessWidget {
76-
final String data;
77-
78-
const _TitleText(this.data);
79-
80-
@override
81-
Widget build(BuildContext context) {
82-
final theme = Theme.of(context);
83-
final color = theme.colors.textOnPrimaryLevel1;
84-
85-
return Text(
86-
data,
87-
style: theme.textTheme.titleMedium?.copyWith(color: color),
88-
);
89-
}
90-
}
91-
9262
class _CreateKeychainButton extends StatelessWidget {
9363
final VoidCallback onTap;
9464

@@ -125,19 +95,36 @@ class _LinkWalletAndRolesButton extends StatelessWidget {
12595
}
12696
}
12797

98+
class _TitleText extends StatelessWidget {
99+
final String data;
100+
101+
const _TitleText(this.data);
102+
103+
@override
104+
Widget build(BuildContext context) {
105+
final theme = Theme.of(context);
106+
final color = theme.colors.textOnPrimaryLevel1;
107+
108+
return Text(
109+
data,
110+
style: theme.textTheme.titleMedium?.copyWith(color: color),
111+
);
112+
}
113+
}
114+
128115
extension _AccountCreateStepType on AccountCreateStepType {
129-
String? _title(BuildContext context) {
116+
String? _nextStepText(BuildContext context) {
130117
return switch (this) {
131-
AccountCreateStepType.baseProfile => context.l10n.createBaseProfileCreatedTitle,
132-
AccountCreateStepType.keychain => context.l10n.createKeychainCreatedTitle,
118+
AccountCreateStepType.baseProfile => context.l10n.createBaseProfileNextStep,
119+
AccountCreateStepType.keychain => context.l10n.createKeychainCreatedNextStep,
133120
AccountCreateStepType.walletLink => null,
134121
};
135122
}
136123

137-
String? _nextStepText(BuildContext context) {
124+
String? _title(BuildContext context) {
138125
return switch (this) {
139-
AccountCreateStepType.baseProfile => context.l10n.createBaseProfileNextStep,
140-
AccountCreateStepType.keychain => context.l10n.createKeychainCreatedNextStep,
126+
AccountCreateStepType.baseProfile => context.l10n.createBaseProfileCreatedTitle,
127+
AccountCreateStepType.keychain => context.l10n.createKeychainCreatedTitle,
141128
AccountCreateStepType.walletLink => null,
142129
};
143130
}

0 commit comments

Comments
 (0)