From 7de6a7434b7a81dba1b4b64d8e0b39db32a56a00 Mon Sep 17 00:00:00 2001 From: Khushee21 Date: Mon, 16 Jun 2025 13:23:49 +0530 Subject: [PATCH] responsive scroll bar added --- client/package-lock.json | 44 +++++++++++++++++++ client/package.json | 1 + client/src/App.css | 21 ++++++++- client/src/api/axios.js | 2 +- .../assets/components/Dashboard/Dashboard.jsx | 3 +- .../src/assets/components/network/Network.jsx | 1 + client/tailwind.config.js | 1 + server/package-lock.json | 1 - server/server.js | 8 ++++ 9 files changed, 78 insertions(+), 4 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 34b1260e..75469d9e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -21,6 +21,7 @@ "react-markdown": "^10.1.0", "react-router-dom": "^6.23.1", "remark-gfm": "^4.0.1", + "tailwind-scrollbar": "^4.0.2", "tailwindcss": "^3.4.4" }, "devDependencies": { @@ -1300,6 +1301,12 @@ "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==", "license": "MIT" }, + "node_modules/@types/prismjs": { + "version": "1.26.5", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz", + "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==", + "license": "MIT" + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -1887,6 +1894,15 @@ "node": ">= 6" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -5569,6 +5585,19 @@ "node": ">= 0.8.0" } }, + "node_modules/prism-react-renderer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz", + "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==", + "license": "MIT", + "dependencies": { + "@types/prismjs": "^1.26.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -6446,6 +6475,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-scrollbar": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-4.0.2.tgz", + "integrity": "sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==", + "license": "MIT", + "dependencies": { + "prism-react-renderer": "^2.4.1" + }, + "engines": { + "node": ">=12.13.0" + }, + "peerDependencies": { + "tailwindcss": "4.x" + } + }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/client/package.json b/client/package.json index 45e869be..da96507f 100644 --- a/client/package.json +++ b/client/package.json @@ -23,6 +23,7 @@ "react-markdown": "^10.1.0", "react-router-dom": "^6.23.1", "remark-gfm": "^4.0.1", + "tailwind-scrollbar": "^4.0.2", "tailwindcss": "^3.4.4" }, "devDependencies": { diff --git a/client/src/App.css b/client/src/App.css index cc8ef0f2..c2b89e78 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -71,4 +71,23 @@ h1, h2, h3, h4, h5, h6 { .nav-li-hover { background-color: var(--fallback-bc, oklch(var(--bc) / 0.1)); -} \ No newline at end of file +} + +/* Base scrollbar style */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: var(--fallback-b1, oklch(var(--b1) / 0.6)); +} + +::-webkit-scrollbar-track { + background-color: var(--fallback-b2, oklch(var(--b2) / 0.3)); +} + +/* Optional: hover effect */ +::-webkit-scrollbar-thumb:hover { + background-color: var(--fallback-b1, oklch(var(--b1) / 0.8)); +} diff --git a/client/src/api/axios.js b/client/src/api/axios.js index b60964c4..dc362d7e 100644 --- a/client/src/api/axios.js +++ b/client/src/api/axios.js @@ -1,5 +1,5 @@ import axios from 'axios'; -const BASE_URL = 'http://localhost:5000'; +const BASE_URL = 'http://localhost:3000'; export default axios.create({ baseURL: BASE_URL diff --git a/client/src/assets/components/Dashboard/Dashboard.jsx b/client/src/assets/components/Dashboard/Dashboard.jsx index 17aa7ac7..69355d84 100644 --- a/client/src/assets/components/Dashboard/Dashboard.jsx +++ b/client/src/assets/components/Dashboard/Dashboard.jsx @@ -48,7 +48,8 @@ const Dashboard = () => { }) return ( -
+
+ {/*responsive scroll bar added*/} {/* main container */}
{/* first column */} diff --git a/client/src/assets/components/network/Network.jsx b/client/src/assets/components/network/Network.jsx index ca82e253..cf9b2114 100644 --- a/client/src/assets/components/network/Network.jsx +++ b/client/src/assets/components/network/Network.jsx @@ -32,6 +32,7 @@ const Network = () => { return (
+ {/*Add scroll bar here if needed*/} {loading ? diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 5581a02b..fdf9cbe8 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -23,6 +23,7 @@ module.exports = { }, plugins: [ require("daisyui"), + require("tailwind-scrollbar"), ], daisyui: { styled: true, diff --git a/server/package-lock.json b/server/package-lock.json index 067e3eb4..4231b176 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -17,7 +17,6 @@ "express": "^4.19.2", "jsonwebtoken": "^9.0.2", "mongoose": "^8.4.3", - "server": "file:", "uuid": "^10.0.0", "validator": "^13.15.0" } diff --git a/server/server.js b/server/server.js index 6adfeb13..82c134f5 100644 --- a/server/server.js +++ b/server/server.js @@ -8,6 +8,12 @@ const corsOptions = require('./config/corsOptions') const app = express(); const port = process.env.PORT || 3000; +{/*you can add if needed for check res i have added this*/} +// app.get('/' , (req, res)=>{ +// res.send('Dev Connecct to server') +// console.log('Dev Coonect to server'); +// }) + connectDB(); // Cross Origin Resource Sharing @@ -23,6 +29,8 @@ const logoutRoutes = require('./routes/logoutRoutes'); const profileRoutes = require('./routes/profileRoutes'); const blogPostRoutes = require('./routes/blogPostRoutes'); + + // Middleware app.use(express.json()); app.use(cookieParser());