Fix/Enhanced UI with Themed Cursor, Animations & Visual Elements #56
Conversation
|
@Sandraa16012007 is attempting to deploy a commit to the Ansh's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
resolve merge conflicts @Sandraa16012007 |
Done! @anshaneja5 |
There was a problem hiding this comment.
Pull Request Overview
This PR refactors dark mode management by introducing a centralized useDarkMode custom hook and adds several UX improvements including a back-to-top button, animations using Framer Motion, a custom cursor, and new Privacy Policy and Terms of Use pages.
- Centralized dark mode state management with the
useDarkModehook across all components - Added
BackToTopButtoncomponent for improved navigation on long pages - Integrated Framer Motion animations in HomePage and QuestionBank for enhanced user experience
- Created Privacy Policy and Terms of Use pages with routing
Reviewed Changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/useDarkMode.js | New custom hook providing centralized dark mode state management with localStorage persistence |
| src/components/BackToTopButton.jsx | New component for scroll-to-top functionality |
| src/components/PrivacyPolicy.jsx | New Privacy Policy page component |
| src/components/TermsOfUse.jsx | New Terms of Use page component |
| src/components/HomePage.jsx | Refactored to use useDarkMode hook, added Framer Motion animations and BackToTopButton |
| src/components/QuestionBank.jsx | Replaced local dark mode logic with useDarkMode hook, added animations and BackToTopButton, removed Reinforcement Learning topic |
| src/components/Books.jsx | Migrated to useDarkMode hook, improved dark mode styling consistency |
| src/components/Journey.jsx | Refactored dark mode management to use useDarkMode hook |
| src/components/ResearchPaper.jsx | Added BackToTopButton component |
| src/components/PrerequisiteRoadmap.jsx | Replaced local dark mode state with useDarkMode hook |
| src/components/MachineLearningRoadmap.jsx | Replaced local dark mode state with useDarkMode hook |
| src/components/DeepLearningRoadmap.jsx | Replaced local dark mode state with useDarkMode hook |
| src/components/GenerativeAIRoadmap.jsx | Replaced local dark mode state with useDarkMode hook |
| src/App.jsx | Added routes for Privacy Policy and Terms of Use pages |
| src/App.css | Added global custom cursor styling |
| public/cursor.svg | New custom cursor SVG asset |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Try to resolve these issues. Also remove this themed cursor. Not needed right now. Also there is some dark mode issues in a lot of pages right now, both normally in PC and in mobiles. Try to resolve that too. Add sitemap too. I have changed the tag to HARD now. You can work on it. @Sandraa16012007 |
|
HI @anshaneja5 I have removed the cursor and added the sitemap...I will fix the dark mode issues on that specific issue #33 (issue) #36 PR....could u pls assign marks for these commits. I will work on the dark mode UI separately |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/components/QuestionBank.jsx
Outdated
| @@ -1,10 +1,14 @@ | |||
| import React, { useState, useEffect } from 'react'; | |||
| import { Code2, Database, Brain, Cpu, BarChart3, GitBranch, ArrowLeft, RotateCcw, Sparkles, Award } from 'lucide-react'; | |||
| import { Code2, Database, Brain, Cpu, BarChart3, GitBranch, ArrowLeft, RotateCcw, Sparkles } from 'lucide-react'; | |||
There was a problem hiding this comment.
The 'Award' icon was removed from imports but there's no corresponding removal from the actual topics array visible in this diff. Ensure the RL topic that used the Award icon was actually removed from the topics array.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@Sandraa16012007 resolve merge conflicts |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on December 7
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| import researchPapers from "../../categorizedRPContent"; | ||
| import Navbar from './Navbar'; | ||
| import { Helmet } from 'react-helmet'; | ||
| import BackToTopButton from './BackToTopButton'; |
There was a problem hiding this comment.
Bug: Inconsistent Dark Mode Sync Across Component
The ResearchPaper component uses local dark mode state management instead of the new useDarkMode hook. This prevents it from syncing with the global dark mode state, leading to an inconsistent user experience across the application.
|
@anshaneja5 Please check. Resolved conflicts |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
src/components/QuestionBank.jsx:23
- The
bookmarksstate variable is referenced in this useEffect hook, but its state declaration was removed in the diff. The removed lines show thatconst [bookmarks, setBookmarks] = useState(...)was deleted, but the variable is still used on line 22 in the dependency array and in line 231 withsetBookmarks. This will cause a ReferenceError at runtime.
useEffect(() => {
localStorage.setItem('bookmarkedQuestions', JSON.stringify(bookmarks));
}, [bookmarks]);
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@Sandraa16012007 site layout, question bank is broken. |
2 participants
Title: Enhance UI with Themed Cursor, Animations & Visual Elements
Linked Issue
Fixes #21
Description:
This PR revamps the homepage UI to make it more engaging and visually consistent with the website’s theme.
Changes Made:
Result:
A more dynamic, modern, and visually cohesive interface that enhances user experience.
Note
Adds sitemap and legal pages, centralizes dark mode via
useDarkMode, integrates a BackToTop button, and introduces Framer Motion animations on the homepage.public/sitemap.xmlwith XSL viewerpublic/sitemap.xsland link inFooter.PrivacyPolicyandTermsOfUseinsrc/App.jsx.src/components/useDarkMode.jsand refactor multiple pages to use it (HomePage,Books,MachineLearningRoadmap,DeepLearningRoadmap,PrerequisiteRoadmap,GenerativeAIRoadmap,Journey,PrivacyPolicy,TermsOfUse).BackToTopButtonand integrate across pages.Footer: improved link handling (external/mailto/sitemap) and formatting.Books,QuestionBank,ResearchPaper: styling tweaks, dark mode consistency, animations, and BackToTop integration.src/App.css.Written by Cursor Bugbot for commit 668e8b1. This will update automatically on new commits. Configure here.