diff --git a/catalyst_voices/lib/pages/account/creation/get_started/account_create_dialog.dart b/catalyst_voices/lib/pages/account/creation/get_started/account_create_dialog.dart new file mode 100644 index 0000000000..7c8fbbb52d --- /dev/null +++ b/catalyst_voices/lib/pages/account/creation/get_started/account_create_dialog.dart @@ -0,0 +1,194 @@ +import 'package:catalyst_voices/pages/account/creation/task_picture.dart'; +import 'package:catalyst_voices/widgets/buttons/voices_text_button.dart'; +import 'package:catalyst_voices/widgets/modals/voices_desktop_dialog.dart'; +import 'package:catalyst_voices/widgets/modals/voices_dialog.dart'; +import 'package:catalyst_voices_assets/catalyst_voices_assets.dart'; +import 'package:catalyst_voices_brands/catalyst_voices_brands.dart'; +import 'package:catalyst_voices_localization/catalyst_voices_localization.dart'; +import 'package:catalyst_voices_shared/catalyst_voices_shared.dart'; +import 'package:flutter/material.dart'; + +enum AccountCreateType { + createNew, + recover; + + SvgGenImage get _icon => switch (this) { + AccountCreateType.createNew => VoicesAssets.icons.colorSwatch, + AccountCreateType.recover => VoicesAssets.icons.download, + }; + + String _getTitle(VoicesLocalizations l10n) => switch (this) { + AccountCreateType.createNew => l10n.accountCreationCreate, + AccountCreateType.recover => l10n.accountCreationRecover, + }; + + String _getSubtitle(VoicesLocalizations l10n) { + return l10n.accountCreationOnThisDevice; + } +} + +class AccountCreateDialog extends StatelessWidget { + const AccountCreateDialog._(); + + static Future show(BuildContext context) { + return VoicesDialog.show( + context: context, + builder: (context) => const AccountCreateDialog._(), + ); + } + + @override + Widget build(BuildContext context) { + return const VoicesDesktopPanelsDialog( + left: _LeftPanel(), + right: _RightPanel(), + ); + } +} + +class _LeftPanel extends StatelessWidget { + const _LeftPanel(); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + context.l10n.getStarted, + style: theme.textTheme.titleLarge?.copyWith( + color: theme.colors.textOnPrimaryLevel0, + ), + ), + const SizedBox(height: 12), + const Expanded(child: Center(child: TaskKeychainPicture())), + const SizedBox(height: 32), + Row( + children: [ + VoicesTextButton( + onTap: () {}, + trailing: VoicesAssets.icons.externalLink.buildIcon(), + child: Text(context.l10n.learnMore), + ), + ], + ) + ], + ); + } +} + +class _RightPanel extends StatelessWidget { + const _RightPanel(); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox(height: 24), + Text( + context.l10n.accountCreationGetStartedTitle, + style: theme.textTheme.titleMedium?.copyWith( + color: theme.colors.textOnPrimaryLevel1, + ), + ), + const SizedBox(height: 12), + Text( + context.l10n.accountCreationGetStatedDesc, + style: theme.textTheme.bodyMedium?.copyWith( + color: theme.colors.textOnPrimaryLevel1, + ), + ), + const SizedBox(height: 32), + Text( + context.l10n.accountCreationGetStatedWhatNext, + style: theme.textTheme.titleSmall?.copyWith( + color: theme.colors.textOnPrimaryLevel0, + ), + ), + const SizedBox(height: 24), + Column( + mainAxisSize: MainAxisSize.min, + children: AccountCreateType.values + .map((type) { + return _AccountCreateTypeTile( + key: ValueKey(type), + type: type, + onTap: () => Navigator.of(context).pop(type), + ); + }) + .separatedBy(const SizedBox(height: 12)) + .toList(), + ), + ], + ); + } +} + +class _AccountCreateTypeTile extends StatelessWidget { + final AccountCreateType type; + final VoidCallback? onTap; + + const _AccountCreateTypeTile({ + super.key, + required this.type, + this.onTap, + }); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + + return ConstrainedBox( + constraints: const BoxConstraints.tightFor(height: 80), + child: Material( + color: theme.colorScheme.primary, + borderRadius: BorderRadius.circular(12), + child: InkWell( + onTap: onTap, + borderRadius: BorderRadius.circular(12), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + child: Row( + children: [ + type._icon.buildIcon( + size: 48, + color: theme.colorScheme.onPrimary, + ), + const SizedBox(width: 10), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + type._getTitle(context.l10n), + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: theme.textTheme.titleSmall?.copyWith( + color: theme.colorScheme.onPrimary, + ), + ), + Text( + type._getSubtitle(context.l10n), + maxLines: 1, + overflow: TextOverflow.clip, + style: theme.textTheme.bodySmall?.copyWith( + color: theme.colorScheme.onPrimary, + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/catalyst_voices/lib/pages/account/creation/get_started/account_get_started_dialog.dart b/catalyst_voices/lib/pages/account/creation/get_started/account_get_started_dialog.dart deleted file mode 100644 index fdf98c5979..0000000000 --- a/catalyst_voices/lib/pages/account/creation/get_started/account_get_started_dialog.dart +++ /dev/null @@ -1,132 +0,0 @@ -import 'package:catalyst_voices/widgets/modals/voices_desktop_dialog.dart'; -import 'package:catalyst_voices/widgets/modals/voices_dialog.dart'; -import 'package:catalyst_voices_assets/catalyst_voices_assets.dart'; -import 'package:catalyst_voices_brands/catalyst_voices_brands.dart'; -import 'package:flutter/material.dart'; - -enum AccountGetStartedType { create, recover } - -class AccountGetStartedDialog extends StatelessWidget { - const AccountGetStartedDialog._(); - - static Future show(BuildContext context) { - return VoicesDialog.show( - context: context, - builder: (context) => const AccountGetStartedDialog._(), - ); - } - - @override - Widget build(BuildContext context) { - final theme = Theme.of(context); - - return VoicesDesktopPanelsDialog( - left: Column( - children: [ - Text( - 'Get started', - style: theme.textTheme.titleLarge?.copyWith( - color: theme.colors.textOnPrimaryLevel0, - ), - ), - Placeholder(), - ], - ), - right: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox(height: 24), - Text( - 'Welcome to Catalyst!', - style: theme.textTheme.titleMedium?.copyWith( - color: theme.colors.textOnPrimaryLevel1, - ), - ), - SizedBox(height: 12), - Text( - 'If you already have a Catalyst keychain you can restore it on this device, or you can create a new Catalyst Keychain.', - style: theme.textTheme.bodyMedium?.copyWith( - color: theme.colors.textOnPrimaryLevel1, - ), - ), - SizedBox(height: 32), - Text( - 'What do you want to do?', - style: theme.textTheme.titleSmall?.copyWith( - color: theme.colors.textOnPrimaryLevel0, - ), - ), - SizedBox(height: 24), - Column( - mainAxisSize: MainAxisSize.min, - children: [ - _GetStartedTypeTile( - key: ValueKey(AccountGetStartedType.create), - type: AccountGetStartedType.create, - ), - SizedBox(height: 12), - _GetStartedTypeTile( - key: ValueKey(AccountGetStartedType.recover), - type: AccountGetStartedType.create, - ), - ], - ) - ], - ), - ); - } -} - -class _GetStartedTypeTile extends StatelessWidget { - final AccountGetStartedType type; - - const _GetStartedTypeTile({ - super.key, - required this.type, - }); - - @override - Widget build(BuildContext context) { - final theme = Theme.of(context); - - return Container( - constraints: BoxConstraints.tightFor(height: 80), - padding: EdgeInsets.symmetric(horizontal: 20), - decoration: BoxDecoration( - color: theme.colorScheme.primary, - borderRadius: BorderRadius.circular(12), - ), - child: Row( - children: [ - VoicesAssets.icons.colorSwatch.buildIcon( - size: 48, - color: theme.colors.iconsBackground, - ), - const SizedBox(width: 10), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - 'Create a new 
Catalyst Keychain', - maxLines: 2, - overflow: TextOverflow.ellipsis, - style: theme.textTheme.titleSmall?.copyWith( - color: theme.colorScheme.onPrimary, - ), - ), - Text( - 'On this device', - style: theme.textTheme.bodySmall?.copyWith( - color: theme.colorScheme.onPrimary, - ), - ), - ], - ), - ), - ], - ), - ); - } -} diff --git a/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart b/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart index b4ec23f604..8f5b6f9c00 100644 --- a/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart +++ b/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart @@ -1,5 +1,5 @@ import 'package:catalyst_voices/common/ext/ext.dart'; -import 'package:catalyst_voices/pages/account/creation/get_started/account_get_started_dialog.dart'; +import 'package:catalyst_voices/pages/account/creation/get_started/account_create_dialog.dart'; import 'package:catalyst_voices/pages/spaces/drawer/spaces_drawer.dart'; import 'package:catalyst_voices/widgets/widgets.dart'; import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart'; @@ -82,16 +82,16 @@ class _SpacesShellPageState extends State { } Future _showAccountGetStarted() async { - final getStartedType = await AccountGetStartedDialog.show(context); - if (getStartedType == null) { + final type = await AccountCreateDialog.show(context); + if (type == null) { return; } if (mounted) { - switch (getStartedType) { - case AccountGetStartedType.create: + switch (type) { + case AccountCreateType.createNew: _showCreateAccountFlow().ignore(); - case AccountGetStartedType.recover: + case AccountCreateType.recover: _showRecoverAccountFlow().ignore(); } } diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart index 1105d7c665..068867fa49 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart @@ -663,6 +663,48 @@ abstract class VoicesLocalizations { /// In en, this message translates to: /// **'Good password strength'** String get goodPasswordStrength; + + /// No description provided for @accountCreationCreate. + /// + /// In en, this message translates to: + /// **'Create a new 
Catalyst Keychain'** + String get accountCreationCreate; + + /// No description provided for @accountCreationRecover. + /// + /// In en, this message translates to: + /// **'Recover your
Catalyst Keychain'** + String get accountCreationRecover; + + /// Indicates that created keychain will be stored in this device only + /// + /// In en, this message translates to: + /// **'On this device'** + String get accountCreationOnThisDevice; + + /// General string used as external link text buttons + /// + /// In en, this message translates to: + /// **'Learn more'** + String get learnMore; + + /// No description provided for @accountCreationGetStartedTitle. + /// + /// In en, this message translates to: + /// **'Welcome to Catalyst'** + String get accountCreationGetStartedTitle; + + /// No description provided for @accountCreationGetStatedDesc. + /// + /// In en, this message translates to: + /// **'If you already have a Catalyst keychain you can restore it on this device, or you can create a new Catalyst Keychain.'** + String get accountCreationGetStatedDesc; + + /// No description provided for @accountCreationGetStatedWhatNext. + /// + /// In en, this message translates to: + /// **'What do you want to do?'** + String get accountCreationGetStatedWhatNext; } class _VoicesLocalizationsDelegate extends LocalizationsDelegate { diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart index b4ae93ae36..95373db3a9 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart @@ -345,4 +345,25 @@ class VoicesLocalizationsEn extends VoicesLocalizations { @override String get goodPasswordStrength => 'Good password strength'; + + @override + String get accountCreationCreate => 'Create a new 
Catalyst Keychain'; + + @override + String get accountCreationRecover => 'Recover your
Catalyst Keychain'; + + @override + String get accountCreationOnThisDevice => 'On this device'; + + @override + String get learnMore => 'Learn more'; + + @override + String get accountCreationGetStartedTitle => 'Welcome to Catalyst'; + + @override + String get accountCreationGetStatedDesc => 'If you already have a Catalyst keychain you can restore it on this device, or you can create a new Catalyst Keychain.'; + + @override + String get accountCreationGetStatedWhatNext => 'What do you want to do?'; } diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart index 734ef69842..b5ed461ce8 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart @@ -345,4 +345,25 @@ class VoicesLocalizationsEs extends VoicesLocalizations { @override String get goodPasswordStrength => 'Good password strength'; + + @override + String get accountCreationCreate => 'Create a new 
Catalyst Keychain'; + + @override + String get accountCreationRecover => 'Recover your
Catalyst Keychain'; + + @override + String get accountCreationOnThisDevice => 'On this device'; + + @override + String get learnMore => 'Learn more'; + + @override + String get accountCreationGetStartedTitle => 'Welcome to Catalyst'; + + @override + String get accountCreationGetStatedDesc => 'If you already have a Catalyst keychain you can restore it on this device, or you can create a new Catalyst Keychain.'; + + @override + String get accountCreationGetStatedWhatNext => 'What do you want to do?'; } diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb b/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb index 65c3750b5b..cf5e05d6c1 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb @@ -425,5 +425,18 @@ "goodPasswordStrength": "Good password strength", "@goodPasswordStrength": { "description": "Describes a password that is strong." - } + }, + "accountCreationCreate": "Create a new \u2028Catalyst Keychain", + "accountCreationRecover": "Recover your\u2028Catalyst Keychain", + "accountCreationOnThisDevice": "On this device", + "@accountCreationOnThisDevice": { + "description": "Indicates that created keychain will be stored in this device only" + }, + "learnMore": "Learn more", + "@learnMore": { + "description": "General string used as external link text buttons" + }, + "accountCreationGetStartedTitle": "Welcome to Catalyst", + "accountCreationGetStatedDesc": "If you already have a Catalyst keychain you can restore it on this device, or you can create a new Catalyst Keychain.", + "accountCreationGetStatedWhatNext": "What do you want to do?" } \ No newline at end of file