From 4a58ec21efa781a35960268dff8a3a218926bd0f Mon Sep 17 00:00:00 2001 From: abishek1740P Date: Mon, 30 Sep 2024 18:29:48 +0530 Subject: [PATCH 1/2] feat : added scroll bar component --- package.json | 3 +- src/App.tsx | 2 + .../CustomScrollbar/CustomScrollbar.tsx | 28 ++++++ .../ExampleComponent/ExampleComponent.tsx | 16 ++++ yarn.lock | 89 ++++++++++++++++++- 5 files changed, 135 insertions(+), 3 deletions(-) create mode 100644 src/components/CustomScrollbar/CustomScrollbar.tsx create mode 100644 src/components/ExampleComponent/ExampleComponent.tsx diff --git a/package.json b/package.json index cc20ada..7ddc827 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "react": "^18.2.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "styled-components": "^6.1.13" }, "devDependencies": { "@types/react": "^18.2.43", diff --git a/src/App.tsx b/src/App.tsx index 2d8240a..bb335f1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import TopBar from "./components/TopBar/TopBar"; import WidgetHolder from "./components/WidgetHolder/WidgetHolder"; +// import ExampleComponent from "./components/ExampleComponent/ExampleComponent"; //This is an example of how the custom Scroll bar Works. import Footer from "./components/Footer/Footer"; import styles from "./app.module.scss"; @@ -9,6 +10,7 @@ function App() {
+ {/* */}
diff --git a/src/components/CustomScrollbar/CustomScrollbar.tsx b/src/components/CustomScrollbar/CustomScrollbar.tsx new file mode 100644 index 0000000..5a59ae9 --- /dev/null +++ b/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -0,0 +1,28 @@ +import styled from 'styled-components'; + +// Create a reusable scrollable div +export const ScrollableDiv = styled.div` + height: 100%; + overflow-y: scroll; + + /* Custom Scrollbar Styling */ + &::-webkit-scrollbar { + width: 12px; + } + + &::-webkit-scrollbar-track { + background-color: #1a1a1a; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: #9c9487; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb:hover { + background-color: #888; + } +`; + +export default ScrollableDiv; diff --git a/src/components/ExampleComponent/ExampleComponent.tsx b/src/components/ExampleComponent/ExampleComponent.tsx new file mode 100644 index 0000000..75ff8f5 --- /dev/null +++ b/src/components/ExampleComponent/ExampleComponent.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { ScrollableDiv } from '../CustomScrollbar/CustomScrollbar'; + +const ExampleComponent: React.FC = () => { + return ( + +

