Feat: add CodeLens branding assets and logo integration across frontend#195
Feat: add CodeLens branding assets and logo integration across frontend#195anushreekhatri028-coder wants to merge 3 commits into
Conversation
|
@anushreekhatri028-coder is attempting to deploy a commit to the Kunal Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
🎉 Welcome to CodeLens — Thank You for Your Contribution!Hey @anushreekhatri028-coder! 👋 We are genuinely excited to have you here. Every single PR — big or small — makes CodeLens better, and yours is no exception. Take a moment to review the checklist below to help us merge your work quickly and smoothly. ✅ Before Requesting a Review
💬 Join Our Community Channel — This is MandatoryBeing part of our communication channel is compulsory for all contributors, not optional. Why join? This is where all important announcements, PR review updates, contribution discussions, and maintainer decisions happen in real time. Contributors who are not in the channel regularly miss critical context and updates, which often leads to duplicated or misaligned work. Staying connected here is what keeps the community strong and your contributions impactful. We are rooting for you! If you have any questions, drop them in the channel or comment right here on this PR. Let's build something great together. 🚀✨ |
📝 WalkthroughWalkthroughThis PR introduces a PNG CodeLens favicon and replaces text wordmarks with logo images across navbar, footer, pages, and loaders; it also centralizes and strengthens password/OTP validation in Signup and ForgotPassword, adding per-rule checklists and enforcing 8+ char complexity. ChangesLogo Integration
Strong Password Validation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/src/components/auth/ForgotPassword.jsx (1)
18-22: ⚡ Quick winExtract shared password-policy checks to avoid drift across auth flows.
Line 18-Line 22 duplicates policy logic that already exists in
frontend/src/pages/SignupPage.jsx. Centralizing checks in a shared helper prevents policy mismatch between Signup and Forgot Password over time.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/auth/ForgotPassword.jsx` around lines 18 - 22, Extract the password policy and OTP check into a shared helper (e.g., export functions validatePassword(password) and validateOtp(otp) from a new module like auth/passwordPolicy.js), move the current passwordRegex and its test logic out of ForgotPassword.jsx (the passwordRegex, isPasswordValid and isOtpValid usages) into those helpers, then update ForgotPassword.jsx and frontend/src/pages/SignupPage.jsx to import and call validatePassword(newPassword) and validateOtp(otp) instead of duplicating the regex and length check so both flows use the single source of truth.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/auth/ForgotPassword.jsx`:
- Around line 283-289: The static checklist in the ForgotPassword.jsx JSX block
always shows checkmarks; update it to compute and show each requirement's
real-time state based on the current password input. Add a small helper (e.g.,
validatePasswordRequirements or usePasswordChecks) that takes the password state
and returns booleans for minLength, hasUppercase, hasLowercase, hasNumber,
hasSpecial (use the existing password state variable used by the component).
Replace the hardcoded <p> items in the shown div with a mapped list or
individual elements that render a green check icon/text when the corresponding
boolean is true and a gray/red cross (and different text style) when false, and
ensure the component re-renders on password change by using the existing
onChange handler for the password input. Ensure regexes cover the same rules
shown (8+ chars, A-Z, a-z, 0-9, special chars !@#$%^&*) and reference the
modified JSX block in ForgotPassword.jsx.
In `@frontend/src/components/shared/loaders/LoaderPrimary.jsx`:
- Around line 6-15: The root container in both Loader components is using a row
flex layout which places the logo beside the spinner; update the root container
class to include "flex-col" so the logo stacks above the spinner: in
frontend/src/components/shared/loaders/LoaderPrimary.jsx (lines 6-15) add
"flex-col" to the className on the root element of the LoaderPrimary component,
and in frontend/src/components/shared/loaders/LoaderAlt.jsx (lines 6-14) add
"flex-col" to the className on the root element of the LoaderAlt component.
---
Nitpick comments:
In `@frontend/src/components/auth/ForgotPassword.jsx`:
- Around line 18-22: Extract the password policy and OTP check into a shared
helper (e.g., export functions validatePassword(password) and validateOtp(otp)
from a new module like auth/passwordPolicy.js), move the current passwordRegex
and its test logic out of ForgotPassword.jsx (the passwordRegex, isPasswordValid
and isOtpValid usages) into those helpers, then update ForgotPassword.jsx and
frontend/src/pages/SignupPage.jsx to import and call
validatePassword(newPassword) and validateOtp(otp) instead of duplicating the
regex and length check so both flows use the single source of truth.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b70c9afa-302c-4ad4-bf11-552dd274581f
⛔ Files ignored due to path filters (3)
frontend/public/favicon.pngis excluded by!**/*.pngfrontend/public/favicon.svgis excluded by!**/*.svgfrontend/public/varaint3 transparant logo.pngis excluded by!**/*.png
📒 Files selected for processing (8)
frontend/index.htmlfrontend/src/components/auth/ForgotPassword.jsxfrontend/src/components/shared/Footer.jsxfrontend/src/components/shared/Navbar.jsxfrontend/src/components/shared/loaders/LoaderAlt.jsxfrontend/src/components/shared/loaders/LoaderPrimary.jsxfrontend/src/pages/LoginPage.jsxfrontend/src/pages/SignupPage.jsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/pages/NotFoundPage.jsx`:
- Around line 32-37: The img element in the NotFoundPage component has two typos
in its src string; update the src used by the <img> (the CodeLens logo) to
correct "varaint3" to "variant3" and "transparant" to "transparent" so the
filename matches the actual asset name.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ff69e514-c99f-4bbc-a57c-e8104ba8485a
📒 Files selected for processing (6)
frontend/src/components/auth/ForgotPassword.jsxfrontend/src/components/shared/loaders/LoaderAlt.jsxfrontend/src/components/shared/loaders/LoaderPrimary.jsxfrontend/src/pages/NotFoundPage.jsxfrontend/src/pages/SignupPage.jsxfrontend/src/utils/passwordPolicy.js
🚧 Files skipped from review as they are similar to previous changes (4)
- frontend/src/components/shared/loaders/LoaderPrimary.jsx
- frontend/src/components/shared/loaders/LoaderAlt.jsx
- frontend/src/pages/SignupPage.jsx
- frontend/src/components/auth/ForgotPassword.jsx
| {/* CodeLens Logo */} | ||
| <img | ||
| src="/varaint3 transparant logo.png" | ||
| alt="CodeLens" | ||
| className="h-12 sm:h-14 w-auto mb-8" | ||
| /> |
There was a problem hiding this comment.
Fix critical typos in logo filename.
The image source path contains two spelling errors that will prevent the logo from loading:
varaint3should bevariant3transparantshould betransparent
🐛 Proposed fix for filename typos
- src="/varaint3 transparant logo.png"
+ src="/variant3 transparent logo.png"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {/* CodeLens Logo */} | |
| <img | |
| src="/varaint3 transparant logo.png" | |
| alt="CodeLens" | |
| className="h-12 sm:h-14 w-auto mb-8" | |
| /> | |
| {/* CodeLens Logo */} | |
| <img | |
| src="/variant3 transparent logo.png" | |
| alt="CodeLens" | |
| className="h-12 sm:h-14 w-auto mb-8" | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/NotFoundPage.jsx` around lines 32 - 37, The img element in
the NotFoundPage component has two typos in its src string; update the src used
by the <img> (the CodeLens logo) to correct "varaint3" to "variant3" and
"transparant" to "transparent" so the filename matches the actual asset name.
1 participant
📌 Pull Request Summary
##🔗 Related Issue
Closes #166
##📝 Description
This pull request introduces the official CodeLens branding across the frontend by replacing text-based branding with custom logo assets and integrating logo variants in key user-facing locations. It also improves favicon support and social media preview metadata for a more consistent brand identity.
##Changes Made
*Added custom CodeLens logo assets (horizontal, stacked, and icon-only variants).
*Replaced text-based branding in the Navbar with the official CodeLens logo.
*Updated Footer branding to use the stacked logo variant.
*Replaced the default favicon with the CodeLens icon-only logo.
*Added CodeLens logo to Login, Signup, and Forgot Password pages.
*Added branding to the 404 Not Found page.
*Added logo support for loading screens.
##Motivation
Previously, the application relied on text-only branding and the default Vite favicon, resulting in an inconsistent visual identity across the platform. These changes establish a cohesive CodeLens brand experience throughout the application, improve professionalism, and enhance social media sharing appearance.
##🚀 Type of Change
*New Feature
##🧪 Testing
Verification
##Test Details
*Verified logo rendering in Navbar and Footer.
*Confirmed favicon displays correctly in browser tabs.
*Tested Login, Signup, and Forgot Password pages for proper logo visibility.
*Verified 404 page branding renders correctly.
*Checked loader components for logo display.
*Validated Open Graph and Twitter metadata using browser inspection tools.
*Confirmed responsive behavior across desktop and mobile screen sizes.
##✅ Checklist
Summary by CodeRabbit
New Features
Style