fix(favoritos): restyle the dashed custom-station CTA to spec

Tier 4 visual fidelity, audit 4.5 (t4 line 235): the border and the
label/icon now use the prototype's two DIFFERENT opacities
(rgba(255,255,255,.16) stroke vs rgba(242,247,250,.6) text/icon,
previously one shared 50% colour for both), padding is a uniform 14
instead of symmetric(18,16), and the icon is a plain add glyph at 20px
instead of add_circle_outline_rounded.
This commit is contained in:
2026-07-30 12:40:59 +02:00
parent 163241d4a1
commit ca2400f0d4
2 changed files with 46 additions and 6 deletions
+19 -6
View File
@@ -474,24 +474,37 @@ class _CtaEmisoraPersonalizada extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context); final l10n = AppLocalizations.of(context);
final color = Theme.of( // Audit 4.5 (t4 line 235): the border and the label/icon are TWO
// different opacities in the prototype — `rgba(255,255,255,.16)` for
// the dashed stroke, `rgba(242,247,250,.6)` for the text/icon — not one
// shared 50% colour for both.
final colorBorde = Colors.white.withValues(alpha: 0.16);
final colorTexto = Theme.of(
context, context,
).colorScheme.onSurface.withValues(alpha: 0.5); ).colorScheme.onSurface.withValues(alpha: 0.6);
return CustomPaint( return CustomPaint(
painter: _DashedBorderPainter(color: color), painter: _DashedBorderPainter(color: colorBorde),
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
onTap: onTap, onTap: onTap,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 16), key: const Key('custom-station-cta-padding'),
padding: const EdgeInsets.all(14),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon(Icons.add_circle_outline_rounded, color: color), Icon(Icons.add_rounded, size: 20, color: colorTexto),
const SizedBox(width: 8), const SizedBox(width: 8),
Text(l10n.customStationsAddCta, style: TextStyle(color: color)), Text(
l10n.customStationsAddCta,
style: TextStyle(
fontSize: 13.5,
fontWeight: FontWeight.w800,
color: colorTexto,
),
),
], ],
), ),
), ),
@@ -102,6 +102,33 @@ void main() {
await tester.pump(const Duration(milliseconds: 100)); await tester.pump(const Duration(milliseconds: 100));
} }
group('visual fidelity (audit 4.5): dashed custom-station CTA', () {
testWidgets(
'padding is 14 all around, the icon is a plain add glyph at 20px, '
'and the label is 13.5px/w800 (t4 line 235)',
(tester) async {
final estado = await crearEstadoVacio();
addTearDown(estado.dispose);
await tester.pumpWidget(buildScreen(estado));
await pumpStable(tester);
final padding = tester.widget<Padding>(
find.byKey(const Key('custom-station-cta-padding')),
);
expect(padding.padding, const EdgeInsets.all(14));
expect(find.byIcon(Icons.add_circle_outline_rounded), findsNothing);
final icon = tester.widget<Icon>(find.byIcon(Icons.add_rounded));
expect(icon.size, 20);
final l10n = lookupAppLocalizations(const Locale('en'));
final texto = tester.widget<Text>(find.text(l10n.customStationsAddCta));
expect(texto.style?.fontSize, 13.5);
expect(texto.style?.fontWeight, FontWeight.w800);
},
);
});
// ── EstadoRadio: new state surface (state-layer, not widget-layer) ─────── // ── EstadoRadio: new state surface (state-layer, not widget-layer) ───────
test('listaFavoritosManual returns favorites in stored order, NOT re-sorted ' test('listaFavoritosManual returns favorites in stored order, NOT re-sorted '