From 294f0fd0a2dc051563c816188f2935c37d78e99a Mon Sep 17 00:00:00 2001 From: Souvik Date: Fri, 5 Jan 2024 23:31:25 +0530 Subject: [PATCH 1/7] Scroll bar added --- package-lock.json | 57 ++++++++++++++++++++++++++++++++++++ package.json | 1 + src/components/Navbar.tsx | 30 ++++++++++++++++++- src/components/Scrollbar.css | 28 ++++++++++++++++++ 4 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 src/components/Scrollbar.css diff --git a/package-lock.json b/package-lock.json index 503fae6b..e17c2f6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "react-particles": "^2.12.2", "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.16.0", + "react-scrollbars-custom": "^4.1.1", "react-snowfall": "^1.2.1", "tailwind-clip-path": "^1.0.0", "tsparticles-engine": "^2.12.0", @@ -1609,6 +1610,23 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/cnbuilder": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cnbuilder/-/cnbuilder-3.1.0.tgz", + "integrity": "sha512-9sxWwwprkPNTVQnx92WYPEWCmyZRqbf9VWUYABU4rl0mLL17VAV2MvvOApkMA6bQVXRLJ8jN//8Yp6drElpLWA==", + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/xobotyi" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -3067,6 +3085,19 @@ "react": "^18.2.0" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-easy-swipe": { "version": "0.0.21", "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz", @@ -3171,6 +3202,23 @@ "react-dom": ">=16.8" } }, + "node_modules/react-scrollbars-custom": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-scrollbars-custom/-/react-scrollbars-custom-4.1.1.tgz", + "integrity": "sha512-FOI1EMrdN5qziwvFAuH4saOo0+ggxeTuKLPpy6nezNdLUnDW1vCHGq0VSSfTSRstDgfXgwff5TMP9NeJ8NiFOQ==", + "dependencies": { + "cnbuilder": "^3.1.0", + "react-draggable": "^4.4.5", + "zoom-level": "^2.5.0" + }, + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/xobotyi" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/react-snowfall": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-1.2.1.tgz", @@ -4140,6 +4188,15 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zoom-level": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/zoom-level/-/zoom-level-2.5.0.tgz", + "integrity": "sha512-7UlRWU4Q3uCMCeDVMOm7eBrIu145OqsIJ3p6zq58l8UsSYwKWxc6zEapC5YA9tIeh0oheb4cT9Kk2Wq353loFg==", + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/xobotyi" + } } } } diff --git a/package.json b/package.json index dedc57b6..f31ae56f 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-particles": "^2.12.2", "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.16.0", + "react-scrollbars-custom": "^4.1.1", "react-snowfall": "^1.2.1", "tailwind-clip-path": "^1.0.0", "tsparticles-engine": "^2.12.0", diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index e5453de9..5aa642e2 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -7,7 +7,12 @@ import kwoc_logo from "../assets/kwoc_logo.png"; import { ROUTER_PATHS, GH_OAUTH_URL } from "../util/constants"; import { useAuthContext } from "../util/auth"; import { UserType } from "../util/types"; +import "./Scrollbar.css"; + + + + const LINKS = [ { name: "HOME", link: ROUTER_PATHS.HOME }, { name: "PROJECTS", link: ROUTER_PATHS.PROJECTS_LIST }, @@ -15,6 +20,7 @@ const LINKS = [ { name: "FAQs", link: ROUTER_PATHS.FAQ }, ]; + function BrandLogo() { return ( @@ -27,6 +33,8 @@ function BrandLogo() { ); } + + function getNavbarLinkClasses(isMobile: boolean, isActive: boolean = false) { return ( (isMobile @@ -96,6 +104,13 @@ function LoginButton({ isMobile }: { isMobile: boolean }) { function Navbar() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const [bodyStyle, setBodyStyle] = useState({}); + + useEffect(() => { + setBodyStyle({ + overflow: "hidden", + }); + }, []); useEffect(() => { setMobileMenuOpen(false); @@ -106,6 +121,7 @@ function Navbar() { }; return ( +
+
); } function MobileNavbar({ toggleMobileMenu }: { toggleMobileMenu: () => void }) { + const [bodyStyle, setBodyStyle] = useState({}); + + useEffect(() => { + setBodyStyle({ + overflow: "hidden", + }); + }, []); return ( +
+ ); -} + } + export default Navbar; + diff --git a/src/components/Scrollbar.css b/src/components/Scrollbar.css new file mode 100644 index 00000000..0cdaf6cd --- /dev/null +++ b/src/components/Scrollbar.css @@ -0,0 +1,28 @@ + + /* ===== Scrollbar CSS ===== */ + + * { + scrollbar-width: auto; + scrollbar-color: #2997db #ffffff; + background-color: transparent; + } + + /* Chrome, Edge, and Safari */ + *::-webkit-scrollbar { + width: 10px; + background: transparent; + +} + +*::-webkit-scrollbar-track { + background: #ffffff; + border-radius: 10px; + background: none; + } + + *::-webkit-scrollbar-thumb { + background: linear-gradient(to top, #008aff, #00ffe7); + border-radius: 10px; + + } + \ No newline at end of file From 103441e05248455639a492a443bccacb5dcecb84 Mon Sep 17 00:00:00 2001 From: Souvik Date: Sat, 6 Jan 2024 13:58:21 +0530 Subject: [PATCH 2/7] Updated the code and removed unwanted portion --- package.json | 1 - src/components/Navbar.tsx | 15 +-------------- src/components/Scrollbar.css | 28 ---------------------------- src/main.css | 29 +++++++++++++++++++++++++++++ 4 files changed, 30 insertions(+), 43 deletions(-) delete mode 100644 src/components/Scrollbar.css diff --git a/package.json b/package.json index f31ae56f..dedc57b6 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "react-particles": "^2.12.2", "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.16.0", - "react-scrollbars-custom": "^4.1.1", "react-snowfall": "^1.2.1", "tailwind-clip-path": "^1.0.0", "tsparticles-engine": "^2.12.0", diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 5aa642e2..4ccf35f6 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -7,12 +7,7 @@ import kwoc_logo from "../assets/kwoc_logo.png"; import { ROUTER_PATHS, GH_OAUTH_URL } from "../util/constants"; import { useAuthContext } from "../util/auth"; import { UserType } from "../util/types"; -import "./Scrollbar.css"; - - - - const LINKS = [ { name: "HOME", link: ROUTER_PATHS.HOME }, { name: "PROJECTS", link: ROUTER_PATHS.PROJECTS_LIST }, @@ -34,7 +29,6 @@ function BrandLogo() { } - function getNavbarLinkClasses(isMobile: boolean, isActive: boolean = false) { return ( (isMobile @@ -160,13 +154,7 @@ function Navbar() { } function MobileNavbar({ toggleMobileMenu }: { toggleMobileMenu: () => void }) { - const [bodyStyle, setBodyStyle] = useState({}); - - useEffect(() => { - setBodyStyle({ - overflow: "hidden", - }); - }, []); + const [bodyStyle] = useState({}); return (
@@ -196,6 +184,5 @@ function MobileNavbar({ toggleMobileMenu }: { toggleMobileMenu: () => void }) { ); } - export default Navbar; diff --git a/src/components/Scrollbar.css b/src/components/Scrollbar.css deleted file mode 100644 index 0cdaf6cd..00000000 --- a/src/components/Scrollbar.css +++ /dev/null @@ -1,28 +0,0 @@ - - /* ===== Scrollbar CSS ===== */ - - * { - scrollbar-width: auto; - scrollbar-color: #2997db #ffffff; - background-color: transparent; - } - - /* Chrome, Edge, and Safari */ - *::-webkit-scrollbar { - width: 10px; - background: transparent; - -} - -*::-webkit-scrollbar-track { - background: #ffffff; - border-radius: 10px; - background: none; - } - - *::-webkit-scrollbar-thumb { - background: linear-gradient(to top, #008aff, #00ffe7); - border-radius: 10px; - - } - \ No newline at end of file diff --git a/src/main.css b/src/main.css index e8a184db..9936e31d 100644 --- a/src/main.css +++ b/src/main.css @@ -14,3 +14,32 @@ body { background: url("./assets/stars.png"), #0a0a19; } + + + /* ===== Scrollbar CSS ===== */ + + * { + scrollbar-width: auto; + scrollbar-color: #2997db #ffffff; + background-color: transparent; + } + + /* Chrome, Edge, and Safari */ + *::-webkit-scrollbar { + width: 10px; + background: transparent; + +} + +*::-webkit-scrollbar-track { + background: #ffffff; + border-radius: 10px; + background: none; + } + + *::-webkit-scrollbar-thumb { + background: linear-gradient(to top, #008aff, #00ffe7); + border-radius: 10px; + + } + \ No newline at end of file From 3d11146de00f58d75ef2d74be449d106f21140b0 Mon Sep 17 00:00:00 2001 From: Souvik Date: Sat, 6 Jan 2024 14:08:46 +0530 Subject: [PATCH 3/7] Div removed --- src/components/Navbar.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 4ccf35f6..fa4f314d 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -98,14 +98,6 @@ function LoginButton({ isMobile }: { isMobile: boolean }) { function Navbar() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); - const [bodyStyle, setBodyStyle] = useState({}); - - useEffect(() => { - setBodyStyle({ - overflow: "hidden", - }); - }, []); - useEffect(() => { setMobileMenuOpen(false); }, [location.pathname]); @@ -115,7 +107,7 @@ function Navbar() { }; return ( -
+
-
); } From cf67f5a69e256f6787fe975df8381d5a54a2ff74 Mon Sep 17 00:00:00 2001 From: Souvik Date: Sat, 6 Jan 2024 14:18:08 +0530 Subject: [PATCH 4/7] Spaces removed --- src/components/Navbar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index fa4f314d..338f87d1 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -15,7 +15,6 @@ const LINKS = [ { name: "FAQs", link: ROUTER_PATHS.FAQ }, ]; - function BrandLogo() { return ( From 3faf86a39acc5759d7c022cf81bdb329e3922c56 Mon Sep 17 00:00:00 2001 From: Souvik Date: Sat, 6 Jan 2024 18:20:35 +0530 Subject: [PATCH 5/7] Final update --- src/components/Navbar.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 338f87d1..75c94eec 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -106,12 +106,10 @@ function Navbar() { }; return ( -
-
); - } +} export default Navbar; From d01f7b1b3b350c232ada6ec654a97edf47f0c427 Mon Sep 17 00:00:00 2001 From: Souvik Date: Wed, 10 Jan 2024 12:48:26 +0530 Subject: [PATCH 6/7] Updated for firefox --- src/main.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/main.css b/src/main.css index 9936e31d..c078cbae 100644 --- a/src/main.css +++ b/src/main.css @@ -14,13 +14,10 @@ body { background: url("./assets/stars.png"), #0a0a19; } - - - /* ===== Scrollbar CSS ===== */ - + /* ===== Scrollbar CSS ===== */ * { - scrollbar-width: auto; - scrollbar-color: #2997db #ffffff; + scrollbar-width: thin; + scrollbar-color: #008aff #0000; background-color: transparent; } From bb45785d6c0b225eb23e5a5fad817a266d3790e7 Mon Sep 17 00:00:00 2001 From: Souvik Date: Thu, 11 Jan 2024 22:07:01 +0530 Subject: [PATCH 7/7] Fixed the sizing of scroll bar --- src/main.css | 35 +++++++++++++++-------------------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/src/main.css b/src/main.css index c078cbae..ca975f2e 100644 --- a/src/main.css +++ b/src/main.css @@ -9,34 +9,29 @@ color: #c1c1c1; font-family: "Ubuntu", sans-serif; font-weight: 500; + scrollbar-width: 5px; + scrollbar-color: #008aff #0000; + background-color: transparent; } body { background: url("./assets/stars.png"), #0a0a19; } - /* ===== Scrollbar CSS ===== */ - * { - scrollbar-width: thin; - scrollbar-color: #008aff #0000; - background-color: transparent; - } - /* Chrome, Edge, and Safari */ - *::-webkit-scrollbar { - width: 10px; - background: transparent; - +/* Chrome, Edge, and Safari */ +*::-webkit-scrollbar { + width: 5px; + background: transparent; } *::-webkit-scrollbar-track { - background: #ffffff; - border-radius: 10px; - background: none; - } + background: #ffffff; + border-radius: 5px; + background: none; +} - *::-webkit-scrollbar-thumb { - background: linear-gradient(to top, #008aff, #00ffe7); - border-radius: 10px; +*::-webkit-scrollbar-thumb { + background: linear-gradient(to top, #008aff, #00ffe7); + border-radius: 10px; - } - \ No newline at end of file +} \ No newline at end of file