diff --git a/catalyst_voices/lib/pages/account/creation/task_picture.dart b/catalyst_voices/lib/pages/account/creation/task_picture.dart new file mode 100644 index 0000000000..a6927de0c0 --- /dev/null +++ b/catalyst_voices/lib/pages/account/creation/task_picture.dart @@ -0,0 +1,100 @@ +import 'package:catalyst_voices_assets/catalyst_voices_assets.dart'; +import 'package:catalyst_voices_brands/catalyst_voices_brands.dart'; +import 'package:flutter/material.dart'; + +enum TaskPictureType { + normal, + success, + error; + + Color _foregroundColor(ThemeData theme) { + return switch (this) { + // TODO(damian-molinski): Color should come from colors scheme + TaskPictureType.normal => const Color(0xFF0C288D), + TaskPictureType.success => theme.colors.successContainer!, + TaskPictureType.error => theme.colors.errorContainer!, + }; + } + + Color _backgroundColor(ThemeData theme) { + return switch (this) { + // TODO(damian-molinski): Color should come from colors scheme + TaskPictureType.normal => const Color(0xFFCCE2FF), + TaskPictureType.success => theme.colors.success!, + TaskPictureType.error => theme.colorScheme.error, + }; + } +} + +class TaskKeychainPicture extends StatelessWidget { + final TaskPictureType type; + + const TaskKeychainPicture({ + super.key, + this.type = TaskPictureType.normal, + }); + + @override + Widget build(BuildContext context) { + return TaskPicture( + child: TaskPictureIconBox( + type: type, + child: VoicesAssets.images.keychain.buildIcon(allowSize: false), + ), + ); + } +} + +class TaskPicture extends StatelessWidget { + final Widget child; + + const TaskPicture({ + super.key, + required this.child, + }); + + @override + Widget build(BuildContext context) { + return Stack( + alignment: Alignment.topRight, + children: [ + CatalystImage.asset(VoicesAssets.images.taskIllustration.path), + child, + ], + ); + } +} + +class TaskPictureIconBox extends StatelessWidget { + final TaskPictureType type; + final Widget child; + + const TaskPictureIconBox({ + super.key, + this.type = TaskPictureType.normal, + required this.child, + }); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + + final foregroundColor = type._foregroundColor(theme); + final backgroundColor = type._backgroundColor(theme); + + final iconThemeData = IconThemeData(color: foregroundColor); + + return IconTheme( + data: iconThemeData, + child: Container( + constraints: BoxConstraints.tight(const Size.square(125)), + decoration: BoxDecoration( + color: backgroundColor, + shape: BoxShape.circle, + ), + alignment: Alignment.center, + child: child, + ), + ); + } +} diff --git a/catalyst_voices/packages/catalyst_voices_assets/assets/images/2.0x/task_illustration.webp b/catalyst_voices/packages/catalyst_voices_assets/assets/images/2.0x/task_illustration.webp new file mode 100644 index 0000000000..c55e59b9ff Binary files /dev/null and b/catalyst_voices/packages/catalyst_voices_assets/assets/images/2.0x/task_illustration.webp differ diff --git a/catalyst_voices/packages/catalyst_voices_assets/assets/images/3.0x/task_illustration.webp b/catalyst_voices/packages/catalyst_voices_assets/assets/images/3.0x/task_illustration.webp new file mode 100644 index 0000000000..afaaa67d4f Binary files /dev/null and b/catalyst_voices/packages/catalyst_voices_assets/assets/images/3.0x/task_illustration.webp differ diff --git a/catalyst_voices/packages/catalyst_voices_assets/assets/images/keychain.svg b/catalyst_voices/packages/catalyst_voices_assets/assets/images/keychain.svg new file mode 100644 index 0000000000..5c04db0777 --- /dev/null +++ b/catalyst_voices/packages/catalyst_voices_assets/assets/images/keychain.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/catalyst_voices/packages/catalyst_voices_assets/assets/images/task_illustration.webp b/catalyst_voices/packages/catalyst_voices_assets/assets/images/task_illustration.webp new file mode 100644 index 0000000000..86db01c353 Binary files /dev/null and b/catalyst_voices/packages/catalyst_voices_assets/assets/images/task_illustration.webp differ diff --git a/catalyst_voices/packages/catalyst_voices_assets/lib/generated/assets.gen.dart b/catalyst_voices/packages/catalyst_voices_assets/lib/generated/assets.gen.dart index 6eb993c8b4..58c87d3180 100644 --- a/catalyst_voices/packages/catalyst_voices_assets/lib/generated/assets.gen.dart +++ b/catalyst_voices/packages/catalyst_voices_assets/lib/generated/assets.gen.dart @@ -7,10 +7,10 @@ // ignore_for_file: type=lint // ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use -import 'package:flutter/services.dart'; import 'package:flutter/widgets.dart'; -import 'package:flutter_svg/flutter_svg.dart' as _svg; -import 'package:vector_graphics/vector_graphics.dart' as _vg; +import 'package:flutter/services.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:vector_graphics/vector_graphics.dart'; class $AssetsIconsGen { const $AssetsIconsGen(); @@ -1199,6 +1199,9 @@ class $AssetsImagesGen { SvgGenImage get fallbackLogoIcon => const SvgGenImage('assets/images/fallback_logo_icon.svg'); + /// File path: assets/images/keychain.svg + SvgGenImage get keychain => const SvgGenImage('assets/images/keychain.svg'); + /// File path: assets/images/linkedin.svg SvgGenImage get linkedin => const SvgGenImage('assets/images/linkedin.svg'); @@ -1214,6 +1217,10 @@ class $AssetsImagesGen { AssetGenImage get proposalBackground2 => const AssetGenImage('assets/images/proposal_background_2.webp'); + /// File path: assets/images/task_illustration.webp + AssetGenImage get taskIllustration => + const AssetGenImage('assets/images/task_illustration.webp'); + /// File path: assets/images/x.svg SvgGenImage get x => const SvgGenImage('assets/images/x.svg'); @@ -1233,10 +1240,12 @@ class $AssetsImagesGen { facebookMono, fallbackLogo, fallbackLogoIcon, + keychain, linkedin, linkedinMono, proposalBackground1, proposalBackground2, + taskIllustration, x, xMono ]; @@ -1348,7 +1357,7 @@ class SvgGenImage { final Set flavors; final bool _isVecFormat; - _svg.SvgPicture svg({ + SvgPicture svg({ Key? key, bool matchTextDirection = false, AssetBundle? bundle, @@ -1361,29 +1370,29 @@ class SvgGenImage { WidgetBuilder? placeholderBuilder, String? semanticsLabel, bool excludeFromSemantics = false, - _svg.SvgTheme? theme, + SvgTheme? theme, ColorFilter? colorFilter, Clip clipBehavior = Clip.hardEdge, @deprecated Color? color, @deprecated BlendMode colorBlendMode = BlendMode.srcIn, @deprecated bool cacheColorFilter = false, }) { - final _svg.BytesLoader loader; + final BytesLoader loader; if (_isVecFormat) { - loader = _vg.AssetBytesLoader( + loader = AssetBytesLoader( _assetName, assetBundle: bundle, packageName: package, ); } else { - loader = _svg.SvgAssetLoader( + loader = SvgAssetLoader( _assetName, assetBundle: bundle, packageName: package, theme: theme, ); } - return _svg.SvgPicture( + return SvgPicture( loader, key: key, matchTextDirection: matchTextDirection, diff --git a/catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart b/catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart index 39255c360d..8932c457c8 100644 --- a/catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart +++ b/catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart @@ -227,7 +227,7 @@ class VoicesColors { static const Color lightAvatarsWarning = Color(0xFFFDE1CE); /// Color: #FFFFFF - static const Color lightElevationsOnSurfaceNeutralLv0 = Color(0x16123CD3); + static const Color lightElevationsOnSurfaceNeutralLv0 = Color(0xFFFFFFFF); /// Color: #F2F4F8 static const Color lightElevationsOnSurfaceNeutralLv1Grey = Color(0xFFF2F4F8); diff --git a/catalyst_voices/packages/catalyst_voices_assets/lib/src/assets_ext.dart b/catalyst_voices/packages/catalyst_voices_assets/lib/src/assets_ext.dart index a52047b0e2..74eb0768b2 100644 --- a/catalyst_voices/packages/catalyst_voices_assets/lib/src/assets_ext.dart +++ b/catalyst_voices/packages/catalyst_voices_assets/lib/src/assets_ext.dart @@ -81,6 +81,7 @@ extension SvgGenImageExt on SvgGenImage { String? semanticsLabel, bool excludeFromSemantics = false, double? size, + bool allowSize = true, BoxFit fit = BoxFit.contain, Alignment alignment = Alignment.center, bool matchTextDirection = false, @@ -105,6 +106,7 @@ extension SvgGenImageExt on SvgGenImage { semanticsLabel: semanticsLabel, excludeFromSemantics: excludeFromSemantics, size: size, + allowSize: allowSize, fit: fit, alignment: alignment, matchTextDirection: matchTextDirection, diff --git a/catalyst_voices/packages/catalyst_voices_assets/lib/src/catalyst_svg_icon.dart b/catalyst_voices/packages/catalyst_voices_assets/lib/src/catalyst_svg_icon.dart index 88a827dfeb..0a9b094c8b 100644 --- a/catalyst_voices/packages/catalyst_voices_assets/lib/src/catalyst_svg_icon.dart +++ b/catalyst_voices/packages/catalyst_voices_assets/lib/src/catalyst_svg_icon.dart @@ -10,6 +10,9 @@ class CatalystSvgIcon extends StatelessWidget { /// See [SvgPicture.width] and [SvgPicture.height] final double? size; + /// Whether [size] can be applied to final widget. + final bool allowSize; + /// See [SvgPicture.fit] final BoxFit fit; @@ -54,6 +57,7 @@ class CatalystSvgIcon extends StatelessWidget { this.bytesLoader, { super.key, this.size, + this.allowSize = true, this.fit = BoxFit.contain, this.alignment = Alignment.center, this.matchTextDirection = false, @@ -77,6 +81,7 @@ class CatalystSvgIcon extends StatelessWidget { String? package = 'catalyst_voices_assets', SvgTheme? theme, this.size, + this.allowSize = true, this.fit = BoxFit.contain, this.alignment = Alignment.center, this.matchTextDirection = false, @@ -101,7 +106,7 @@ class CatalystSvgIcon extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveSize = size ?? IconTheme.of(context).size; + final effectiveSize = allowSize ? size ?? IconTheme.of(context).size : null; final effectiveColorFilter = allowColorFilter ? _colorFilter ?? IconTheme.of(context).asColorFilter() : null;