Login page input fields UI update #9125
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
WalkthroughThe changes involve updates to the Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/components/Auth/Login.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/parser'
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/CAREUI/interactive/LegendInput.tsx (1)
Line range hint
142-150: Add accessibility attributes to password toggle buttonThe password visibility toggle button needs an aria-label to improve accessibility for screen readers.
<button type="button" className="absolute right-0 top-0 z-10 flex h-full items-center px-3 text-xl" + aria-label={showPassword ? "Hide password" : "Show password"} onClick={() => setShowPassword(!showPassword)} >src/components/Auth/Login.tsx (1)
Line range hint
452-456: Add hover effect to "Send Reset Link" button for consistency.The send reset link button should have the same hover behavior as the login button for consistent user experience.
-className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white" +className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/CAREUI/interactive/LegendInput.tsx(1 hunks)src/components/Auth/Login.tsx(1 hunks)
🔇 Additional comments (2)
src/CAREUI/interactive/LegendInput.tsx (1)
133-133: LGTM! The border shift issue is fixed.
The addition of border-transparent effectively solves the 1px shift issue by maintaining a consistent 2px border width whether the input is focused or not. The transparent border ensures the input maintains its size while providing visual feedback only when focused.
src/components/Auth/Login.tsx (1)
352-352: LGTM! Hover effect implementation looks good.
The hover effect using Tailwind's hover:bg-primary-600 provides appropriate visual feedback and follows the color palette progression.
|
LGTM, @khavinshankar you can merge it, non-related PR failure |
|
@Rishith25 Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Style