fix-#455: custom cursor and scrolling thumb

Author: chandrikaHarsha

Diff for: backend/.gitignore

@@ -0,0 +1,19 @@
+# Node.js
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Environment variables
+.env
+
+# Build output
+dist/
+
+# Logs
+logs/
+*.log
+
+# OS-specific files
+.DS_Store
+Thumbs.db

Diff for: backend/package.json

@@ -38,7 +38,7 @@
   },
   "scripts": {
     "test": "jest --watchAll  --detectOpenHandles --verbose --coverage ",
-    "start": "node server.js",
+    "start": "node dist/server.js",
     "dev": "nodemon server.js",
     "check": "prettier --check .",
     "format": "prettier --write .",
@@ -69,6 +69,7 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "supertest": "^6.3.3",
-    "typescript": "^5.5.4"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.2"
   }
 }

Diff for: backend/tsconfig.json

@@ -2,12 +2,12 @@
   "compilerOptions": {
     "target": "es2016",
     "module": "ESNext",
-    "moduleResolution": "Node",                   
-    "allowArbitraryExtensions": true,                            
-    "outDir": "./dist",                                   
+    "moduleResolution": "Node",
+    "allowArbitraryExtensions": true,
+    "outDir": "./dist",
     "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,            
-    "strict": true,                                      
-    "skipLibCheck": true,                     
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
   }
 }

Diff for: frontend/package.json

@@ -11,7 +11,8 @@
     "format": "prettier --write .",
     "test": "vitest run",
     "coverage": "vitest run --coverage ",
-    "prepare": "cd .. && npm install"
+    "prepare": "cd .. && npm install",
+    "serve":"vite preview"
   },
   "lint-staged": {
     "src/**/*.{js,ts,tsx,jsx}": [

Diff for: frontend/public/travelCursor.png

@@ -3,7 +3,10 @@ import { Outlet } from 'react-router-dom';
 
 const AdminContainer = () => {
   return (
-    <div className="relative flex flex-grow flex-col bg-light dark:bg-dark sm:flex-row">
+    <div
+      className="relative flex flex-grow flex-col bg-light dark:bg-dark sm:flex-row"
+      style={{ cursor: 'url(/travelCursor.png),auto' }}
+    >
       <AdminSidebar />
       <Outlet />
     </div>

Diff for: frontend/src/components/admin-container.tsx

@@ -21,7 +21,7 @@ export default function FeaturedPostCard({
         <img
           src={post.imageLink}
           alt={post.title}
-          className={`sm:group-hover:scale-hover h-48 w-full rounded-lg object-cover shadow-lg transition-transform ease-in-out sm:h-full`}
+          className={`sm:group-hover:scale-hover h-48 w-full rounded-lg object-cover shadow-lg transition-transform duration-700 ease-in-out sm:h-full`}
         />
       </div>
       <div className="flex h-full w-full flex-col gap-2 p-3 sm:w-2/3">

Diff for: frontend/src/components/featured-post-card.tsx

@@ -21,7 +21,7 @@ export default function PostCard({ post, testId = 'postcard' }: { post: Post } &
           <img
             src={post.imageLink}
             alt={post.title}
-            className={`sm:group-hover:scale-hover h-full w-full rounded-t-lg object-cover transition-transform ease-in-out`}
+            className={`sm:group-hover:scale-hover h-full w-full rounded-t-lg object-cover transition-transform duration-700 ease-in-out`}
           />
         </div>
         <div className="p-3">

Diff for: frontend/src/components/post-card.tsx

@@ -10,3 +10,16 @@
     transform: scale(0.95);
   }
 }
+
+body,
+html {
+  cursor: url('/travelCursor.png'), pointer;
+}
+body::-webkit-scrollbar {
+  background: transparent;
+}
+body::-webkit-scrollbar-thumb {
+  background: rgb(41, 126, 199);
+  border-radius: 50px;
+  box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.3);
+}

Diff for: frontend/src/index.css

@@ -38,7 +38,7 @@ const AdminBlogs = () => {
 
   return (
     <>
-      <div className="w-full p-3 px-5 sm:p-12">
+      <div className="w-full p-3 px-5 sm:p-12" style={{ cursor: 'url(/travelCursor.png),auto' }}>
         <h1 className="absolute left-16 top-3 text-2xl font-bold text-light-title dark:text-dark-title  sm:static">
           Blogs
         </h1>

Diff for: frontend/src/pages/admin-blogs.tsx

@@ -40,7 +40,7 @@ const AdminUsers = () => {
   }, []);
 
   return (
-    <div className="w-full p-3 px-5 sm:p-12">
+    <div className="w-full p-3 px-5 sm:p-12" style={{ cursor: 'url(/travelCursor.png),auto' }}>
       <h1 className="absolute left-16 top-3 text-2xl font-bold text-light-title dark:text-dark-title sm:static">
         Users
       </h1>

Diff for: frontend/src/pages/admin-users.tsx

@@ -90,7 +90,10 @@ export default function DetailsPage() {
 
   if (!loading)
     return (
-      <div className="flex-grow bg-light dark:bg-dark">
+      <div
+        className="flex-grow bg-light dark:bg-dark"
+        style={{ cursor: 'url(/travelCursor.png),auto' }}
+      >
         <div className="relative flex flex-col">
           <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover sm:h-96" />
           <div className="absolute left-0 top-0 h-full w-full bg-slate-950/60"></div>

Diff for: frontend/src/pages/details-page.tsx

@@ -21,7 +21,10 @@ function HomePage() {
   }, []);
 
   return (
-    <div className="w-full cursor-default bg-light dark:bg-dark">
+    <div
+      className="w-full cursor-default bg-light dark:bg-dark"
+      style={{ cursor: 'url(/travelCursor.png),auto' }}
+    >
       <Header />
       <div className="mx-4 sm:mx-8 lg:mx-16">
         <BlogFeed />

Diff for: frontend/src/pages/home-page.tsx

@@ -25,7 +25,7 @@ function NotFound() {
   }, []);
 
   return (
-    <div>
+    <div style={{ cursor: 'url(/travelCursor.png),auto' }}>
       <div className="relative -mt-2 ">
         <div className="absolute inset-0 bg-black opacity-50"></div>
         <div className="absolute inset-0 flex flex-col bg-white px-4 py-8 text-black dark:bg-dark  dark:text-slate-50 sm:px-16">

Diff for: frontend/src/pages/not-found.tsx

@@ -107,7 +107,10 @@ function signin() {
   };
 
   return (
-    <div className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card">
+    <div
+      className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card"
+      style={{ cursor: 'url(/travelCursor.png),auto' }}
+    >
       <div className="m-4 mb-4 flex justify-center">
         <div className="flex w-full items-center justify-center">
           <h2 className="w-2/4 pl-2 text-center text-lg font-bold text-black dark:text-dark-primary sm:text-xl md:w-3/4 md:pl-48">

Diff for: frontend/src/pages/signin-page.tsx

@@ -102,7 +102,10 @@ function Signup() {
   };
 
   return (
-    <div className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card">
+    <div
+      className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card"
+      style={{ cursor: 'url(/travelCursor.png),auto' }}
+    >
       <div className="m-4 mb-4 flex justify-center">
         <div className="flex w-full items-center justify-center">
           <h2 className="w-2/4 pl-2 text-center text-lg font-bold text-black dark:text-dark-primary sm:text-xl md:w-3/4 md:pl-48">