admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): update WelcomeScreen and MPINAuthScreen to use dynamic brand color for backgrounds

Browse Source
This commit is contained in:
Vaibhav Surve 2025-07-11 15:52:13 +05:30
parent 059e7c6c8b
commit 2926bb7216
3 changed files with 85 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
lib/view/auth/forgot_password_screen.dart
View File

@ -60,7 +60,7 @@ class _ForgotPasswordScreenState extends State<ForgotPasswordScreen>
return Scaffold(
body: Stack(
children: [
const _RedWaveBackground(),
_RedWaveBackground(brandRed: contentTheme.brandRed),
SafeArea(
child: Center(
child: Column(
@ -203,14 +203,16 @@ class _ForgotPasswordScreenState extends State<ForgotPasswordScreen>
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<ForgotPasswordScreen>
}
}
// 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));

98
lib/view/auth/login_option_screen.dart
View File

@ -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<WelcomeScreen>
with SingleTickerProviderStateMixin {
with SingleTickerProviderStateMixin, UIMixin {
late AnimationController _controller;
late Animation<double> _logoAnimation;
@ -51,50 +52,50 @@ class _WelcomeScreenState extends State<WelcomeScreen>
}
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<WelcomeScreen>
return Scaffold(
body: Stack(
children: [
const _RedWaveBackground(),
_RedWaveBackground(brandRed: contentTheme.brandRed),
SafeArea(
child: Center(
child: SingleChildScrollView(
@ -233,7 +234,7 @@ class _WelcomeScreenState extends State<WelcomeScreen>
),
),
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<WelcomeScreen>
/// 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));

30
lib/view/auth/mpin_auth_screen.dart
View File

@ -51,7 +51,7 @@ class _MPINAuthScreenState extends State<MPINAuthScreen>
return Scaffold(
body: Stack(
children: [
const _RedWaveBackground(),
_RedWaveBackground(brandRed: contentTheme.brandRed),
SafeArea(
child: Center(
child: Column(
@ -272,13 +272,17 @@ class _MPINAuthScreenState extends State<MPINAuthScreen>
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<MPINAuthScreen>
),
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<MPINAuthScreen>
}
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)