Skip to content

Fix: Input text was not visible #274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kalpana-chavhan wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix: Input text was not visible #274

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0324ee
fix: ensure input text visibility in light and dark modes
Kalpana-chavhan Jan 9, 2026
6d9331d
solved issues for text visibility
Kalpana-chavhan Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions Frontend/src/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,16 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
// BASE STYLES
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
// TEXT VISIBILITY FIX
"text-foreground placeholder:text-muted-foreground",

@coderabbitai coderabbitai Bot Jan 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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.

// FILE INPUT STYLES
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
// INTERACTION STYLES
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
// DISABLED STATES
"disabled:cursor-not-allowed disabled:opacity-50",
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
className
)}
ref={ref}
Expand All @@ -18,4 +27,4 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
);
Input.displayName = "Input";

export { Input };
export { Input };
37 changes: 16 additions & 21 deletions Frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,37 +117,32 @@
body {
@apply bg-background text-foreground;
}
/* FIX FOR ISSUE #272: Ensuring input text is visible */
input, textarea, select {
@apply bg-background text-foreground border-input px-3 py-2 ring-offset-background;
color: var(--foreground); /* Forces text color to use project foreground */
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated

input::placeholder {
@apply text-muted-foreground;
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
}

/* Custom Animations */
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}

@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}
50% {
box-shadow: 0 0 40px rgba(147, 51, 234, 0.6);
}
0%, 100% { box-shadow: 0 0 20px rgba(147, 51, 234, 0.3); }
50% { box-shadow: 0 0 40px rgba(147, 51, 234, 0.6); }
}

.animate-gradient {
Expand Down