Update color scheme: change background to warm beige and primary buttons to dark blue

[devin-ai-integration]

Update color scheme: change background to warm beige and primary buttons to dark blue

Summary

This PR implements a comprehensive color scheme update for the invoice application, transforming it from a blue-based theme to a warm, professional color palette. The changes include:

• Background color: Updated from #f8fafc (light blue-gray) to #f9f3e9ff (warm beige)
• Primary button color: Changed from #3b82f6 (blue) to #021c42ff (dark navy blue)
• Button hover state: Updated from #2563eb to #011530 (darker navy variant)
• Gradient backgrounds: Updated Login/Register page gradients to complement new scheme
• Component consistency: Updated all color references throughout the application

The implementation uses a global CSS approach in index.css for maximum coverage, with component-specific updates where inline styles were used.

Review & Testing Checklist for Human

• Accessibility compliance: Verify contrast ratios between new dark navy (#021c42ff) and beige (#f9f3e9ff) meet WCAG 2.1 AA standards (especially for buttons and text)
• Cross-browser compatibility: Test in Chrome, Firefox, Safari, and Edge to ensure 8-character hex codes render correctly
• Mobile responsiveness: Test color scheme on mobile devices and various screen sizes
• Comprehensive visual testing: Navigate through all app states including error messages, loading states, modals, and form validation to catch any missed color references
• Brand alignment: Confirm the dramatic color change from blue to beige/navy aligns with brand guidelines and design standards

Recommended Test Plan:

1. Use bootstrap script (python3 src/backend/bootstrap/bootstrap_sample_data.py) to create test user
2. Login with credentials: testuser@email.com / topsecretpassword
3. Navigate through all pages and test interactive elements (buttons, forms, links)
4. Test error states and edge cases
5. Verify accessibility with screen reader or contrast checking tools

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TD
    IndexCSS["src/frontend/src/index.css<br/>Global Styles"]:::major-edit
    LoginJS["src/frontend/src/components/Auth/Login.js<br/>Login Component"]:::major-edit
    RegisterJS["src/frontend/src/components/Auth/Register.js<br/>Register Component"]:::major-edit
    DashboardJS["src/frontend/src/components/Dashboard/Dashboard.js<br/>Dashboard Component"]:::minor-edit
    NavbarJS["src/frontend/src/components/Layout/Navbar.js<br/>Navigation Component"]:::minor-edit
    ReportsJS["src/frontend/src/components/Reports/Reports.js<br/>Reports Component"]:::minor-edit
    
    IndexCSS -->|"Global background<br/>#f9f3e9ff"| LoginJS
    IndexCSS -->|"Global background<br/>#f9f3e9ff"| RegisterJS
    IndexCSS -->|"Global background<br/>#f9f3e9ff"| DashboardJS
    IndexCSS -->|"Button styles<br/>#021c42ff"| NavbarJS
    IndexCSS -->|"Form focus states<br/>#021c42ff"| ReportsJS
    
    LoginJS -->|"Gradient background<br/>inline styles"| RegisterJS
    
    subgraph Legend
        L1["Major Edit"]:::major-edit
        L2["Minor Edit"]:::minor-edit
        L3["Context/No Edit"]:::context
    end

    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• Testing completed: Used bootstrap script to create test credentials and verified color scheme across all main pages (Login, Register, Dashboard, Invoices, Reports, Invoice Creation Form)
• Global approach: The index.css changes provide comprehensive coverage, but component-specific inline styles required individual updates
• Color format: Using 8-character hex codes with alpha channel - ensure browser compatibility
• Session details:
  • Link to Devin run: https://app.devin.ai/sessions/1c55bb1367c449eea56c801acd075a09
  • Requested by: @JRWu (jia.wu@codeium.com)

⚠️ Important: This is a significant visual change that affects the entire application's appearance. While comprehensive testing was performed, human verification is essential to ensure the new color scheme meets accessibility standards and maintains professional design quality.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

⚙️ Control Options:

• Disable automatic comment and CI monitoring