Scroll Down

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate facere odio impedit, provident a praesentium obcaecati eaque nobis consequatur illo perspiciatis dolorum, vero magnam quod sapiente, possimus facilis? Soluta sequi fugiat repellat libero voluptas eius reprehenderit sed laboriosam. Doloribus incidunt nam tempore! Dolorem libero maxime nobis laborum eveniet! Molestias quam recusandae commodi illo, dignissimos praesentium deserunt excepturi amet impedit soluta, cupiditate, nemo sequi. Exercitationem aperiam ipsam eum! Eligendi, explicabo? Odio soluta illo vero minima repudiandae illum accusamus qui? Consequuntur enim minus maiores distinctio eaque autem quis quae doloremque. Fugiat, aliquid autem suscipit harum ratione eveniet totam ut quis, accusantium voluptatum culpa nihil vitae! Illo, asperiores expedita! Beatae dolorum provident fugit quidem! Nobis, repellendus facere. Consequatur quo ea illo, eos dolorem assumenda sint inventore quidem nisi ullam, dolore quisquam molestias rem quae, beatae ab officiis iure in non eum repudiandae? Maiores ullam sapiente deserunt, a itaque necessitatibus tenetur officiis molestias eligendi dignissimos unde quos nihil culpa illum rem qui voluptatem possimus expedita nulla distinctio exercitationem similique inventore suscipit! Eveniet, dicta dolore nemo consectetur ab aut accusantium voluptatum id temporibus quasi illum voluptate est consequuntur atque quae incidunt esse quidem minima nesciunt possimus inventore. Totam debitis eius aspernatur! At doloribus commodi iusto porro est repellat nemo odio nesciunt rerum, omnis eveniet asperiores expedita ipsum culpa enim alias, vel ex ducimus natus esse harum dolorum nihil dolor ut! Laboriosam officiis ratione aliquid optio sit, deserunt ullam obcaecati magnam veniam repellendus sapiente aliquam! Quis porro saepe eos vitae id animi doloribus inventore quaerat doloremque, blanditiis quidem, similique dolor! Magni velit eligendi facilis amet commodi consequuntur eos, repellat rem nesciunt? Voluptatem reiciendis libero mollitia sint ut minima delectus nobis maxime officiis, ab suscipit impedit non enim quod veritatis aliquid deserunt, aperiam iste repellendus. Nobis repellat debitis voluptatibus doloremque cumque a officia suscipit molestias fugit laudantium deleniti id eveniet, assumenda aspernatur tempora accusamus, culpa tempore aliquid, explicabo ipsum eius nesciunt? Debitis magnam iure ea ex qui explicabo nulla accusantium laboriosam rerum illum eum et repellendus mollitia, facere molestias earum unde dolore. Amet minus aliquam, perspiciatis et vero dignissimos expedita! Voluptas molestiae soluta repellat possimus. Assumenda voluptatibus ipsum officia quibusdam molestiae tempore ducimus ab, dicta, animi, id laudantium odio exercitationem eos voluptatem? Cupiditate magnam laboriosam doloribus quos ex eaque consectetur expedita enim nulla? Architecto odit cumque omnis fuga eum quam odio nisi culpa nam dolores animi recusandae maiores minus error aliquid exercitationem, nobis minima mollitia quia iusto velit enim dolore deleniti! Pariatur facere voluptas fugiat autem hic. Amet nobis, tenetur laboriosam, quis recusandae id, optio placeat fuga deserunt debitis sint eum doloribus libero voluptates! Dolorum quibusdam facilis cumque repellendus tempore cupiditate ullam fuga, ipsam perspiciatis totam quo laudantium molestias alias itaque odit, aspernatur illo in veritatis perferendis harum animi minima. In, similique cupiditate molestias neque ipsa sequi? Sit cupiditate odit labore quaerat fugiat neque ipsam cumque aliquid quidem officiis delectus est dignissimos exercitationem provident dicta, itaque iure, repellat nihil quae, doloremque quis. Optio error similique nisi totam, dicta enim nesciunt quos quis atque labore, perferendis in consequatur. +

