scrollbar styling

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "webpack-dev-server .",
     "build": "Webpack . --watch",
-    "server": "npx nodemon server/index.js",
+    "server": "npx node server/index.js",
     "test": "test"
   },
   "repository": {

src/components/Conversations/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import Conversation from './Conversation';
 
 export default function Conversations({ conversations }) {
+  const [isHovering, setIsHovering] = useState(false);
   const { conversationId } = useSelector((state) => state.convo);
   // const currentRef = useRef(null);
 
@@ -17,7 +18,13 @@ export default function Conversations({ conversations }) {
   // }, [conversationId]);
 
   return (
-    <div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
+    <div
+      className={`-mr-2 flex-1 flex-col overflow-y-auto ${
+        isHovering ? '' : 'scrollbar-transparent'
+      } border-b border-white/20`}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
       <div className="flex flex-col gap-2 text-sm text-gray-100">
         {/* <div ref={currentRef} /> */}
         {conversations &&

src/style.css

@@ -215,4 +215,27 @@ button {
 }
 .btn-small {
   padding: 0.25rem 0.5rem;
+}
+
+::-webkit-scrollbar {
+  height: 1rem;
+  width: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  --tw-border-opacity: 1;
+  /* background-color: rgba(217,217,227,.8); Original */
+  background-color: rgba(217, 217, 227, 0.26);
+  border-color: rgba(255,255,255,var(--tw-border-opacity));
+  border-radius: 9999px;
+  border-width: 1px;
+}
+
+.scrollbar-transparent::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 9999px;
 }