High Sec Account flow

mobile-app/lib/features/components/custom_text_field.dart

@@ -4,6 +4,8 @@ import 'package:resonance_network_wallet/features/components/label.dart';
 import 'package:resonance_network_wallet/features/styles/app_colors_theme.dart';
 import 'package:resonance_network_wallet/features/styles/app_text_theme.dart';
 
+enum TextFieldVariant { primary, secondary }
+
 class CustomTextField extends StatelessWidget {
   final String? labelText;
   final TextStyle? textStyle;
@@ -19,6 +21,7 @@ class CustomTextField extends StatelessWidget {
   final String? errorMsg;
   final double? leftPadding;
   final bool? disabled;
+  final TextFieldVariant variant;
 
   const CustomTextField({
     super.key,
@@ -36,10 +39,18 @@ class CustomTextField extends StatelessWidget {
     this.leftPadding,
     this.controller,
     this.disabled = false,
+    this.variant = TextFieldVariant.primary,
   }) : assert(initialValue == null || controller == null, 'Cannot provide both an initialValue and a controller.');
 
   @override
   Widget build(BuildContext context) {
+    final effectiveTextStyle = variant == TextFieldVariant.primary
+        ? context.themeText.smallTitle
+        : context.themeText.paragraph;
+    final effectiveHintStyle = variant == TextFieldVariant.primary
+        ? context.themeText.smallTitle?.copyWith(color: context.themeColors.textPrimary.useOpacity(0.5))
+        : context.themeText.paragraph?.copyWith(color: context.themeColors.textPrimary.useOpacity(0.5));
+
     // The main container for the entire widget
     return SizedBox(
       width: double.infinity,
@@ -60,7 +71,7 @@ class CustomTextField extends StatelessWidget {
                 onChanged: onChanged,
                 obscureText: obscureText,
                 // Styling for the text inside the input field
-                style: textStyle ?? context.themeText.smallTitle,
+                style: textStyle ?? effectiveTextStyle,
                 decoration: InputDecoration(
                   fillColor: fillColor,
                   isDense: true, // Reduces vertical padding
@@ -78,9 +89,7 @@ class CustomTextField extends StatelessWidget {
                   ), // Removes default padding
                   hintText: hintText,
                   // Style for the hint text when the field is empty
-                  hintStyle:
-                      hintStyle ??
-                      context.themeText.smallTitle?.copyWith(color: context.themeColors.textPrimary.useOpacity(0.5)),
+                  hintStyle: hintStyle ?? effectiveHintStyle,
                 ),
               ),
 

mobile-app/lib/features/components/gradient_text.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class GradientText extends StatelessWidget {
+  final String text;
+  final List<Color> colors;
+  final TextStyle? style;
+
+  const GradientText(this.text, {super.key, required this.colors, required this.style});
+
+  @override
+  Widget build(BuildContext context) {
+    return ShaderMask(
+      shaderCallback: (bounds) => LinearGradient(
+        colors: colors,
+        begin: const Alignment(0.00, -1.00),
+        end: const Alignment(0, 1),
+      ).createShader(bounds),
+      child: Text(text, style: style?.copyWith(color: Colors.white)),
+    );
+  }
+}

mobile-app/lib/features/components/steps.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:resonance_network_wallet/features/styles/app_colors_theme.dart';
+
+class StepsIndicator extends StatelessWidget {
+  final int currentStep;
+  final int totalSteps;
+  final double lineHeight = 2;
+  final double iconHeight = 6.56;
+
+  const StepsIndicator({super.key, required this.currentStep, required this.totalSteps})
+    : assert(currentStep >= 1 && currentStep <= totalSteps);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        SizedBox(
+          height: iconHeight,
+          child: Row(
+            children: List.generate(totalSteps, (index) {
+              return Expanded(
+                child: Row(
+                  children: [if (index < totalSteps) _buildStepLine(context, index), _buildStepPoint(context, index)],
+                ),
+              );
+            }),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildStepPoint(BuildContext context, int index) {
+    final isCompleted = index < currentStep - 1;
+    final isCurrent = index == currentStep - 1;
+    final iconPath = (isCompleted || isCurrent)
+        ? 'assets/high_security/step_indicator_active_icon.svg'
+        : 'assets/high_security/step_indicator_icon.svg';
+
+    return Center(child: SvgPicture.asset(iconPath, width: 4, height: iconHeight));
+  }
+
+  Widget _buildStepLine(BuildContext context, int index) {
+    final isCompleted = index < currentStep - 1;
+    final isCurrent = index == currentStep - 1;
+    final lineColor = (isCompleted || isCurrent) ? context.themeColors.checksum : const Color(0x66FFFFFF);
+
+    return Expanded(
+      child: Container(height: lineHeight, color: lineColor),
+    );
+  }
+}