Updated the css styling for custom scroll bar.

PalisadoesFoundation · Feb 10, 2024 · 859e5bd · 859e5bd
1 parent 6e74680
commit 859e5bd
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 42 deletions.
diff --git a/src/assets/css/scroll-styles.css b/src/assets/css/scroll-styles.css
@@ -0,0 +1,18 @@
+.custom-scroll {
+  overflow-y: scroll;
+}
+.custom-scroll::-webkit-scrollbar {
+  width: 5px;
+}
+.custom-scroll::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+.custom-scroll::-webkit-scrollbar-thumb {
+  background: var(--bs-gray-500);
+  border-radius: 6px;
+}
+.custom-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--bs-gray-600);
+  border-radius: 6px;
+}
diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
@@ -22,29 +22,9 @@
 
 .calendar__scroll {
   height: 80vh;
-  overflow-y: scroll;
   padding: 10px;
 }
 
-.calendar__scroll::-webkit-scrollbar {
-  width: 7px;
-}
-
-.calendar__scroll::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 6px;
-}
-
-.calendar__scroll::-webkit-scrollbar-thumb {
-  background: var(--bs-gray-500);
-  border-radius: 6px;
-}
-
-.calendar__scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--bs-gray-600);
-  border-radius: 6px;
-}
-
 .calendar__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);

diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
@@ -6,6 +6,7 @@ import styles from './EventCalendar.module.css';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import { Dropdown } from 'react-bootstrap';
 import CurrentHourIndicator from 'components/CurrentHourIndicator/CurrentHourIndicator';
+import '../../assets/css/scroll-styles.css';
 
 interface InterfaceEvent {
   _id: string;
@@ -571,7 +572,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           </Dropdown>
         </div>
       </div>
-      <div className={styles.calendar__scroll}>
+      <div className={`${styles.calendar__scroll} custom-scroll`}>
         {viewType == ViewType.MONTH ? (
           <div>
             <div className={styles.calendar__weekdays}>

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -9,26 +9,6 @@
   padding: 0.8rem 1rem 0 1rem;
   background-color: var(--bs-white);
   transition: 0.5s;
-  overflow-y: scroll;
-}
-
-.leftDrawer::-webkit-scrollbar {
-  width: 7px;
-}
-
-.leftDrawer::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 6px;
-}
-
-.leftDrawer::-webkit-scrollbar-thumb {
-  background: var(--bs-gray-500);
-  border-radius: 6px;
-}
-
-.leftDrawer::-webkit-scrollbar-thumb:hover {
-  background: var(--bs-gray-600);
-  border-radius: 6px;
 }
 
 .activeDrawer {

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -15,6 +15,7 @@ import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import styles from './LeftDrawerOrg.module.css';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
+import '../../assets/css/scroll-styles.css';
 
 export interface InterfaceLeftDrawerProps {
   orgId: string;
@@ -76,7 +77,7 @@ const leftDrawerOrg = ({
   return (
     <>
       <div
-        className={`${styles.leftDrawer} ${
+        className={`${styles.leftDrawer} custom-scroll ${
           hideDrawer === null
             ? styles.hideElemByDefault
             : hideDrawer