attemptsPill method
"N of M attempts remaining" pill. Colour escalates as the number drops, matching the expiry bar's urgency language.
Implementation
Widget attemptsPill(int remaining, int max) {
final Color bg;
final Color fg;
if (remaining <= 0) {
bg = const Color(0xFFFDE8E8);
fg = progressRed;
} else if (remaining <= (max / 2).ceil()) {
bg = const Color(0xFFFFF4E0);
fg = const Color(0xFFB8790A);
} else {
bg = const Color(0xFFEEF4FF);
fg = progressBlue;
}
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
decoration: BoxDecoration(
color: bg,
borderRadius: BorderRadius.circular(999),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 6,
height: 6,
decoration: BoxDecoration(shape: BoxShape.circle, color: fg),
),
const SizedBox(width: 6),
Text(
remaining <= 0
? 'No attempts remaining'
: '$remaining of $max attempts remaining',
style: TextStyle(
fontFamily: fontFamily,
fontSize: 11,
fontWeight: FontWeight.w600,
color: fg,
),
),
],
),
);
}