From 48c591a8b9f94e35aa6133acbeb4b5ff3cfec6d3 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Sat, 11 Feb 2023 13:48:48 -0500
Subject: [PATCH] scrollbar styling

---
 package.json                           |  2 +-
 src/components/Conversations/index.jsx | 11 +++++++++--
 src/style.css                          | 23 +++++++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3525b27baf..f48a954126 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/Conversations/index.jsx b/src/components/Conversations/index.jsx
index 31875a4f2a..eecaf789b9 100644
--- a/src/components/Conversations/index.jsx
+++ b/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 &&
diff --git a/src/style.css b/src/style.css
index 7257b0de63..9928182a96 100644
--- a/src/style.css
+++ b/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;
 }
\ No newline at end of file