change scroller bg color

src/components/Group/GroupInvites.tsx

@@ -125,6 +125,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
             maxHeight: "300px",
             overflow: "auto",
           }}
+          className="scrollable-container"
         >
           {groupsWithJoinRequests?.map((group) => {
             return (

src/components/Group/GroupJoinRequests.tsx

@@ -172,7 +172,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
     </Typography>
   </Box>
     )}
-    <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
+    <List className="scrollable-container" sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
       {filteredJoinRequests?.map((group)=> {
         if(group?.data?.length === 0) return null
         return (

src/components/Group/ListOfGroupPromotions.tsx

@@ -685,6 +685,7 @@ export const ListOfGroupPromotions = () => {
                 rowHeight={cache.rowHeight}
                 rowRenderer={rowRenderer}
                 deferredMeasurementCache={cache}
+                className="scrollable-container"
               />
             )}
           </AutoSizer>

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -135,6 +135,7 @@ export const ListOfThreadPostsWatched = () => {
         )}
         {posts?.length > 0 && (
                <List
+               className="scrollable-container"
                sx={{
                  width: "100%",
                  maxWidth: 360,

src/components/Group/QMailMessages.tsx

@@ -129,6 +129,7 @@ export const QMailMessages = ({userName, userAddress}) => {
     </Box>
 
     <Box
+    className="scrollable-container"
       sx={{
         width: "322px",
         height: isMobile ? "165px" : "250px",

src/index.css

@@ -79,12 +79,41 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: white;
+  background-color: #444444;
   border-radius: 8px;
   background-clip: content-box;
   border: 4px solid transparent;
 }
 
+@property --var1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+
+.scrollable-container {
+  transition: --var1 0.4s;
+
+}
+
+.scrollable-container:hover {
+  --var1: #444444;
+}
+
+.scrollable-container::-webkit-scrollbar-thumb {
+  background-color: var(--var1);
+  border-radius: 8px;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  opacity: 0;
+}
+
+
+
+
+
+
 /* Mobile-specific scrollbar styles */
 @media only screen and (max-width: 600px) {
   ::-webkit-scrollbar {