I have Improved layout consistency between Privacy Policy and Terms &…#2705
I have Improved layout consistency between Privacy Policy and Terms &…#2705Sumit-programmer-787 wants to merge 1 commit intocodervivek5:mainfrom
Conversation
… Conditions pages. I have Improved layout consistency between Privacy Policy and Terms & Conditions pages.
|
@Sumit-programmer-787 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughIntroduces a new static HTML privacy policy page ( Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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: 3
🤖 Fix all issues with AI agents
In @vigybag.html:
- Line 7: The external Font Awesome stylesheet link element (the <link
rel="stylesheet" href="https://cdnjs.cloudflare.com/.../all.min.css">) lacks
Subresource Integrity; generate the SRI hash for that exact file (e.g., via
https://www.srihash.org/), then update the same <link> tag to include
integrity="shaXXX-..." and crossorigin="anonymous" attributes so the browser
verifies the CDN asset before loading.
- Around line 330-341: The nav has a hardcoded active class on the anchor with
class "nav-link active" pointing to "/privacy-policy", which mismatches the
actual page filename and breaks the JS pathname matching; fix by either renaming
the page to match the nav href (make the file name match "/privacy-policy"), or
update the anchor href to the current filename/path, or remove the hardcoded
"active" class from the element and let the existing JS that queries ".nav-link"
apply the active class dynamically (ensure the hrefs and
window.location.pathname are consistent).
- Around line 1-476: The navigation href in vigybag.html (anchor with class
"nav-link" currently pointing to "/terms") does not match the actual React route
"/terms-and-condition" (TermsAndCondition.jsx) and there is an architectural
mismatch between a static Privacy Policy HTML page and a React-based Terms page;
update the link target in the navigation (the <a> element with class "nav-link"
that currently reads "/terms") to the correct route "/terms-and-condition" and
then decide on a consistent architecture: either convert TermsAndCondition.jsx
into a static HTML page matching vigybag.html's structure or port vigybag.html
into a React component that reuses the same layout (header/footer classes like
"legal-header", "legal-container", "page-title" etc.) so both pages live in the
same framework and share styling and routing.
🧹 Nitpick comments (3)
vigybag.html (3)
434-436: Consider using the current year in the static HTML to avoid initial flicker.The copyright currently shows "2025" in the static HTML, but JavaScript updates it to the current year on page load (line 444). This may cause a brief flicker showing the wrong year before JavaScript executes.
♻️ Proposed fix
- © 2025 VigyBag Pvt. Ltd. All rights reserved. + © <span id="copyright-year">2026</span> VigyBag Pvt. Ltd. All rights reserved.Then update the JavaScript to target the span:
- document.querySelector('.copyright').innerHTML = `© ${new Date().getFullYear()} VigyBag Pvt. Ltd. All rights reserved.`; + const yearElement = document.getElementById('copyright-year'); + if (yearElement) yearElement.textContent = new Date().getFullYear();
457-472: Minor: Optimize smooth scroll anchor link logic.The check for
targetId === '#'happens afterpreventDefault(), meaning that clicking a bare#link will prevent the default behavior but perform no action. Consider checking the target before preventing default.♻️ Proposed fix
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { - e.preventDefault(); const targetId = this.getAttribute('href'); if(targetId === '#') return; + e.preventDefault(); const targetElement = document.querySelector(targetId); if(targetElement) { window.scrollTo({ top: targetElement.offsetTop - 100, behavior: 'smooth' }); } }); });
328-342: Consider adding accessibility improvements for keyboard navigation.The page lacks a skip-to-content link, which helps keyboard users bypass the header and navigate directly to the main content. This is especially useful with a sticky header.
♿ Proposed accessibility enhancements
Add a skip link at the very beginning of the body:
<body> + <!-- Skip to main content link for accessibility --> + <a href="#main-content" class="skip-link">Skip to main content</a> + <!-- Consistent Header Navigation --> <header class="legal-header">Add an ID to the main element:
- <main class="legal-container"> + <main class="legal-container" id="main-content">Add CSS for the skip link (add to the style section):
/* Skip link for accessibility */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary-green); color: white; padding: 8px; text-decoration: none; z-index: 2000; } .skip-link:focus { top: 0; }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
vigybag.html
🔇 Additional comments (3)
vigybag.html (3)
8-326: Well-structured CSS with responsive design and print styles.The CSS implementation follows good practices with CSS custom properties, responsive breakpoints, and dedicated print styles. The naming conventions are semantic and maintainable.
349-352: Verify the "Last Updated" date is accurate.The privacy policy shows "Last Updated: September 5, 2025", which is approximately 4 months ago. Please confirm this date is accurate and not a placeholder that needs updating.
355-427: Privacy policy content is well-structured and compliant.The privacy policy sections are clearly organized with appropriate headings, icons, and contact information. The inclusion of grievance officer details is appropriate for regulatory compliance.
1 participant
✅ Improvement Summary
Enhanced layout consistency between Privacy Policy and Terms & Conditions pages by implementing a unified design system for all legal documentation on the VigyBag platform. This ensures users experience the same visual structure, navigation patterns, and readability across both legal pages.
🔗 Fixes Issue
Closes #2705 - "Privacy Policy and Terms & Conditions pages have inconsistent layouts causing poor user experience and brand inconsistency"
📋 Changes Proposed
✅ Unified header navigation with active state indicators
✅ Consistent typography hierarchy using CSS custom properties
✅ Standardized section structure with iconography
✅ Matching spacing and margins between all elements
✅ Shared color scheme (eco-friendly green palette)
✅ Responsive design that works on mobile, tablet, and desktop
✅ CSS custom properties for easy theme customization
✅ Accessibility enhancements (proper heading hierarchy, contrast ratios)
✅ Print-friendly styles for legal document printing
✅ Interactive navigation with smooth scrolling
✅ Standardized section headers with consistent icons
✅ Improved readability with proper line heights and spacing
✅ Highlight boxes for important legal notices
✅ Contact information presented uniformly
✅ Last updated date prominently displayed
📸 Screenshots
Before changes:
After Changes: