N13/high security implementation 2

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

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:resonance_network_wallet/features/styles/app_text_theme.dart';
+
+class AccountTag extends StatelessWidget {
+  final String text;
+  final Color color;
+  final double? width;
+
+  const AccountTag({super.key, required this.text, required this.color, this.width});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          width: width,
+          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+          decoration: ShapeDecoration(
+            color: color,
+            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            spacing: 10,
+            children: [
+              Text(
+                text,
+                textAlign: TextAlign.center,
+                style: context.themeText.tiny?.copyWith(color: Colors.black),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -74,7 +74,7 @@ class CustomTextField extends StatelessWidget {
                 style: textStyle ?? effectiveTextStyle,
                 decoration: InputDecoration(
                   fillColor: fillColor,
-                  isDense: true, // Reduces vertical padding
+                  isDense: true,
                   enabledBorder: errorMsg != null
                       ? const OutlineInputBorder(borderSide: BorderSide(color: Colors.red, width: 1))
                       : InputBorder.none,
@@ -86,9 +86,8 @@ class CustomTextField extends StatelessWidget {
                     bottom: 10,
                     left: leftPadding ?? 11,
                     right: (trailing != null || icon != null) ? 40 : 11,
-                  ), // Removes default padding
+                  ),
                   hintText: hintText,
-                  // Style for the hint text when the field is empty
                   hintStyle: hintStyle ?? effectiveHintStyle,
                 ),
               ),

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

@@ -1,17 +1,30 @@
 import 'package:flutter/material.dart';
+import 'package:resonance_network_wallet/features/styles/app_colors_theme.dart';
+import 'package:resonance_network_wallet/features/styles/app_text_theme.dart';
 
 class GradientText extends StatelessWidget {
   final String text;
   final List<Color> colors;
+  final List<double>? stops;
   final TextStyle? style;
 
-  const GradientText(this.text, {super.key, required this.colors, required this.style});
+  const GradientText(this.text, {super.key, required this.colors, this.stops, required this.style});
+
+  factory GradientText.highSecurity(String text, BuildContext context) {
+    return GradientText(
+      'THEFT DETERRENCE',
+      colors: context.themeColors.aquaBlue,
+      stops: const [0.45, 1], // This means the gradient starts at 45% and ends at 100%
+      style: context.themeText.largeTitle,
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
     return ShaderMask(
       shaderCallback: (bounds) => LinearGradient(
         colors: colors,
+        stops: stops,
         begin: const Alignment(0.00, -1.00),
         end: const Alignment(0, 1),
       ).createShader(bounds),

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:resonance_network_wallet/features/styles/app_colors_theme.dart';
 import 'package:resonance_network_wallet/providers/connectivity_provider.dart';
 
 class NetworkStatusBanner extends ConsumerWidget {
@@ -17,15 +18,15 @@ class NetworkStatusBanner extends ConsumerWidget {
       width: double.infinity,
       padding: const EdgeInsets.symmetric(vertical: 2),
       decoration: const BoxDecoration(color: Color(0xFFFF1F45)),
-      child: const Row(
+      child: Row(
         mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Text(
             'Not Connected',
             style: TextStyle(
-              color: Color(0xFFF4F6F9),
+              color: context.themeColors.textPrimary,
               fontSize: 16,
               fontFamily: 'Fira Code',
               fontWeight: FontWeight.w400,

mobile-app/lib/features/main/screens/account_settings_screen.dart

@@ -2,10 +2,10 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:resonance_network_wallet/features/components/account_tag.dart';
 import 'package:resonance_network_wallet/providers/account_providers.dart';
 import 'package:resonance_network_wallet/providers/wallet_providers.dart';
 import 'package:resonance_network_wallet/providers/account_associations_providers.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:quantus_sdk/quantus_sdk.dart';
 import 'package:resonance_network_wallet/features/components/account_gradient_image.dart';
 import 'package:resonance_network_wallet/features/components/app_modal_bottom_sheet.dart';
@@ -16,20 +16,28 @@ import 'package:resonance_network_wallet/features/styles/app_size_theme.dart';
 import 'package:resonance_network_wallet/features/components/sphere.dart';
 import 'package:resonance_network_wallet/features/components/wallet_app_bar.dart';
 import 'package:resonance_network_wallet/features/main/screens/create_account_screen.dart';
+import 'package:resonance_network_wallet/features/main/screens/high_security/high_security_details_screen.dart';
 import 'package:resonance_network_wallet/features/main/screens/high_security/high_security_get_started_screen.dart';
 import 'package:resonance_network_wallet/features/main/screens/receive_screen.dart';
 import 'package:resonance_network_wallet/features/styles/app_colors_theme.dart';
 import 'package:resonance_network_wallet/features/styles/app_text_theme.dart';
 import 'package:resonance_network_wallet/shared/extensions/clipboard_extensions.dart';
 import 'package:resonance_network_wallet/shared/extensions/media_query_data_extension.dart';
+import 'package:resonance_network_wallet/shared/extensions/svg_extensions.dart';
 import 'package:resonance_network_wallet/utils/feature_flags.dart';
 
 class AccountSettingsScreen extends ConsumerStatefulWidget {
   final Account account;
   final String balance;
   final String checksumName;
-
-  const AccountSettingsScreen({super.key, required this.account, required this.balance, required this.checksumName});
+  final bool isHighSecurity;
+  const AccountSettingsScreen({
+    super.key,
+    required this.account,
+    required this.balance,
+    required this.checksumName,
+    required this.isHighSecurity,
+  });
 
   @override
   ConsumerState<AccountSettingsScreen> createState() => _AccountSettingsScreenState();
@@ -167,7 +175,7 @@ class _AccountSettingsScreenState extends ConsumerState<AccountSettingsScreen> {
               _buildShareSection(),
               const SizedBox(height: 20),
               _buildAddressSection(),
-              if (FeatureFlags.enableHighSecurity) ...[const SizedBox(height: 20), _buildSecuritySection()],
+              if (FeatureFlags.enableHighSecurity) ...[const SizedBox(height: 20), _buildHighSecuritySection(context)],
               if (widget.account.accountType == AccountType.keystone) ...[
                 const SizedBox(height: 20),
                 _buildDisconnectWalletButton(),
@@ -180,14 +188,14 @@ class _AccountSettingsScreenState extends ConsumerState<AccountSettingsScreen> {
     );
   }
 
-  Widget _buildSettingCard({required Widget child}) {
+  Widget _buildSettingCard({required Widget child, Color? color}) {
     return ClipRRect(
       borderRadius: BorderRadius.circular(4),
       child: BackdropFilter(
         filter: ImageFilter.blur(sigmaX: 25, sigmaY: 25),
         child: Container(
           decoration: ShapeDecoration(
-            color: context.themeColors.settingCard,
+            color: color ?? context.themeColors.settingCard,
             shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
           ),
           child: child,
@@ -197,6 +205,7 @@ class _AccountSettingsScreenState extends ConsumerState<AccountSettingsScreen> {
   }
 
   Widget _buildAccountHeader() {
+    final isHighSecurity = widget.isHighSecurity && FeatureFlags.enableHighSecurity;
     return _buildSettingCard(
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
@@ -214,7 +223,11 @@ class _AccountSettingsScreenState extends ConsumerState<AccountSettingsScreen> {
                 ],
               ),
             ),
-            const SizedBox(height: 5),
+            if (isHighSecurity) ...[
+              const SizedBox(height: 10),
+              AccountTag(text: 'High-Security', color: context.themeColors.accountTagHighSecurity, width: 177.0),
+            ],
+            const SizedBox(height: 10),
             Text(
               widget.checksumName,
               style: context.themeText.smallParagraph?.copyWith(color: context.themeColors.checksum),
@@ -277,22 +290,60 @@ class _AccountSettingsScreenState extends ConsumerState<AccountSettingsScreen> {
     );
   }
 
-  Widget _buildSecuritySection() {
+  Widget _buildHighSecuritySection(BuildContext context) {
+    final isHighSecurity = widget.isHighSecurity && FeatureFlags.enableHighSecurity;
+    final textColor = isHighSecurity ? context.themeColors.textSecondary : context.themeColors.textPrimary;
+    final secondRowTextColor = isHighSecurity ? context.themeColors.darkGray : context.themeColors.textPrimary;
+    final iconColor = isHighSecurity ? context.themeColors.textSecondary : context.themeColors.checksum;
+    final buttonBackgroundColor = isHighSecurity ? context.themeColors.checksum : context.themeColors.settingCard;
+    final subtitle = 'VIEW SETTINGS';
+
     return _buildSettingCard(
+      color: buttonBackgroundColor,
       child: InkWell(
         onTap: () {
-          Navigator.push(context, MaterialPageRoute(builder: (context) => const HighSecurityGetStartedScreen()));
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => isHighSecurity
+                  ? HighSecurityDetailsScreen(account: widget.account)
+                  : HighSecurityGetStartedScreen(account: widget.account),
+            ),
+          );
         },
-        child: Padding(
-          padding: const EdgeInsets.only(top: 12.0, left: 12.0, bottom: 12.0, right: 26.0),
+        child: Container(
+          width: double.infinity,
+          padding: const EdgeInsets.only(top: 12, left: 12, right: 26, bottom: 12),
+
           child: Row(
+            mainAxisSize: MainAxisSize.min,
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            spacing: 60,
             children: [
               Row(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                spacing: 12,
                 children: [
-                  SvgPicture.asset('assets/high_security_icon.svg', width: context.isTablet ? 28 : 20),
-                  const SizedBox(width: 12),
-                  Text('High Security', style: context.themeText.largeTag),
+                  SvgPictureExtensions.assetWithColor(
+                    'assets/high_security_icon.svg',
+                    width: context.isTablet ? 28 : 20,
+                    color: iconColor,
+                  ),
+                  Column(
+                    mainAxisSize: MainAxisSize.min,
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    spacing: 4,
+                    children: [
+                      Text('High Security', style: context.themeText.largeTag?.copyWith(color: textColor)),
+                      if (isHighSecurity) ...[
+                        Text(subtitle, style: context.themeText.tag?.copyWith(color: secondRowTextColor)),
+                      ],
+                    ],
+                  ),
                 ],
               ),
             ],