diff --git a/lib/view/auth/forgot_password_screen.dart b/lib/view/auth/forgot_password_screen.dart index 76a9330..fbc15f3 100644 --- a/lib/view/auth/forgot_password_screen.dart +++ b/lib/view/auth/forgot_password_screen.dart @@ -60,7 +60,7 @@ class _ForgotPasswordScreenState extends State return Scaffold( body: Stack( children: [ - const _RedWaveBackground(), + _RedWaveBackground(brandRed: contentTheme.brandRed), SafeArea( child: Center( child: Column( @@ -203,14 +203,16 @@ class _ForgotPasswordScreenState extends State padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 16), borderRadiusAll: 10, backgroundColor: _isLoading - ? Colors.red.withOpacity(0.6) + ? contentTheme.brandRed.withOpacity(0.6) : contentTheme.brandRed, child: _isLoading ? const SizedBox( height: 20, width: 20, child: CircularProgressIndicator( - color: Colors.white, strokeWidth: 2), + color: Colors.white, + strokeWidth: 2, + ), ) : MyText.bodyMedium( 'Send Reset Link', @@ -238,25 +240,30 @@ class _ForgotPasswordScreenState extends State } } -// Same red wave background as MPINAuthScreen +// Red background using dynamic brandRed class _RedWaveBackground extends StatelessWidget { - const _RedWaveBackground(); + final Color brandRed; + const _RedWaveBackground({required this.brandRed}); @override Widget build(BuildContext context) { return CustomPaint( - painter: _WavePainter(), + painter: _WavePainter(brandRed), size: Size.infinite, ); } } class _WavePainter extends CustomPainter { + final Color brandRed; + + _WavePainter(this.brandRed); + @override void paint(Canvas canvas, Size size) { final paint1 = Paint() - ..shader = const LinearGradient( - colors: [Color(0xFFB71C1C), Color(0xFFD32F2F)], + ..shader = LinearGradient( + colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)], begin: Alignment.topLeft, end: Alignment.bottomRight, ).createShader(Rect.fromLTWH(0, 0, size.width, size.height)); diff --git a/lib/view/auth/login_option_screen.dart b/lib/view/auth/login_option_screen.dart index 572a402..2432577 100644 --- a/lib/view/auth/login_option_screen.dart +++ b/lib/view/auth/login_option_screen.dart @@ -6,6 +6,7 @@ import 'package:marco/view/auth/email_login_form.dart'; import 'package:marco/view/auth/otp_login_form.dart'; import 'package:marco/helpers/services/api_endpoints.dart'; import 'package:marco/view/auth/request_demo_bottom_sheet.dart'; +import 'package:marco/helpers/utils/mixins/ui_mixin.dart'; enum LoginOption { email, otp } @@ -24,7 +25,7 @@ class WelcomeScreen extends StatefulWidget { } class _WelcomeScreenState extends State - with SingleTickerProviderStateMixin { + with SingleTickerProviderStateMixin, UIMixin { late AnimationController _controller; late Animation _logoAnimation; @@ -51,50 +52,50 @@ class _WelcomeScreenState extends State } void _showLoginDialog(BuildContext context, LoginOption option) { - showDialog( - context: context, - barrierDismissible: false, // Prevent dismiss on outside tap - builder: (_) => Dialog( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), - insetPadding: const EdgeInsets.all(24), - child: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(24), - child: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 420), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - // Row with title and close button - Row( - children: [ - Expanded( - child: MyText( - option == LoginOption.email - ? "Login with Email" - : "Login with OTP", - fontSize: 20, - fontWeight: 700, + showDialog( + context: context, + barrierDismissible: false, // Prevent dismiss on outside tap + builder: (_) => Dialog( + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), + insetPadding: const EdgeInsets.all(24), + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(24), + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 420), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + // Row with title and close button + Row( + children: [ + Expanded( + child: MyText( + option == LoginOption.email + ? "Login with Email" + : "Login with OTP", + fontSize: 20, + fontWeight: 700, + ), ), - ), - IconButton( - icon: const Icon(Icons.close), - onPressed: () => Navigator.of(context).pop(), - ), - ], - ), - const SizedBox(height: 20), - option == LoginOption.email - ? EmailLoginForm() - : const OTPLoginScreen(), - ], + IconButton( + icon: const Icon(Icons.close), + onPressed: () => Navigator.of(context).pop(), + ), + ], + ), + const SizedBox(height: 20), + option == LoginOption.email + ? EmailLoginForm() + : const OTPLoginScreen(), + ], + ), ), ), ), ), - ), - ); -} + ); + } @override Widget build(BuildContext context) { @@ -103,7 +104,7 @@ class _WelcomeScreenState extends State return Scaffold( body: Stack( children: [ - const _RedWaveBackground(), + _RedWaveBackground(brandRed: contentTheme.brandRed), SafeArea( child: Center( child: SingleChildScrollView( @@ -233,7 +234,7 @@ class _WelcomeScreenState extends State ), ), style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFFB71C1C), // Red background + backgroundColor: contentTheme.brandRed, foregroundColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(14), @@ -255,23 +256,28 @@ class _WelcomeScreenState extends State /// Custom red wave background shifted lower to reduce red area at top class _RedWaveBackground extends StatelessWidget { - const _RedWaveBackground(); + final Color brandRed; + const _RedWaveBackground({required this.brandRed}); @override Widget build(BuildContext context) { return CustomPaint( - painter: _WavePainter(), + painter: _WavePainter(brandRed), size: Size.infinite, ); } } class _WavePainter extends CustomPainter { + final Color brandRed; + + _WavePainter(this.brandRed); + @override void paint(Canvas canvas, Size size) { final paint1 = Paint() - ..shader = const LinearGradient( - colors: [Color(0xFFB71C1C), Color(0xFFD32F2F)], + ..shader = LinearGradient( + colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)], begin: Alignment.topLeft, end: Alignment.bottomRight, ).createShader(Rect.fromLTWH(0, 0, size.width, size.height)); diff --git a/lib/view/auth/mpin_auth_screen.dart b/lib/view/auth/mpin_auth_screen.dart index adbfe6f..c53164d 100644 --- a/lib/view/auth/mpin_auth_screen.dart +++ b/lib/view/auth/mpin_auth_screen.dart @@ -51,7 +51,7 @@ class _MPINAuthScreenState extends State return Scaffold( body: Stack( children: [ - const _RedWaveBackground(), + _RedWaveBackground(brandRed: contentTheme.brandRed), SafeArea( child: Center( child: Column( @@ -272,13 +272,17 @@ class _MPINAuthScreenState extends State elevation: 2, padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16), borderRadiusAll: 10, - backgroundColor: contentTheme.brandRed, + backgroundColor: controller.isLoading.value + ? contentTheme.brandRed.withOpacity(0.6) + : contentTheme.brandRed, child: controller.isLoading.value ? const SizedBox( height: 20, width: 20, child: CircularProgressIndicator( - color: Colors.white, strokeWidth: 2), + color: Colors.white, + strokeWidth: 2, + ), ) : MyText.bodyMedium( isNewUser ? 'Generate MPIN' : 'Submit MPIN', @@ -311,9 +315,7 @@ class _MPINAuthScreenState extends State ), if (showBackToLogin) TextButton.icon( - onPressed: () async { - await LocalStorage.logout(); - }, + onPressed: () async => await LocalStorage.logout(), icon: const Icon(Icons.arrow_back, size: 18, color: Colors.redAccent), label: MyText.bodyMedium( @@ -330,31 +332,35 @@ class _MPINAuthScreenState extends State } class _RedWaveBackground extends StatelessWidget { - const _RedWaveBackground(); + final Color brandRed; + const _RedWaveBackground({required this.brandRed}); @override Widget build(BuildContext context) { return CustomPaint( - painter: _WavePainter(), + painter: _WavePainter(brandRed), size: Size.infinite, ); } } class _WavePainter extends CustomPainter { + final Color brandRed; + const _WavePainter(this.brandRed); + @override void paint(Canvas canvas, Size size) { final paint1 = Paint() - ..shader = const LinearGradient( - colors: [Color(0xFFB71C1C), Color(0xFFD32F2F)], + ..shader = LinearGradient( + colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)], begin: Alignment.topLeft, end: Alignment.bottomRight, ).createShader(Rect.fromLTWH(0, 0, size.width, size.height)); final path1 = Path() ..moveTo(0, size.height * 0.2) - ..quadraticBezierTo(size.width * 0.25, size.height * 0.05, - size.width * 0.5, size.height * 0.15) + ..quadraticBezierTo( + size.width * 0.25, size.height * 0.05, size.width * 0.5, size.height * 0.15) ..quadraticBezierTo( size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1) ..lineTo(size.width, 0)