Improve UI phase2 #419

Catrya · 2026-01-26T00:09:25Z

conslidate purple and red color

Summary by CodeRabbit

Style
- Refined color palette with consolidated accent and status colors throughout the app.
- Updated message bubbles, buttons, tabs, and interactive elements to use the new color system.
Documentation
- Updated design system documentation to reflect completed color consolidation phases and migration guidelines.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- Remove red2 (duplicate of statusError) - Replace sellColor with red1 across 5 files

- Remove purpleAccent (#764BA2) - Replace with purpleButton (#7856AF) across 6 files - Consolidate 10 instances to unified purple color

…settings

coderabbitai · 2026-01-26T00:09:49Z

Walkthrough

This PR consolidates color constants across the design system by removing deprecated colors (red2, sellColor, purpleAccent) and introducing standardized replacements (red1, purpleButton, statusError). All usages throughout the codebase are updated to reference the new consolidated colors, and design system documentation is updated to reflect completion of Phases 1, 2, and 2b of the color consolidation effort.

Changes

Cohort / File(s)	Summary
Design System Documentation `docs/architecture/DESIGN_SYSTEM.md`	Updated last modified date, added Phase 2/2b completion status, documented color consolidation decisions (red and purple), expanded migration guidelines with concrete rules, and recorded decision log entries for color governance.
Core Theme `lib/core/app_theme.dart`	Added new color constants: `red1`, `purpleButton`, and `statusError`. Removed: `red2`, `sellColor`, and `purpleAccent`.
Chat & Messaging `lib/features/chat/widgets/message_bubble.dart`, `lib/features/disputes/widgets/dispute_message_bubble.dart`	Updated message bubble background colors from `purpleAccent` to `purpleButton` for non-peer and user-sent messages.
Home Screen `lib/features/home/screens/home_screen.dart`, `lib/features/home/widgets/order_list_item.dart`	Replaced `sellColor` with `red1` for active tab indicator and negative premium value styling.
Order Widgets `lib/features/order/widgets/currency_section.dart`, `lib/features/order/widgets/premium_section.dart`, `lib/features/order/widgets/price_type_section.dart`	Updated icon backgrounds and switch active colors from `purpleAccent` to `purpleButton` across multiple form sections.
Settings `lib/features/settings/notification_settings_screen.dart`	Changed Switch configurations from `activeColor` to `activeTrackColor` property (2 occurrences).
Shared Widgets `lib/shared/widgets/add_order_button.dart`, `lib/shared/widgets/order_filter.dart`	Replaced `sellColor` with `red1` for sell button background and filter text styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

Unify brand colors and consolidate color variants, phase 1 #407: Targets green consolidation as part of the same color-consolidation effort in design system and AppTheme.
Improve UI: refined modals, added confirmations and missing action buttons #224: Modifies button theme colors and style definitions in the same AppTheme class.
Feat/tabs and orders #98: Updates color constants and their usages across UI widgets in home screen and add_order_button components.

Suggested reviewers

grunch
chebizarro

Poem

🐰 Colors consolidate, old tokens fade away,
Red and purple dance in their new display,
Deprecated swiftly removed from sight,
Twelve files harmonized, design shines bright! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'Improve UI phase2' is vague and generic, using non-descriptive terms that don't convey the actual changeset focus of consolidating color constants across the codebase.	Consider a more specific title like 'Consolidate red and purple color constants' or 'Refactor UI colors in Phase 2' that better reflects the actual changes made.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@docs/architecture/DESIGN_SYSTEM.md`:
- Around line 351-354: Update the Goals section text to remove the contradictory
"deferred" phrasing by explicitly stating that purple consolidation was moved to
Phase 2b and is now completed; locate the "Goals:" block (the bulleted items
including "Consolidate 3 red variants → 2 red variants" and the purple
consolidation line) and replace the "⏸️ Purple consolidation deferred (out of
scope for Phase 2)" line with wording such as "✔️ Purple consolidation moved to
Phase 2b and completed" so the document no longer contradicts the Phase 2b
completion status.

coderabbitai · 2026-01-26T00:14:08Z

docs/architecture/DESIGN_SYSTEM.md

 **Goals:**
-1. Consolidate 3 red variants → 2 red variants (or justify keeping 3)
-2. Clarify purple usage or consolidate to 1 purple
-3. Document clear usage guidelines for each color
-
-#### Work Required
+1. ✅ Consolidate 3 red variants → 2 red variants with clear semantics
+2. ⏸️ Purple consolidation deferred (out of scope for Phase 2)



⚠️ Potential issue | 🟡 Minor

Clarify Phase 2 vs Phase 2b wording to avoid contradiction.

Line 353 says purple consolidation was deferred, but later the doc marks Phase 2b as complete. Consider updating this line to reflect that purple moved to Phase 2b and is now done.

✏️ Suggested wording tweak

-2. ⏸️ Purple consolidation deferred (out of scope for Phase 2) +2. ✅ Purple consolidation completed in Phase 2b (see Phase 2b section)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

**Goals:**

1. Consolidate 3 red variants → 2 red variants (or justify keeping 3)

2. Clarify purple usage or consolidate to 1 purple

3. Document clear usage guidelines for each color

#### Work Required

1. ✅ Consolidate 3 red variants → 2 red variants with clear semantics

2. ⏸️ Purple consolidation deferred (out of scope for Phase 2)

**Goals:**

1. ✅ Consolidate 3 red variants → 2 red variants with clear semantics

