Fix: Input text was not visible

[Kalpana-chavhan]

Description

This PR fixes the issue where input text was invisible or had poor contrast. I have updated the global CSS variables and the Input component to ensure consistent visibility across both Light and Dark modes.

---

Issue

Fixes or closes #272

---

Changes Made

• index.css: Added base layer styles for input elements using oklch variables.
• input.tsx: Explicitly added text-foreground to the Shadcn input component to force correct text coloring.

---

Screenshots

-Before :

-After:

---

Checklist

• Tested in Light Mode
• Tested in Dark Mode
• Follows project styling guidelines

Summary by CodeRabbit

• Style

  • Input fields no longer include built-in base styling and will render only with applied classes, so their default look may change.
  • Animation keyframes were reformatted; visual motion and effects remain the same.

• Bug Fixes

  • Fix to stylesheet structure to ensure subsequent style sections are processed as intended, reducing unexpected styling issues.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Removed built-in base classes from the Input component so it now only applies the provided className. Consolidated keyframe syntax in index.css to single-line steps and removed a closing @layer base brace, altering CSS block structure and whitespace only.

Changes

Cohort / File(s)	Summary
Input component Frontend/src/components/ui/input.tsx	Removed the component's default/predefined class string; component now relies solely on the incoming className prop (internal base/layout, border, focus, disabled classes removed).
Global stylesheet Frontend/src/index.css	Reformatted keyframe blocks to single-line step declarations and removed the closing brace of the preceding @layer base block, changing the CSS block delimitation/structure while preserving animation values.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I nibble styles in the night,

took away old classes, out of sight.
The stylesheet’s steps now lean and tight,
Hop—test the inputs, make sure they’re right! 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'Fix: Input text was not visible' directly addresses the main objective of the PR, which is to fix input text visibility issues, but the actual changes show removal of default styling and CSS formatting changes that contradict this stated purpose.	The title should align with the actual implementation. If the fix involves removing default Input component styling and restructuring CSS, clarify this in the title (e.g., 'Refactor: Remove default Input styling and consolidate CSS keyframes'). If text visibility is the actual goal, the implementation changes need to match the stated objective.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR addresses the core requirement from issue #272 by fixing input text visibility and applying styling improvements to improve readability.
Out of Scope Changes check	✅ Passed	Changes focus narrowly on input visibility and styling: removing default classes from input.tsx and reformatting CSS keyframes, both aligned with the stated objectives.
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.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 4

🤖 Fix all issues with AI agents

In @Frontend/src/components/ui/input.tsx:
- Line 13: The Input component explicitly adds the "text-foreground" class (in
Frontend/src/components/ui/input.tsx) which fixes visibility, so remove the
redundant global rule in your global stylesheet that applies the same styling to
all input elements; delete or narrow the rule that sets text color for inputs
and ensure no other components rely on that global input selector so the
explicit "text-foreground" class remains the single source of truth.
- Around line 10-19: The Input component duplicates global base styles—remove
the global-only classes from the component-level class list and keep only
component-scoped utilities: delete bg-background, text-foreground, border-input,
px-3, py-2, ring-offset-background, and placeholder:text-muted-foreground from
the class array in the Input component and retain file:border-0
file:bg-transparent file:text-sm file:font-medium, focus-visible:outline-none
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2, and
disabled:cursor-not-allowed disabled:opacity-50 so global base styles (defined
in index.css) apply to raw inputs while component-specific file/focus/disabled
behavior remains within the Input component.

In @Frontend/src/index.css:
- Around line 126-128: Remove the redundant global placeholder rule in
Frontend/src/index.css (the input::placeholder { @apply text-muted-foreground; }
block) since the Input component already applies
placeholder:text-muted-foreground (see input.tsx line 13); delete that CSS rule
so placeholder styling is provided only by the Input component and avoid
duplicated styling.
- Around line 120-124: The global base-layer rule that targets input, textarea,
select (the CSS block using @layer base with @apply bg-background
text-foreground border-input px-3 py-2 ring-offset-background and color:
var(--foreground)) should be removed or restricted so it doesn't apply
application-wide; instead rely on the Input component's local styling (Input in
input.tsx which already includes text-foreground and padding) to fix visibility,
thus delete the global rule or narrow it to a specific namespace/class used by
your own inputs and remove the redundant color declaration if you keep any
shared rule.

🧹 Nitpick comments (1)

Frontend/src/index.css (1)

133-145: Keyframe formatting consolidated.

The consolidation of keyframe steps to single-line format is a clean formatting improvement with no functional impact.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a3be437 and a0324ee.

📒 Files selected for processing (2)

• Frontend/src/components/ui/input.tsx
• Frontend/src/index.css

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Text visibility fix applied, but duplicated in global CSS.

The explicit text-foreground class successfully addresses the visibility issue. However, index.css lines 122-123 are applying the same styling globally to all input elements, creating redundancy.

🤖 Prompt for AI Agents

In @Frontend/src/components/ui/input.tsx at line 13, The Input component
explicitly adds the "text-foreground" class (in
Frontend/src/components/ui/input.tsx) which fixes visibility, so remove the
redundant global rule in your global stylesheet that applies the same styling to
all input elements; delete or narrow the rule that sets text color for inputs
and ensure no other components rely on that global input selector so the
explicit "text-foreground" class remains the single source of truth.

[PriyankaVerma2307]

@Kalpana-chavhan I had already created the PR and fixed the issue .