diff --git a/docs/architecture/DESIGN_SYSTEM.md b/docs/architecture/DESIGN_SYSTEM.md index eb57d011..df4fce53 100644 --- a/docs/architecture/DESIGN_SYSTEM.md +++ b/docs/architecture/DESIGN_SYSTEM.md @@ -1,7 +1,7 @@ # Design System - Color Refactoring Project -**Last Updated:** January 14, 2026 -**Status:** 🚧 In Progress - Phase 1 of 4 Complete +**Last Updated:** January 24, 2026 +**Status:** 🚧 In Progress - Phases 1, 2, 2b Complete (Green/Red/Purple) --- @@ -228,20 +228,22 @@ TO REMOVE/MERGE: - ❌ **Background Variants:** 7 different shades - ❌ **Files Needing Refactor:** 14+ priority files -**Current Status (After Phase 1):** -- βœ… **Total Color Definitions:** ~48 in AppTheme (removed green2) +**Current Status (After Phase 2 + 2b + 2c):** +- βœ… **Total Color Definitions:** ~46 in AppTheme (removed green2, red2, purpleAccent; restored sellColor) - βœ… **Hardcoded Colors:** 0 outside app_theme.dart - βœ… **Green Variants:** 1 (unified to #8CC63F) -- ⚠️ **Red Variants:** 3 (needs consolidation in Phase 2) +- βœ… **Red Variants:** 3 (red1 + statusError + sellColor) - sellColor restored for UX familiarity +- βœ… **Purple Variants:** 1 (purpleButton #7856AF) - ⚠️ **Background Variants:** 7 (needs consolidation in Phase 4) -- ⚠️ **Files Needing Refactor:** 0 for green/hardcoded, pending for phases 2-4 +- ⚠️ **Files Needing Refactor:** 0 for green/red/purple/hardcoded, pending for phases 3-4 -**Final Target (After Phase 4):** -- βœ… **Total Color Definitions:** ~35 (remove redundant) +**Final Target (After All Phases):** +- βœ… **Total Color Definitions:** ~36 (remove redundant) - βœ… **Hardcoded Colors:** 0 (except in app_theme.dart) -- βœ… **Green Variants:** 1 (standard brand green) -- βœ… **Red Variants:** 2 (error + sell) -- βœ… **Background Variants:** 4 (clear hierarchy) +- βœ… **Green Variants:** 1 (standard brand green) βœ… DONE +- βœ… **Red Variants:** 3 (red1 + statusError + sellColor) βœ… DONE +- βœ… **Purple Variants:** 1 (purpleButton) βœ… DONE +- ⚠️ **Background Variants:** 4 (clear hierarchy) - βœ… **Files Needing Refactor:** 0 --- @@ -254,7 +256,8 @@ The refactoring is divided into **4 phases**, prioritized by impact and risk: ``` βœ… Phase 1: Green Unification + Hardcoded Cleanup (COMPLETE) -⚠️ Phase 2: Red & Purple Consolidation (TO IMPLEMENT) +βœ… Phase 2: Red Consolidation (COMPLETE) +βœ… Phase 2b: Purple Consolidation (COMPLETE) ⚠️ Phase 3: Text Color Standardization (TO IMPLEMENT) ⚠️ Phase 4: Background Hierarchy (TO IMPLEMENT - HIGH RISK) ``` @@ -335,100 +338,189 @@ The refactoring is divided into **4 phases**, prioritized by impact and risk: --- -### ⚠️ Phase 2: Red & Purple Consolidation +### βœ… Phase 2: Red Consolidation (REDS ONLY - COMPLETE) -**Status:** ⚠️ **TO IMPLEMENT** -**Estimated Effort:** Small (~8-12 files) -**Risk Level:** 🟑 Medium +**Status:** βœ… **COMPLETE** - Final decision: Keep 3 red variants +**Completed:** January 24, 2026 (Updated: February 2, 2026) +**Estimated Effort:** Small (~6 files) +**Risk Level:** 🟒 Low **Priority:** High #### Scope **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 with clear semantics (red2 removed) +2. ⏸️ Purple consolidation deferred (out of scope for Phase 2) -**Red Colors - Decision Needed:** +#### Final Decision (Updated February 2, 2026) -Current state: +**Final Red Strategy:** Keep 3 reds with clear semantic purposes ```dart -static const Color red1 = Color(0xFFD84D4D); // Darkest - legacy? -static const Color red2 = Color(0xFFEF6A6A); // Medium - statusError -static const Color sellColor = Color(0xFFFF8A8A); // Lightest - sell actions -``` +/// Red color for destructive actions and critical operations +/// Use for: Cancel buttons, dispute buttons, critical operations, inactive states +static const Color red1 = Color(0xFFD84D4D); -**Option A:** Keep 2 reds (error + sell) -```dart -// Remove red1 if unused -static const Color statusError = Color(0xFFEF6A6A); // Error states -static const Color sellColor = Color(0xFFFF8A8A); // Sell actions -``` +/// Red color for error states, validation failures, and error notifications +/// Use for: Error messages, failed operations, validation errors +static const Color statusError = Color(0xFFEF6A6A); -**Option B:** Keep 2 reds with different semantic -```dart -static const Color statusError = Color(0xFFD84D4D); // Darker for errors (more serious) -static const Color sellColor = Color(0xFFFF8A8A); // Lighter for sell (less aggressive) -// Remove red2 +/// Red color for sell actions and sell-related UI elements +/// Use for: Sell buttons, sell tabs, negative premiums/discounts +static const Color sellColor = Color(0xFFFF8A8A); ``` -**Purple Colors - Decision Needed:** +**Removed:** +- ❌ `red2` - Exact duplicate of `statusError` + +**Restored:** +- βœ… `sellColor` - **Restored on February 2, 2026** due to user familiarity and visual appeal + +**Rationale:** +- `red1` (#D84D4D) - Darker, more saturated red for destructive/critical actions +- `statusError` (#EF6A6A) - Medium red for error states and validation messaging +- `sellColor` (#FF8A8A) - Lighter red that users are familiar with for sell actions +- **Key insight:** Users are already accustomed to `sellColor` in sell buttons and actions +- **Visual feedback:** The lighter `sellColor` looks better visually in the UI compared to darker `red1` +- Clear semantic separation: destructive actions vs. error states vs. sell actions + +#### Work Completed (Updated February 2, 2026) + +**Initial Work (January 24, 2026):** + +1. βœ… `lib/core/app_theme.dart` + - Removed `red2` constant (duplicate) + - Initially removed `sellColor` (later restored) + - Added documentation comments to `red1` and `statusError` -Current state: +**Restoration (February 2, 2026):** + +1. βœ… `lib/core/app_theme.dart` + - βœ… Restored `sellColor` constant with documentation + +2. βœ… `lib/features/home/widgets/order_list_item.dart` + - βœ… Reverted `red1` β†’ `sellColor` (premium color) + +3. βœ… `lib/features/home/screens/home_screen.dart` + - βœ… Reverted `red1` β†’ `sellColor` (sell tab button) + +4. βœ… `lib/shared/widgets/add_order_button.dart` + - βœ… Reverted `red1` β†’ `sellColor` (sell button background) + +5. βœ… `lib/shared/widgets/order_filter.dart` + - βœ… Reverted `red1` β†’ `sellColor` (2 instances - discount and min labels) + +#### Testing + +- βœ… All 6 files successfully updated (twice - initial consolidation then restoration) +- βœ… Zero new `flutter analyze` issues introduced +- βœ… Only `red2` removed from codebase (sellColor restored) +- βœ… Colors centralized in `app_theme.dart` + +#### Final Metrics + +- **Files Modified:** 6 (initial) + 5 (restoration) = 11 total changes +- **Color Constants Removed:** 1 (red2 only) +- **Color Constants Kept:** 3 (red1, statusError, sellColor) +- **Replacements Made:** 5 instances removed then 5 restored +- **New Issues:** 0 + +#### Purple Colors - Completed in Same Session + +**Status:** βœ… **COMPLETE** + +After completing red consolidation, purple consolidation was implemented in the same session: +- βœ… Consolidated to 1 purple: `purpleButton` (#7856AF) +- ❌ Removed: `purpleAccent` (#764BA2) +- βœ… Updated 5 files to use `purpleButton` + +See dedicated Phase 2b section below for full details. + +#### Success Criteria + +- βœ… Clear semantic meaning for each red variant +- βœ… No unused color constants (red2, sellColor removed) +- βœ… All usages centralized to AppTheme +- βœ… Zero new flutter analyze issues +- βœ… Documentation added to remaining colors +- βœ… No visual regressions + +--- + +### βœ… Phase 2b: Purple Consolidation (COMPLETE) + +**Status:** βœ… **COMPLETE** +**Completed:** January 24, 2026 (same session as Phase 2) +**Estimated Effort:** Small (~6 files) +**Risk Level:** 🟒 Low + +#### Scope + +**Goal:** Consolidate 2 purple variants β†’ 1 purple variant + +#### Decision Made + +**Final Purple Strategy:** Keep single purple with broader usage scope ```dart -static const Color purpleAccent = Color(0xFF764BA2); // Accent elements -static const Color purpleButton = Color(0xFF7856AF); // Submit buttons +/// Purple color for accent elements, buttons, and decorative UI elements +/// Use for: Submit buttons, message bubbles, section accents, interactive elements +static const Color purpleButton = Color(0xFF7856AF); ``` -**Option A:** Keep both with clear guidelines -- Document when to use purpleAccent vs purpleButton -- Ensure semantic naming is clear +**Removed:** +- ❌ `purpleAccent` (#764BA2) - Replaced with `purpleButton` -**Option B:** Consolidate to 1 purple -- Choose which purple to keep -- Replace all usages of the other +**Rationale:** +- Visual difference between #764BA2 and #7856AF is imperceptible (only 2-11 RGB points) +- No semantic benefit to having two nearly identical purples +- User preference: Selected #7856AF as the final color +- Simplifies design system and reduces decision-making overhead -#### Tasks Checklist +#### Work Completed -**Planning:** -- [ ] Audit all `red1`, `red2`, `sellColor` usages -- [ ] Audit all `purpleAccent`, `purpleButton` usages -- [ ] Decide on final red color strategy (Option A or B) -- [ ] Decide on final purple color strategy (Option A or B) -- [ ] Document rationale for decisions +**Files Modified (6 total):** -**Implementation:** -- [ ] Update app_theme.dart with final colors -- [ ] Find and replace all red color usages -- [ ] Find and replace all purple color usages -- [ ] Remove unused color constants -- [ ] Add usage comments to remaining colors +1. βœ… `lib/core/app_theme.dart` + - Removed `purpleAccent` constant + - Added documentation comments to `purpleButton` -**Testing:** -- [ ] Run `flutter analyze` (must be zero issues) -- [ ] Visual testing on all affected screens -- [ ] Screenshot comparison (before/after) +2. βœ… `lib/features/disputes/widgets/dispute_message_bubble.dart` + - `purpleAccent` β†’ `purpleButton` (user message bubbles) -**Documentation:** -- [ ] Update this document with decisions -- [ ] Add to Decision Log section -- [ ] Create PR with clear description +3. βœ… `lib/features/chat/widgets/message_bubble.dart` + - `purpleAccent` β†’ `purpleButton` (3 instances - image, file, text messages) + +4. βœ… `lib/features/order/widgets/currency_section.dart` + - `purpleAccent` β†’ `purpleButton` (icon background) + +5. βœ… `lib/features/order/widgets/price_type_section.dart` + - `purpleAccent` β†’ `purpleButton` (2 instances - icon background, switch track) + +6. βœ… `lib/features/order/widgets/premium_section.dart` + - `purpleAccent` β†’ `purpleButton` (3 instances - icon background, slider track, overlay) -**Purple-related files:** -- `lib/features/order/widgets/currency_section.dart` (purpleAccent) -- `lib/features/order/widgets/action_buttons.dart` (purpleButton) -- Possibly 2-3 other files +#### Testing + +- βœ… All 6 files successfully updated +- βœ… Zero new `flutter analyze` errors (only pre-existing deprecation warnings) +- βœ… No `purpleAccent` references remaining in codebase +- βœ… Colors centralized in `app_theme.dart` + +#### Metrics + +- **Files Modified:** 6 +- **Color Constants Removed:** 1 (purpleAccent) +- **Color Constants Kept:** 1 (purpleButton) +- **Replacements Made:** 10 instances (purpleAccent β†’ purpleButton) +- **New Issues:** 0 #### Success Criteria -- βœ… Clear semantic meaning for each red variant kept -- βœ… Purple usage guidelines documented (if keeping both) +- βœ… Single purple color for all use cases - βœ… No unused color constants - βœ… All usages centralized to AppTheme -- βœ… Zero flutter analyze issues -- βœ… No visual regressions +- βœ… Zero new flutter analyze issues +- βœ… Documentation added to remaining color +- βœ… No visual regressions (colors nearly identical) --- @@ -774,7 +866,152 @@ The custom gray `#9aa1b6` was only used in walkthrough screen text. `Colors.whit ### Phase 2 Decisions -*To be documented during Phase 2 implementation* +#### Decision 2.1: Two-Red Strategy + +**Decision:** Keep `red1` (#D84D4D) for actions/buttons and `statusError` (#EF6A6A) for errors + +**Date:** January 24, 2026 + +**Rationale:** +1. **Color harmony with brand green:** + - Brand green (#8CC63F) has 68% saturation, 78% brightness + - `red1` (#D84D4D) has 64% saturation, 85% brightness + - Similar saturation levels create visual harmony and balance + - Both colors feel like they "belong together" in the design system + +2. **Clear semantic separation:** + - `red1`: Destructive actions, sell buttons, critical operations + - `statusError`: Error states, validation failures, error notifications + - No overlap in purpose or usage + +3. **Active usage:** + - `red1`: Used in 5 locations (buttons, inactive states) + - `statusError`: Used in 13 locations (error messages, validation) + - Both colors have established usage patterns + +4. **Visual hierarchy:** + - Darker red (`red1`) for important user actions (demands attention) + - Lighter red (`statusError`) for informational errors (less aggressive) + +**Alternatives Considered:** +- **Option A:** Use `sellColor` (#FF8A8A) for buttons + - ❌ Rejected: Too light, weak visual presence next to vibrant green + - ❌ Lower saturation (46%) doesn't complement green well + +- **Option B:** Use single red for everything + - ❌ Rejected: Loss of semantic clarity + - ❌ Can't distinguish between actions and error states + +**Impact:** +- Removed 2 redundant colors (`red2`, `sellColor`) +- Modified 5 files to use `red1` instead of `sellColor` +- Zero breaking changes (visual changes minimal) + +--- + +#### Decision 2.2: Remove red2 Duplicate + +**Decision:** Delete `red2` constant (exact duplicate of `statusError`) + +**Date:** January 24, 2026 + +**Rationale:** +- `red2` and `statusError` had identical hex values (#EF6A6A) +- `red2` had zero direct usages in codebase +- `statusError` has clear semantic naming +- Keeping duplicates violates "single source of truth" principle + +**Impact:** None (no code referenced `red2` directly) + +--- + +#### Decision 2.3: sellColor Restoration (REVERSED) + +**Initial Decision (January 24, 2026):** Remove `sellColor` and use `red1` for all sell-related UI elements + +**REVERSED DECISION (February 2, 2026):** Restore `sellColor` for sell-related UI elements + +**Rationale for Reversal:** +1. **User familiarity:** Users are already accustomed to the lighter `sellColor` (#FF8A8A) in sell buttons and actions +2. **Visual appeal:** The lighter red looks better visually in the UI and provides better UX +3. **Semantic clarity preserved:** Having distinct colors for sell actions vs. destructive actions improves clarity +4. **Real-world feedback:** After testing with the darker `red1`, the team decided the lighter color was more appropriate + +**Final State:** +- `order_list_item.dart`: Premium color uses `sellColor` +- `home_screen.dart`: Sell tab button uses `sellColor` +- `add_order_button.dart`: Sell button background uses `sellColor` +- `order_filter.dart`: Discount/min labels use `sellColor` (2 instances) + +**Impact:** +- 5 files modified back to `sellColor` +- Visual consistency with previous versions +- User experience prioritized over theoretical consolidation +- Three red variants maintained with clear semantic purposes + +--- + +#### Decision 2.4: Defer Purple Consolidation + +**Decision:** Postpone purple color consolidation to future phase + +**Date:** January 24, 2026 + +**Rationale:** +- User explicitly requested to handle only reds in Phase 2 +- Purples can be addressed separately without blocking progress +- Focusing on one color family at a time reduces risk + +**Current State:** +- `purpleAccent` (#764BA2): 5 usages +- `purpleButton` (#7856AF): 1 usage +- No decision made yet on consolidation + +--- + +#### Decision 2.5: Consolidate Purples to Single Color + +**Decision:** Keep `purpleButton` (#7856AF), remove `purpleAccent` (#764BA2) + +**Date:** January 24, 2026 + +**Rationale:** +1. **Imperceptible visual difference:** + - `purpleAccent`: #764BA2 (118, 75, 162) + - `purpleButton`: #7856AF (120, 86, 175) + - Difference: Only 2-11 points in RGB channels + - Users cannot distinguish between these colors visually + +2. **User preference:** + - User explicitly requested consolidation to #7856AF + - Selected based on personal preference + +3. **No semantic justification:** + - Both used for decorative accents and interactive elements + - No clear differentiation in purpose or usage + - Having "purpleButton" for ONE button vs "purpleAccent" for accents was arbitrary + +4. **Consistency with Phase 2 principles:** + - Eliminate redundancy and duplication + - Simplify color palette + - Reduce cognitive overhead for developers + +**Alternatives Considered:** +- **Keep purpleAccent instead:** ❌ Rejected per user preference +- **Keep both with documentation:** ❌ Rejected - no benefit to having two identical colors + +**Migration:** +- `dispute_message_bubble.dart`: User message bubble β†’ purpleButton +- `message_bubble.dart`: All message types β†’ purpleButton (3 instances) +- `currency_section.dart`: Icon background β†’ purpleButton +- `price_type_section.dart`: Icon background + switch track β†’ purpleButton (2 instances) +- `premium_section.dart`: Icon background + slider + overlay β†’ purpleButton (3 instances) + +**Impact:** +- 6 files modified +- 10 instances replaced +- Zero visual change (colors virtually identical) +- Simpler, more maintainable design system --- @@ -813,11 +1050,13 @@ This section will document the final, approved color palette after all phases co | Color Name | Hex | RGB | Usage | Status | |------------|-----|-----|-------|--------| | **Buy Green** | `#8CC63F` | (140, 198, 63) | Buy action buttons | βœ… Finalized | -| **Sell Red** | `#FF8A8A` | (255, 138, 138) | Sell action buttons | ⚠️ To review in Phase 2 | +| **Sell Red** | `#FF8A8A` | (255, 138, 138) | Sell action buttons, negative premiums | βœ… Finalized | +| **Destructive Red** | `#D84D4D` | (216, 77, 77) | Cancel, dispute, critical actions | βœ… Finalized | -**Current State:** -- Buy color finalized and unified with brand green -- Sell color needs review (is this the right red?) +**Status:** +- βœ… Buy color finalized and unified with brand green +- βœ… Sell color finalized - restored after user testing confirmed visual appeal and familiarity +- βœ… Destructive actions use darker red (`red1`) for appropriate visual weight --- @@ -827,9 +1066,14 @@ This section will document the final, approved color palette after all phases co |------------|-----|-----|-------|--------| | **Success** | `#8CC63F` | (140, 198, 63) | Success messages, completed states | βœ… Finalized | | **Warning** | `#F3CA29` | (243, 202, 41) | Warnings, pending states | βœ… Finalized | -| **Error** | `#EF6A6A` | (239, 106, 106) | Error messages, failed states | ⚠️ To review in Phase 2 | +| **Error** | `#EF6A6A` | (239, 106, 106) | Error messages, validation failures | βœ… Finalized | | **Info** | `#2A7BD6` | (42, 123, 214) | Informational messages | βœ… Finalized | +**Red Color Family Overview:** +- `red1` (#D84D4D) - Destructive actions (cancel, dispute) +- `statusError` (#EF6A6A) - Error states and validation +- `sellColor` (#FF8A8A) - Sell actions and negative premiums + --- ### 4.4 Background Hierarchy @@ -1122,9 +1366,11 @@ grep -r "Colors.white70" lib/ | Date | Version | Changes | Author | |------|---------|---------|--------| -| 2026-01-14 | 1.0.0 | Initial document creation, Phase 1 complete | +| 2026-01-14 | 1.0.0 | Initial document creation, Phase 1 complete | +| 2026-01-24 | 1.1.0 | Phase 2 complete (red consolidation), Phase 2b complete (purple consolidation) | +| 2026-02-02 | 1.1.1 | Phase 2c - Restored sellColor after user feedback, updated red strategy to 3 variants | --- **Document Status:** 🚧 Active (In Progress) -**Next Review:** After Phase 2 completion +**Next Review:** Before Phase 3 implementation diff --git a/lib/core/app_theme.dart b/lib/core/app_theme.dart index d773235b..810a384a 100644 --- a/lib/core/app_theme.dart +++ b/lib/core/app_theme.dart @@ -8,10 +8,13 @@ class AppTheme { static const Color dark1 = Color(0xFF1D212C); static const Color grey2 = Color(0xFF92949A); static const Color yellow = Color(0xFFF3CA29); + + /// Red color for destructive actions, sell buttons, and critical operations + /// Use for: Cancel buttons, dispute buttons, sell actions, inactive states static const Color red1 = Color(0xFFD84D4D); + static const Color dark2 = Color(0xFF303544); static const Color cream1 = Color(0xFFF9F8F1); - static const Color red2 = Color(0xFFEF6A6A); // New colors @@ -32,13 +35,19 @@ class AppTheme { static const Color buyColor = mostroGreen; static const Color sellColor = Color(0xFFFF8A8A); static const Color activeColor = mostroGreen; - static const Color purpleAccent = Color(0xFF764BA2); + + /// Purple color for accent elements, buttons, and decorative UI elements + /// Use for: Submit buttons, message bubbles, section accents, interactive elements static const Color purpleButton = Color(0xFF7856AF); // Colors for states static const Color statusSuccess = mostroGreen; static const Color statusWarning = Color(0xFFF3CA29); + + /// Red color for error states, validation failures, and error notifications + /// Use for: Error messages, failed operations, validation errors static const Color statusError = Color(0xFFEF6A6A); + static const Color statusActive = mostroGreen; static const Color statusInfo = Color.fromARGB(255, 42, 123, 214); diff --git a/lib/features/chat/widgets/message_bubble.dart b/lib/features/chat/widgets/message_bubble.dart index 473aec0a..645136c4 100644 --- a/lib/features/chat/widgets/message_bubble.dart +++ b/lib/features/chat/widgets/message_bubble.dart @@ -49,7 +49,7 @@ class MessageBubble extends ConsumerWidget { child: Container( padding: const EdgeInsets.all(8), decoration: BoxDecoration( - color: isFromPeer ? _getPeerMessageColor(peerPubkey) : AppTheme.purpleAccent, + color: isFromPeer ? _getPeerMessageColor(peerPubkey) : AppTheme.purpleButton, borderRadius: BorderRadius.only( topLeft: const Radius.circular(16), topRight: const Radius.circular(16), @@ -87,7 +87,7 @@ class MessageBubble extends ConsumerWidget { child: Container( padding: const EdgeInsets.all(8), decoration: BoxDecoration( - color: isFromPeer ? _getPeerMessageColor(peerPubkey) : AppTheme.purpleAccent, + color: isFromPeer ? _getPeerMessageColor(peerPubkey) : AppTheme.purpleButton, borderRadius: BorderRadius.only( topLeft: const Radius.circular(16), topRight: const Radius.circular(16), @@ -125,7 +125,7 @@ class MessageBubble extends ConsumerWidget { child: Container( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), decoration: BoxDecoration( - color: isFromPeer ? _getPeerMessageColor(peerPubkey) : AppTheme.purpleAccent, + color: isFromPeer ? _getPeerMessageColor(peerPubkey) : AppTheme.purpleButton, borderRadius: BorderRadius.only( topLeft: const Radius.circular(16), topRight: const Radius.circular(16), diff --git a/lib/features/disputes/widgets/dispute_message_bubble.dart b/lib/features/disputes/widgets/dispute_message_bubble.dart index c8612fed..99e6a80d 100644 --- a/lib/features/disputes/widgets/dispute_message_bubble.dart +++ b/lib/features/disputes/widgets/dispute_message_bubble.dart @@ -37,7 +37,7 @@ class DisputeMessageBubble extends StatelessWidget { child: Container( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), decoration: BoxDecoration( - color: isFromUser ? AppTheme.purpleAccent : _getAdminMessageColor(), + color: isFromUser ? AppTheme.purpleButton : _getAdminMessageColor(), borderRadius: BorderRadius.only( topLeft: const Radius.circular(16), topRight: const Radius.circular(16), diff --git a/lib/features/order/widgets/currency_section.dart b/lib/features/order/widgets/currency_section.dart index 0b6a9940..940ad0cd 100644 --- a/lib/features/order/widgets/currency_section.dart +++ b/lib/features/order/widgets/currency_section.dart @@ -25,7 +25,7 @@ class CurrencySection extends ConsumerWidget { : S.of(context)!.selectFiatCurrencyReceive, icon: const Text('\$', style: TextStyle(color: AppTheme.mostroGreen, fontSize: 18)), - iconBackgroundColor: AppTheme.purpleAccent.withValues(alpha: 0.3), + iconBackgroundColor: AppTheme.purpleButton.withValues(alpha: 0.3), child: currenciesAsync.when( loading: () => Text(S.of(context)!.loadingCurrencies, style: const TextStyle(color: Colors.white)), diff --git a/lib/features/order/widgets/premium_section.dart b/lib/features/order/widgets/premium_section.dart index 4f2f9091..0760ccb5 100644 --- a/lib/features/order/widgets/premium_section.dart +++ b/lib/features/order/widgets/premium_section.dart @@ -25,7 +25,7 @@ class PremiumSection extends StatelessWidget { return FormSection( title: S.of(context)!.premiumTitle, icon: premiumValueIcon, - iconBackgroundColor: AppTheme.purpleAccent, // Purple color for premium + iconBackgroundColor: AppTheme.purpleButton, // Purple color for premium infoTooltip: S.of(context)!.premiumTooltip, infoTitle: S.of(context)!.premiumTitle, child: Column( @@ -34,10 +34,10 @@ class PremiumSection extends StatelessWidget { // Slider SliderTheme( data: SliderThemeData( - activeTrackColor: AppTheme.purpleAccent, + activeTrackColor: AppTheme.purpleButton, inactiveTrackColor: AppTheme.backgroundInactive, thumbColor: AppTheme.textPrimary, - overlayColor: AppTheme.purpleAccent.withValues(alpha: 0.2), + overlayColor: AppTheme.purpleButton.withValues(alpha: 0.2), trackHeight: 4, ), child: Slider( diff --git a/lib/features/order/widgets/price_type_section.dart b/lib/features/order/widgets/price_type_section.dart index 3cd9bc37..a957cbdd 100644 --- a/lib/features/order/widgets/price_type_section.dart +++ b/lib/features/order/widgets/price_type_section.dart @@ -25,7 +25,7 @@ class PriceTypeSection extends StatelessWidget { return FormSection( title: S.of(context)!.priceType, icon: priceTypeIcon, - iconBackgroundColor: AppTheme.purpleAccent.withValues( + iconBackgroundColor: AppTheme.purpleButton.withValues( alpha: 0.3), // Purple color consistent with other sections infoTooltip: S.of(context)!.priceTypeTooltip, infoTitle: S.of(context)!.priceType, @@ -64,7 +64,7 @@ class PriceTypeSection extends StatelessWidget { trackColor: WidgetStateProperty.resolveWith( (Set states) { if (states.contains(WidgetState.selected)) { - return AppTheme.purpleAccent; // Purple track when active + return AppTheme.purpleButton; // Purple track when active } return AppTheme.backgroundInactive; // Dark grey track when inactive }, diff --git a/lib/features/settings/notification_settings_screen.dart b/lib/features/settings/notification_settings_screen.dart index 25c844b6..48fdc658 100644 --- a/lib/features/settings/notification_settings_screen.dart +++ b/lib/features/settings/notification_settings_screen.dart @@ -105,7 +105,7 @@ class NotificationSettingsScreen extends ConsumerWidget { .updatePushNotificationsEnabled(value); } : null, - activeColor: AppTheme.activeColor, + activeTrackColor: AppTheme.activeColor, ), ], ), @@ -277,7 +277,7 @@ class NotificationSettingsScreen extends ConsumerWidget { Switch( value: value, onChanged: enabled ? onChanged : null, - activeColor: AppTheme.activeColor, + activeTrackColor: AppTheme.activeColor, ), ], ),