2. ✅ Purple consolidation completed in Phase 2b (see Phase 2b section)

🤖 Prompt for AI Agents

In `@docs/architecture/DESIGN_SYSTEM.md` around lines 351 - 354, Update the Goals section text to remove the contradictory "deferred" phrasing by explicitly stating that purple consolidation was moved to Phase 2b and is now completed; locate the "Goals:" block (the bulleted items including "Consolidate 3 red variants → 2 red variants" and the purple consolidation line) and replace the "⏸️ Purple consolidation deferred (out of scope for Phase 2)" line with wording such as "✔️ Purple consolidation moved to Phase 2b and completed" so the document no longer contradicts the Phase 2b completion status.

grunch

Le pedí a una IA que investigue si es buena idea usar texto negro sobre rojo, aquí la respuesta:

1. ¿Texto negro sobre botón rojo es accesible?

Depende del rojo concreto, pero en general es una combinación riesgosa.

Con rojo puro brillante (#FF0000) y texto negro, el contraste teórico ronda ~5.25:1, lo que cumple WCAG AA para texto normal.
El problema real: casi ningún botón usa rojo puro.
En la práctica se usan rojos oscuros, desaturados o con gradiente, y ahí el contraste cae por debajo de 4.5:1, fallando accesibilidad.

👉 Conclusión técnica:
Negro sobre rojo puede cumplir en laboratorio, pero falla fácilmente en producción.

2. Impacto específico en personas mayores 👵👴

Sí, puede afectar claramente la lectura, por varios motivos bien documentados:

Cambios visuales con la edad

Disminuye la sensibilidad al contraste
El cristalino se vuelve más amarillento, lo que reduce la percepción del rojo
Más dificultad para distinguir bordes oscuros sobre fondos saturados

Resultado:

El texto negro “se hunde” visualmente en el rojo, sobre todo en pantallas pequeñas y con brillo bajo.

Esto no es solo teoría: en tests de usabilidad, personas mayores tardan más en leer botones rojo+negro que rojo+blanco o rojo+blanco con ícono.

3. ¿Es buena práctica poner texto negro sobre rojo?

📚 Estado de la práctica (UX / accesibilidad)

No es una buena práctica recomendada.
De hecho:

Material Design (Google) → rojo con texto blanco
Apple HIG → botones destructivos rojo + blanco
Gov.uk Design System → rojo oscuro + texto blanco, alto contraste
WCAG advisory techniques → evitar texto oscuro sobre colores saturados

No porque “esté prohibido”, sino porque:

es frágil al contraste
falla con visión envejecida
falla con brillo bajo / modo exterior
falla con pantallas OLED mal calibradas

4. Problema extra: semántica + legibilidad

El botón rojo suele significar:

peligro
acción destructiva
alto riesgo

Si además:

el texto es negro
el peso tipográfico no es fuerte

➡️ el usuario percibe urgencia, pero no entiende rápido qué hace
Eso es peligroso en flujos financieros.

5. Recomendaciones concretas (prácticas y seguras)

✅ Mejor opción

Texto blanco (#FFFFFF) sobre rojo
Contraste ≥ 4.5:1 (ideal ≥ 7:1)
Fuente semibold o bold
Tamaño mínimo 14–16 px en mobile

✅ Aún mejor

Blanco + ícono (↑ vender, ⚠️ riesgo)
Bordes claros o sombra suave para separar del fondo

❌ Evitar

Negro sobre rojo oscuro
Negro sobre rojo con gradiente
Tipografía fina
Texto pequeño

AndreaDiazCorreia · 2026-01-26T21:59:52Z

Por lo que menciona @grunch fue que le baje la opacidad a ese boton, capaz no es necesario tener un solo rojo sino distintos todos segun el uso, lo mismo con los verdes y otros colores y estandarizar mas sus usos

Catrya added 4 commits January 24, 2026 21:04

consolidate red colors to 2 variants

49eacfb

- Remove red2 (duplicate of statusError) - Replace sellColor with red1 across 5 files

consolidate purple variants to single color (Phase 2b)

170a047

- Remove purpleAccent (#764BA2) - Replace with purpleButton (#7856AF) across 6 files - Consolidate 10 instances to unified purple color

replace deprecated activeColor with activeTrackColor in notification …

639fc91

…settings

update documentation phase 2

1d9abfa

coderabbitai bot reviewed Jan 26, 2026

View reviewed changes

grunch requested changes Jan 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve UI phase2 #419

Improve UI phase2 #419

Uh oh!

Catrya commented Jan 26, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 26, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Jan 26, 2026

Uh oh!

grunch left a comment

Uh oh!

AndreaDiazCorreia commented Jan 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Improve UI phase2 #419

Are you sure you want to change the base?

Improve UI phase2 #419

Uh oh!

Conversation

Catrya commented Jan 26, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

grunch left a comment

Choose a reason for hiding this comment

1. ¿Texto negro sobre botón rojo es accesible?

2. Impacto específico en personas mayores 👵👴

Cambios visuales con la edad

3. ¿Es buena práctica poner texto negro sobre rojo?

📚 Estado de la práctica (UX / accesibilidad)

4. Problema extra: semántica + legibilidad

5. Recomendaciones concretas (prácticas y seguras)

✅ Mejor opción

✅ Aún mejor

❌ Evitar

Uh oh!

AndreaDiazCorreia commented Jan 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Catrya commented Jan 26, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 26, 2026 •

edited

Loading