updated privacy page#173
Conversation
|
@ArshiBansal 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. |
🚀 PR Received SuccessfullyHello @ArshiBansal, Thank you for taking the initiative to contribute to this project. Please ensure that your PR follows all project guidelines properly before requesting review.
|
📝 WalkthroughWalkthroughThe PR refactors the Privacy Policy page from a single accordion-based component into a modern sectioned layout consisting of eleven individual section components (PrivacyIntro, PrivacyInfoCollect, PrivacyInfoUse, PrivacyCookies, PrivacyThirdParty, PrivacySecurity, PrivacyRetention, PrivacyRights, PrivacyChildren, PrivacyChanges, PrivacyContact), each wrapped by a reusable PrivacySection container component. The main PrivacyPage imports and composes these sections sequentially with an updated layout including a hero header, fixed desktop navigation, and footer. ChangesPrivacy Policy Redesign: Accordion to Sectioned Layout
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ 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/pages/PrivacyPage.jsx (1)
14-15: ⚡ Quick winKeep the effective date in the same metadata source.
LAST_UPDATEDis centralized, butEffective Dateis still hardcoded in JSX. That leaves the hero with two independent legal dates that can drift on the next policy update.Suggested fix
export default function PrivacyPage() { const POLICY_VERSION = "1.0"; const LAST_UPDATED = "June 2026"; + const EFFECTIVE_DATE = "June 2026"; @@ - <span>Effective Date: June 2026</span> + <span>Effective Date: {EFFECTIVE_DATE}</span>Also applies to: 36-36
🤖 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/PrivacyPage.jsx` around lines 14 - 15, The hero and other JSX places currently hardcode the Effective Date separately from the centralized metadata; replace the hardcoded Effective Date strings with the existing constants (use LAST_UPDATED, and optionally combine with POLICY_VERSION where appropriate) so both the hero and the other occurrence(s) reference the same source of truth (constants POLICY_VERSION and LAST_UPDATED) instead of a literal string.
🤖 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/privacy/PrivacyContact.jsx`:
- Around line 12-14: Replace the placeholder text in the PrivacyContact.jsx
component (the inline-block div containing "[Insert Your Email Address Here]")
with the actual support email address and make it actionable by rendering it as
a clickable mailto link (or a button that opens the user's mail client) while
preserving the current styling and accessibility (use an anchor with
aria-label). Update the content inside the div in PrivacyContact.jsx to the real
support email and ensure the link uses a mailto: URL so users can submit privacy
requests directly.
In `@frontend/src/pages/PrivacyPage.jsx`:
- Around line 45-50: The anchor elements created in the PrivacyPage.jsx map are
unlabeled and inaccessible; update the anchor rendered inside
{[...Array(11)].map((_, i) => ( ... ))} to include an accessible name (e.g., add
an aria-label that describes the destination like "Go to section {i+1}: [section
title]" or at minimum "Go to section {i+1}") so screen readers can announce the
link; if section titles exist in the component, use them to build the
aria-label, otherwise add a descriptive fallback and optionally mirror it in a
title attribute for tooltips.
---
Nitpick comments:
In `@frontend/src/pages/PrivacyPage.jsx`:
- Around line 14-15: The hero and other JSX places currently hardcode the
Effective Date separately from the centralized metadata; replace the hardcoded
Effective Date strings with the existing constants (use LAST_UPDATED, and
optionally combine with POLICY_VERSION where appropriate) so both the hero and
the other occurrence(s) reference the same source of truth (constants
POLICY_VERSION and LAST_UPDATED) instead of a literal string.
🪄 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: c44c856e-4c73-4b57-b0f5-781ba5355a57
📒 Files selected for processing (13)
frontend/src/components/privacy/PrivacyChanges.jsxfrontend/src/components/privacy/PrivacyChildren.jsxfrontend/src/components/privacy/PrivacyContact.jsxfrontend/src/components/privacy/PrivacyCookies.jsxfrontend/src/components/privacy/PrivacyInfoCollect.jsxfrontend/src/components/privacy/PrivacyInfoUse.jsxfrontend/src/components/privacy/PrivacyIntro.jsxfrontend/src/components/privacy/PrivacyRetention.jsxfrontend/src/components/privacy/PrivacyRights.jsxfrontend/src/components/privacy/PrivacySection.jsxfrontend/src/components/privacy/PrivacySecurity.jsxfrontend/src/components/privacy/PrivacyThirdParty.jsxfrontend/src/pages/PrivacyPage.jsx
| <div className="inline-block border-[3px] border-black px-5 py-3 font-black"> | ||
| [Insert Your Email Address Here] | ||
| </div> |
There was a problem hiding this comment.
Replace the placeholder contact field with the final support email (and make it actionable).
Line 13 still contains template text instead of a real contact endpoint, so users cannot submit privacy requests from this section and the page content is not final.
Proposed fix
- <div className="inline-block border-[3px] border-black px-5 py-3 font-black">
- [Insert Your Email Address Here]
- </div>
+ <a
+ href="mailto:privacy@yourdomain.com"
+ className="inline-block border-[3px] border-black px-5 py-3 font-black underline"
+ >
+ privacy@yourdomain.com
+ </a>📝 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.
| <div className="inline-block border-[3px] border-black px-5 py-3 font-black"> | |
| [Insert Your Email Address Here] | |
| </div> | |
| <a | |
| href="mailto:privacy@yourdomain.com" | |
| className="inline-block border-[3px] border-black px-5 py-3 font-black underline" | |
| > | |
| privacy@yourdomain.com | |
| </a> |
🤖 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/privacy/PrivacyContact.jsx` around lines 12 - 14,
Replace the placeholder text in the PrivacyContact.jsx component (the
inline-block div containing "[Insert Your Email Address Here]") with the actual
support email address and make it actionable by rendering it as a clickable
mailto link (or a button that opens the user's mail client) while preserving the
current styling and accessibility (use an anchor with aria-label). Update the
content inside the div in PrivacyContact.jsx to the real support email and
ensure the link uses a mailto: URL so users can submit privacy requests
directly.
| {[...Array(11)].map((_, i) => ( | ||
| <a | ||
| key={i} | ||
| href={`#section-${String(i + 1).padStart(2, "0")}`} | ||
| className="w-3 h-3 border-2 border-black rounded-full hover:bg-black transition" | ||
| /> |
There was a problem hiding this comment.
Give each section indicator link an accessible name.
These anchors render as unlabeled links, so the desktop navigation is effectively unusable with a screen reader. Add at least an aria-label; ideally make it describe the destination section.
Suggested fix
{[...Array(11)].map((_, i) => (
<a
key={i}
href={`#section-${String(i + 1).padStart(2, "0")}`}
- className="w-3 h-3 border-2 border-black rounded-full hover:bg-black transition"
+ aria-label={`Jump to privacy section ${String(i + 1).padStart(2, "0")}`}
+ title={`Privacy section ${String(i + 1).padStart(2, "0")}`}
+ className="w-3 h-3 border-2 border-black rounded-full hover:bg-black transition focus-visible:outline-2 focus-visible:outline-offset-2"
/>
))}📝 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.
| {[...Array(11)].map((_, i) => ( | |
| <a | |
| key={i} | |
| href={`#section-${String(i + 1).padStart(2, "0")}`} | |
| className="w-3 h-3 border-2 border-black rounded-full hover:bg-black transition" | |
| /> | |
| {[...Array(11)].map((_, i) => ( | |
| <a | |
| key={i} | |
| href={`#section-${String(i + 1).padStart(2, "0")}`} | |
| aria-label={`Jump to privacy section ${String(i + 1).padStart(2, "0")}`} | |
| title={`Privacy section ${String(i + 1).padStart(2, "0")}`} | |
| className="w-3 h-3 border-2 border-black rounded-full hover:bg-black transition focus-visible:outline-2 focus-visible:outline-offset-2" | |
| /> | |
| ))} |
🤖 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/PrivacyPage.jsx` around lines 45 - 50, The anchor elements
created in the PrivacyPage.jsx map are unlabeled and inaccessible; update the
anchor rendered inside {[...Array(11)].map((_, i) => ( ... ))} to include an
accessible name (e.g., add an aria-label that describes the destination like "Go
to section {i+1}: [section title]" or at minimum "Go to section {i+1}") so
screen readers can announce the link; if section titles exist in the component,
use them to build the aria-label, otherwise add a descriptive fallback and
optionally mirror it in a title attribute for tooltips.
|
@coderabbitai please check whether this PR have done everything mentioned in issue description |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
echo "=== Directory structure of privacy components ==="
find frontend/src/components/privacy -type f | sort
echo ""
echo "=== PrivacySection.jsx ==="
cat frontend/src/components/privacy/PrivacySection.jsx
echo ""
echo "=== PrivacyPage.jsx ==="
cat frontend/src/pages/PrivacyPage.jsx
echo ""
echo "=== PrivacyIntro.jsx ==="
cat frontend/src/components/privacy/PrivacyIntro.jsx
echo ""
echo "=== PrivacyInfoCollect.jsx ==="
cat frontend/src/components/privacy/PrivacyInfoCollect.jsx
echo ""
echo "=== PrivacyCookies.jsx ==="
cat frontend/src/components/privacy/PrivacyCookies.jsx
echo ""
echo "=== PrivacyContact.jsx ==="
cat frontend/src/components/privacy/PrivacyContact.jsx
echo ""
echo "=== PrivacyChanges.jsx ==="
cat frontend/src/components/privacy/PrivacyChanges.jsx
echo ""
echo "=== PrivacyChildren.jsx ==="
cat frontend/src/components/privacy/PrivacyChildren.jsx
echo ""
echo "=== PrivacyRetention.jsx ==="
cat frontend/src/components/privacy/PrivacyRetention.jsx
echo ""
echo "=== PrivacyRights.jsx ==="
cat frontend/src/components/privacy/PrivacyRights.jsx
echo ""
echo "=== PrivacySecurity.jsx ==="
cat frontend/src/components/privacy/PrivacySecurity.jsx
echo ""
echo "=== PrivacyThirdParty.jsx ==="
cat frontend/src/components/privacy/PrivacyThirdParty.jsx
echo ""
echo "=== PrivacyInfoUse.jsx ==="
cat frontend/src/components/privacy/PrivacyInfoUse.jsxLength of output: 19008 🏁 Script executed: #!/bin/bash
echo "=== Existing pages for design conventions ==="
ls frontend/src/pages/
echo ""
echo "=== Other components for design consistency check ==="
ls frontend/src/components/
echo ""
echo "=== Check routing setup ==="
fd -e jsx -e js "App" frontend/src | head -5
cat frontend/src/App.jsx 2>/dev/null || cat frontend/src/App.js 2>/dev/null || echo "App file not found at expected path"
echo ""
echo "=== Check tailwind config ==="
cat tailwind.config.js 2>/dev/null || cat tailwind.config.cjs 2>/dev/null || echo "tailwind config not found"
echo ""
echo "=== Check package.json ==="
cat frontend/package.json 2>/dev/null || cat package.json
echo ""
echo "=== Check for existing component patterns (e.g., navbar, footer) ==="
ls frontend/src/components/
echo ""
echo "=== Check if there's a Terms or other legal page for comparison ==="
fd -e jsx "Terms" frontend/src
fd -e jsx "About" frontend/src | head -3Length of output: 7475 🏁 Script executed: #!/bin/bash
echo "=== Check for broken imports in PrivacyPage ==="
rg "from.*privacy" frontend/src --type jsx -i -n 2>/dev/null || rg "from.*privacy" frontend/src -n -i
echo ""
echo "=== Check routing for PrivacyPage ==="
rg -n "Privacy" frontend/src/App.jsx 2>/dev/null || rg -rn "Privacy" frontend/src --include="*.jsx" --include="*.js" -l
echo ""
echo "=== Check if email placeholder is still present (not real email) ==="
rg -n "email" frontend/src/components/privacy/PrivacyContact.jsx
echo ""
echo "=== Check for hardcoded dates ==="
rg -n "June 2026\|2026\|date" frontend/src/pages/PrivacyPage.jsx
echo ""
echo "=== Check for console.log or debug statements ==="
rg -rn "console\.log" frontend/src/components/privacy/ frontend/src/pages/PrivacyPage.jsx 2>/dev/null
echo ""
echo "=== Check for TODO/FIXME/HACK/placeholder comments ==="
rg -rn "TODO\|FIXME\|HACK\|placeholder\|xxx\|temp" frontend/src/components/privacy/ frontend/src/pages/PrivacyPage.jsx -i 2>/dev/null
echo ""
echo "=== Check for PropTypes or TypeScript types ==="
rg -rn "PropTypes\|propTypes" frontend/src/components/privacy/ 2>/dev/null
echo ""
echo "=== Check section navigation anchor links consistency ==="
rg -n "section-\|href.*#" frontend/src/pages/PrivacyPage.jsx 2>/dev/null
rg -n "id=" frontend/src/components/privacy/PrivacySection.jsx 2>/dev/nullLength of output: 4401 🏁 Script executed: #!/bin/bash
echo "=== Check TermsPage or other similar pages for design consistency ==="
fd -e jsx "Terms" frontend/src --exec cat {}
echo ""
echo "=== Look for Navbar/Header component ==="
fd -e jsx "Navbar\|Header\|Nav" frontend/src/components --exec cat {} 2>/dev/null | head -80
echo ""
echo "=== Look at an existing page for design pattern reference ==="
fd -e jsx "About\|Contact\|Home" frontend/src/pages --exec cat {} 2>/dev/null | head -100
echo ""
echo "=== Check for index file in privacy components ==="
cat frontend/src/components/privacy/index.js 2>/dev/null || cat frontend/src/components/privacy/index.jsx 2>/dev/null || echo "No index file found"
echo ""
echo "=== Check for existing test files ==="
fd -e test.jsx -e spec.jsx -e test.js -e spec.js frontend/src | head -10
ls frontend/src/__tests__ 2>/dev/null || echo "No __tests__ dir"
echo ""
echo "=== Check for SEO/meta tags in similar pages ==="
rg -n "Helmet\|meta\|title" frontend/src/pages/PrivacyPage.jsx 2>/dev/null
rg -rn "Helmet\|react-helmet" frontend/src/pages/ 2>/dev/null | head -20Length of output: 2300 🏁 Script executed: #!/bin/bash
echo "=== Check color consistency - bg classes used in privacy components ==="
rg -rn "bg-" frontend/src/components/privacy/ | grep -v "node_modules"
echo ""
echo "=== Check for sticky heading implementation ==="
rg -rn "sticky\|top-" frontend/src/components/privacy/PrivacySection.jsx
echo ""
echo "=== Check for section navigation indicator ==="
rg -rn "indicator\|nav\|aside\|fixed" frontend/src/pages/PrivacyPage.jsx
echo ""
echo "=== Check for accessibility attributes ==="
rg -rn "aria-\|role=" frontend/src/components/privacy/ frontend/src/pages/PrivacyPage.jsx 2>/dev/null
echo ""
echo "=== Check all section numbers ==="
rg -rn 'number="' frontend/src/components/privacy/ 2>/dev/null
echo ""
echo "=== Check reverse prop usage ==="
rg -rn "reverse" frontend/src/components/privacy/ 2>/dev/null
echo ""
echo "=== Check POLICY_VERSION and LAST_UPDATED usage ==="
rg -rn "POLICY_VERSION\|LAST_UPDATED" frontend/src/pages/PrivacyPage.jsx 2>/dev/null
echo ""
echo "=== Check if there's an existing accordion component being replaced ==="
rg -rn "accordion\|Accordion" frontend/src/components/ -i 2>/dev/null | head -20Length of output: 4228
✅ Issue
|
| Requirement | Status |
|---|---|
| Replace accordion with separated sections | ✅ Done |
11 individual .jsx components in frontend/src/components/privacy/ |
✅ All 11 present |
Composed in PrivacyPage.jsx |
✅ Done |
| Large headings, readable body, generous padding | ✅ text-3xl/4xl font-black, py-20, leading-8 |
| Subtly varying near-identical backgrounds | ✅ bg-white → #fafafa → #f7f7f7 → … → #ededed |
| Modern asymmetric two-column layout with sticky headings | ✅ lg:grid-cols-12, sticky top-24 |
| Desktop section navigation indicators | ✅ Fixed right-side dot nav |
reverse alternating layout |
✅ Implemented with lg:[&>*:first-child]:order-2 |
| Responsive across breakpoints | ✅ Tailwind lg: prefixes |
| No accordion/state management | ✅ useState removed |
| Preserve approved policy text verbatim | ✅ Content matches |
| No React console errors/warnings | ✅ No debug code found |
Routing /privacy → PrivacyPage |
✅ Confirmed in App.jsx |
The PR satisfies all acceptance criteria from issue #168.
🚨 Production-Readiness Issues
🔴 Critical Blocker (must fix before going live)
-
Unresolved email placeholder in
PrivacyContact.jsx(Line 9)
The contact section still contains[Insert Your Email Address Here]as literal visible text in the UI. This is a placeholder that was never replaced with an actual contact email or GitHub issue link. Shipping this to production will look unprofessional and break user trust in a legal document.// Current — needs to be replaced: <div className="inline-block border-[3px] border-black px-5 py-3 font-black"> [Insert Your Email Address Here] </div>
🟠 Important Issues (should fix before merge)
-
Hardcoded "Effective Date" inconsistency in
PrivacyPage.jsx(Line ~35)
POLICY_VERSIONandLAST_UPDATEDconstants are defined, andLAST_UPDATEDis used for "Last Updated", but "Effective Date" is a separate hardcoded string"June 2026". IfLAST_UPDATEDis updated in the future, the "Effective Date" will silently fall out of sync:// Current — inconsistent: <span>Effective Date: June 2026</span> // Should be: <span>Effective Date: {LAST_UPDATED}</span>
-
Sticky heading offset (
top-24= 96px) may overlap the navbar
PrivacySection.jsxusessticky top-24for the section headings. This assumes the navbar is exactly 96px tall. If the navbar height differs (common on mobile or if the navbar scrolls away), the heading will be positioned incorrectly. The sticky offset should be derived from the actual navbar height via a CSS variable or matching Tailwind class. -
Section navigation dots are inaccessible
The 11 fixed right-side anchor dots inPrivacyPage.jsxhave noaria-labelortitleattribute. Screen readers cannot identify them, and keyboard users get no context about where each link leads:// Should add aria-label: <a key={i} href={`#section-${String(i + 1).padStart(2, "0")}`} aria-label={`Go to section ${i + 1}`} className="w-3 h-3 border-2 border-black rounded-full hover:bg-black transition" />
🟡 Minor / Nice-to-Have (polish for production)
-
No
<title>/ SEO meta tag for the page
Other legal pages likeTermsPage.jsxalso lack this, butPrivacyPageshould at minimum set the document title (e.g., viadocument.titlein auseEffect, or usingreact-helmetif added to the project) so the browser tab and search engines show "Privacy Policy – CodeLens". -
POLICY_VERSION/LAST_UPDATEDshould live in a shared constants file
Currently they are defined as local variables inside the component function. If these values need to appear anywhere else (e.g., footer, Terms page), they'd have to be duplicated. Moving them to asrc/constants.jsor similar file avoids drift. -
No barrel
index.jsfor theprivacy/directory
The 11 components are imported individually with 11 separate import lines inPrivacyPage.jsx. Afrontend/src/components/privacy/index.jsre-exporting all components would be cleaner:// index.js export { default as PrivacyIntro } from './PrivacyIntro'; // ... etc.
-
No
PropTypesvalidation onPrivacySection
Since the project uses plain JSX (not TypeScript), addingPropTypestoPrivacySection.jsxfornumber,title,bg,reverse, andchildrenwould help catch misuse:import PropTypes from 'prop-types'; PrivacySection.propTypes = { number: PropTypes.string.isRequired, title: PropTypes.string.isRequired, children: PropTypes.node.isRequired, bg: PropTypes.string, reverse: PropTypes.bool, };
-
TermsPage.jsxis still placeholder text — not introduced by this PR, but worth noting as a separate follow-up before marketing/legal sign-off.
Verdict
⚠️ Not ready to merge as-is. The code is high quality and fully satisfies the issue requirements, but the unresolved[Insert Your Email Address Here]placeholder inPrivacyContact.jsxis a blocker — it would appear verbatim in the live Privacy Policy. Fix that, address the "Effective Date" constant inconsistency, and addaria-labelto the nav dots, and this PR will be in good shape to merge. 🐇
2 participants
📌 Pull Request Summary
🔗 Related Issue
Closes #168\
📝 Description
Redesigns the Privacy Policy page from an accordion-based interface into a modern, sectioned legal document experience.
The previous implementation rendered all policy content inside a single expandable accordion, which was functional but not ideal for reading legal content. This update restructures the page into independently reusable section components with a responsive asymmetric layout, subtle background transitions, and improved readability while preserving the approved policy text verbatim.
Changes Made
frontend/src/components/privacy/directory containing individual components for all 11 privacy policy sections.PrivacySection.jsxcomponent to standardize layout, spacing, typography, and section structure.PrivacyPage.jsxto compose all privacy section components in order.Motivation
Legal and policy documents are generally expected to be presented as readable, scrollable documents rather than hidden behind expandable accordions. This redesign improves readability, accessibility, content discoverability, and overall user experience while remaining consistent with the CodeLens brutalist design system.
🚀 Type of Change
Select all that apply:
🧪 Testing
Verification
Test Details
📸 Screenshots / Demo (If Applicable)
Attach screenshots, GIFs, or recordings that demonstrate:
✅ Checklist
📚 Additional Notes
Summary by CodeRabbit
New Features
Refactor