fix: change highlight button text color to black for better contrast

[MantisClone]

Summary

Changes the highlight button text color from white to black for improved readability on the mint green background.

Problem

Light green (#00E6A1 / mint) buttons with white text have poor contrast, making button labels difficult to read, especially in dark mode.

Solution

Updated --highlight-foreground CSS variable in dark mode from 0 0% 98% (white) to 0 0% 3.9% (black) in src/app/globals.css.

Testing

• Verified button text is now black on mint green background
• Applies to all buttons using the highlight color variant

Fixes #178

Summary by CodeRabbit

• Style
  • Updated highlight colors in dark mode for improved contrast and better readability.

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

[coderabbitai]

Walkthrough

Only one file modified: src/app/globals.css. The --highlight-foreground CSS variable in the .dark theme is changed from 98% lightness to 3.9% lightness, altering the foreground text color for highlights from nearly white to nearly black in dark mode.

Changes

Cohort / File(s)	Summary
CSS Variable Update src/app/globals.css	Changed --highlight-foreground lightness value from 98% to 3.9% in .dark theme, switching highlight text color from near-white to near-black for improved contrast.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: modifying the highlight button text color to black for improved contrast, which aligns with the CSS variable change from white to black.
Linked Issues check	✅ Passed	The PR successfully addresses issue #178 by changing the --highlight-foreground CSS variable from white (98% lightness) to black (3.9% lightness), improving text contrast on mint green backgrounds.
Out of Scope Changes check	✅ Passed	The change is narrowly focused on updating a single CSS variable in globals.css related to the highlight button text color, with no extraneous modifications outside the stated objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/button-text-contrast-178

---

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

[Copilot]

Pull request overview

This PR fixes a contrast issue with highlight buttons in dark mode by changing the text color from white to black. The mint green background color (#00E6A1 / hsl(171 100% 42%)) remains the same in both light and dark modes, so using consistent black text improves readability.

Key Changes:

• Updated --highlight-foreground in dark mode from 0 0% 98% (white) to 0 0% 3.9% (black) to match light mode

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[greptile-apps]

Greptile Overview

Greptile Summary

Changed the --highlight-foreground CSS variable in dark mode from white (0 0% 98%) to black (0 0% 3.9%) to improve text contrast on mint green buttons.

• Aligns dark mode text color with light mode, which already used black text
• Improves accessibility and readability for buttons using the highlight color scheme
• Single-line change with focused scope, affects only dark mode styling

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Single-line CSS variable change that improves accessibility without affecting logic or functionality. The change aligns dark mode styling with existing light mode configuration.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
src/app/globals.css	5/5	Changed dark mode highlight text from white to black for better contrast on mint green background

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant CSS as globals.css
    participant Component as Button Component
    
    User->>Browser: Views page in dark mode
    Browser->>CSS: Load dark mode styles
    CSS->>CSS: Set --highlight-foreground: 0 0% 3.9% (black)
    Browser->>Component: Render highlight button
    Component->>Component: Apply bg-highlight with text-highlight-foreground
    Component->>Browser: Display button with black text on mint background
    Browser->>User: Show readable button with improved contrast

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[bassgeta]

Nice one 👀