+ {/* Add more content to make it scrollable */} + + ); +}; + +export default ExampleComponent; diff --git a/yarn.lock b/yarn.lock index 1ee005d..0110222 100644 --- a/yarn.lock +++ b/yarn.lock @@ -220,6 +220,23 @@ "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" +"@emotion/is-prop-valid@1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337" + integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw== + dependencies: + "@emotion/memoize" "^0.8.1" + +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/unitless@0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + "@esbuild/aix-ppc64@0.19.11": version "0.19.11" resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3" @@ -662,6 +679,11 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339" integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A== +"@types/stylis@4.2.5": + version "4.2.5" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df" + integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw== + "@typescript-eslint/eslint-plugin@^6.14.0": version "6.19.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.19.0.tgz#db03f3313b57a30fbbdad2e6929e88fc7feaf9ba" @@ -868,6 +890,11 @@ callsites@^3.0.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001565: version "1.0.30001579" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz#45c065216110f46d6274311a4b3fcf6278e0852a" @@ -953,7 +980,21 @@ cross-spawn@^7.0.2: shebang-command "^2.0.0" which "^2.0.1" -csstype@^3.0.2: +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + +css-to-react-native@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" + integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + +csstype@3.1.3, csstype@^3.0.2: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== @@ -1590,6 +1631,20 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== +postcss-value-parser@^4.0.2: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + +postcss@8.4.38: + version "8.4.38" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e" + integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A== + dependencies: + nanoid "^3.3.7" + picocolors "^1.0.0" + source-map-js "^1.2.0" + postcss@^8.4.35: version "8.4.47" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365" @@ -1762,6 +1817,11 @@ semver@^7.5.4: dependencies: lru-cache "^6.0.0" +shallowequal@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -1784,7 +1844,7 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== -source-map-js@^1.2.1: +source-map-js@^1.2.0, source-map-js@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== @@ -1801,6 +1861,26 @@ strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +styled-components@^6.1.13: + version "6.1.13" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.13.tgz#2d777750b773b31469bd79df754a32479e9f475e" + integrity sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw== + dependencies: + "@emotion/is-prop-valid" "1.2.2" + "@emotion/unitless" "0.8.1" + "@types/stylis" "4.2.5" + css-to-react-native "3.2.0" + csstype "3.1.3" + postcss "8.4.38" + shallowequal "1.1.0" + stylis "4.3.2" + tslib "2.6.2" + +stylis@4.3.2: + version "4.3.2" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444" + integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -1837,6 +1917,11 @@ ts-api-utils@^1.0.1: resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331" integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg== +tslib@2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1" From 0e23714204ba31e2fb82f84f9cb13ac2af394910 Mon Sep 17 00:00:00 2001 From: abishek1740P Date: Thu, 3 Oct 2024 20:52:40 +0530 Subject: [PATCH 2/2] fix : Removed Example Component and added a global scrollbar.scss --- src/App.tsx | 4 +-- .../CustomScrollbar/CustomScrollbar.tsx | 28 ------------------- .../ExampleComponent/ExampleComponent.tsx | 16 ----------- src/index.scss | 2 ++ src/styles/scrollbar.scss | 19 +++++++++++++ 5 files changed, 22 insertions(+), 47 deletions(-) delete mode 100644 src/components/CustomScrollbar/CustomScrollbar.tsx delete mode 100644 src/components/ExampleComponent/ExampleComponent.tsx create mode 100644 src/styles/scrollbar.scss diff --git a/src/App.tsx b/src/App.tsx index bb335f1..dde6577 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,5 @@ import TopBar from "./components/TopBar/TopBar"; -import WidgetHolder from "./components/WidgetHolder/WidgetHolder"; -// import ExampleComponent from "./components/ExampleComponent/ExampleComponent"; //This is an example of how the custom Scroll bar Works. +import WidgetHolder from "./components/WidgetHolder/WidgetHolder"; import Footer from "./components/Footer/Footer"; import styles from "./app.module.scss"; @@ -10,7 +9,6 @@ function App() {
- {/* */}
diff --git a/src/components/CustomScrollbar/CustomScrollbar.tsx b/src/components/CustomScrollbar/CustomScrollbar.tsx deleted file mode 100644 index 5a59ae9..0000000 --- a/src/components/CustomScrollbar/CustomScrollbar.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import styled from 'styled-components'; - -// Create a reusable scrollable div -export const ScrollableDiv = styled.div` - height: 100%; - overflow-y: scroll; - - /* Custom Scrollbar Styling */ - &::-webkit-scrollbar { - width: 12px; - } - - &::-webkit-scrollbar-track { - background-color: #1a1a1a; - border-radius: 10px; - } - - &::-webkit-scrollbar-thumb { - background-color: #9c9487; - border-radius: 10px; - } - - &::-webkit-scrollbar-thumb:hover { - background-color: #888; - } -`; - -export default ScrollableDiv; diff --git a/src/components/ExampleComponent/ExampleComponent.tsx b/src/components/ExampleComponent/ExampleComponent.tsx deleted file mode 100644 index 75ff8f5..0000000 --- a/src/components/ExampleComponent/ExampleComponent.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { ScrollableDiv } from '../CustomScrollbar/CustomScrollbar'; - -const ExampleComponent: React.FC = () => { - return ( - -

Scroll Down

