feat: account creation task picture

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,
+      ),
+    );
+  }
+}

catalyst_voices/lib/pages/discovery/discovery_page.dart

@@ -91,6 +91,10 @@ class _Segment extends StatelessWidget {
                   VoicesDialog.show<void>(
                     context: context,
                     builder: (context) {
+                      return VoicesDesktopPanelsDialog(
+                        left: Center(child: TaskKeychainPicture()),
+                        right: Column(),
+                      );
                       return const VoicesDesktopInfoDialog(title: Text(''));
                     },
                   ),

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,

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;