-

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate facere odio impedit, provident a praesentium obcaecati eaque nobis consequatur illo perspiciatis dolorum, vero magnam quod sapiente, possimus facilis? Soluta sequi fugiat repellat libero voluptas eius reprehenderit sed laboriosam. Doloribus incidunt nam tempore! Dolorem libero maxime nobis laborum eveniet! Molestias quam recusandae commodi illo, dignissimos praesentium deserunt excepturi amet impedit soluta, cupiditate, nemo sequi. Exercitationem aperiam ipsam eum! Eligendi, explicabo? Odio soluta illo vero minima repudiandae illum accusamus qui? Consequuntur enim minus maiores distinctio eaque autem quis quae doloremque. Fugiat, aliquid autem suscipit harum ratione eveniet totam ut quis, accusantium voluptatum culpa nihil vitae! Illo, asperiores expedita! Beatae dolorum provident fugit quidem! Nobis, repellendus facere. Consequatur quo ea illo, eos dolorem assumenda sint inventore quidem nisi ullam, dolore quisquam molestias rem quae, beatae ab officiis iure in non eum repudiandae? Maiores ullam sapiente deserunt, a itaque necessitatibus tenetur officiis molestias eligendi dignissimos unde quos nihil culpa illum rem qui voluptatem possimus expedita nulla distinctio exercitationem similique inventore suscipit! Eveniet, dicta dolore nemo consectetur ab aut accusantium voluptatum id temporibus quasi illum voluptate est consequuntur atque quae incidunt esse quidem minima nesciunt possimus inventore. Totam debitis eius aspernatur! At doloribus commodi iusto porro est repellat nemo odio nesciunt rerum, omnis eveniet asperiores expedita ipsum culpa enim alias, vel ex ducimus natus esse harum dolorum nihil dolor ut! Laboriosam officiis ratione aliquid optio sit, deserunt ullam obcaecati magnam veniam repellendus sapiente aliquam! Quis porro saepe eos vitae id animi doloribus inventore quaerat doloremque, blanditiis quidem, similique dolor! Magni velit eligendi facilis amet commodi consequuntur eos, repellat rem nesciunt? Voluptatem reiciendis libero mollitia sint ut minima delectus nobis maxime officiis, ab suscipit impedit non enim quod veritatis aliquid deserunt, aperiam iste repellendus. Nobis repellat debitis voluptatibus doloremque cumque a officia suscipit molestias fugit laudantium deleniti id eveniet, assumenda aspernatur tempora accusamus, culpa tempore aliquid, explicabo ipsum eius nesciunt? Debitis magnam iure ea ex qui explicabo nulla accusantium laboriosam rerum illum eum et repellendus mollitia, facere molestias earum unde dolore. Amet minus aliquam, perspiciatis et vero dignissimos expedita! Voluptas molestiae soluta repellat possimus. Assumenda voluptatibus ipsum officia quibusdam molestiae tempore ducimus ab, dicta, animi, id laudantium odio exercitationem eos voluptatem? Cupiditate magnam laboriosam doloribus quos ex eaque consectetur expedita enim nulla? Architecto odit cumque omnis fuga eum quam odio nisi culpa nam dolores animi recusandae maiores minus error aliquid exercitationem, nobis minima mollitia quia iusto velit enim dolore deleniti! Pariatur facere voluptas fugiat autem hic. Amet nobis, tenetur laboriosam, quis recusandae id, optio placeat fuga deserunt debitis sint eum doloribus libero voluptates! Dolorum quibusdam facilis cumque repellendus tempore cupiditate ullam fuga, ipsam perspiciatis totam quo laudantium molestias alias itaque odit, aspernatur illo in veritatis perferendis harum animi minima. In, similique cupiditate molestias neque ipsa sequi? Sit cupiditate odit labore quaerat fugiat neque ipsam cumque aliquid quidem officiis delectus est dignissimos exercitationem provident dicta, itaque iure, repellat nihil quae, doloremque quis. Optio error similique nisi totam, dicta enim nesciunt quos quis atque labore, perferendis in consequatur. -

- {/* Add more content to make it scrollable */} - - ); -}; - -export default ExampleComponent; diff --git a/src/index.scss b/src/index.scss index 0f9fd68..747cb07 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,6 +1,8 @@ @import url("https://fonts.googleapis.com/css2?family=Inter&family=Poppins:wght@800&family=Ubuntu+Mono&display=swap"); @import "/src/styles/variables.scss"; @import "/src/styles/mixins.scss"; +@import "/src/styles/scrollbar.scss"; + :root { @include font-inter; diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss new file mode 100644 index 0000000..536e369 --- /dev/null +++ b/src/styles/scrollbar.scss @@ -0,0 +1,19 @@ +/* Global Scrollbar Styling */ +body::-webkit-scrollbar { + width: 10px; + } + + body::-webkit-scrollbar-track { + background-color: #1a1a1a; + border-radius: 10px; + } + + body::-webkit-scrollbar-thumb { + background-color: #9c9487; + border-radius: 10px; + } + + body::-webkit-scrollbar-thumb:hover { + background-color: #888; + } + \ No newline at end of file