Address Analysis Scrollbar

src/components/Graph/AnalysisWindow/AnalysisWindow.tsx

@@ -1,4 +1,5 @@
-import { FC, createContext, useRef } from "react";
+import { FC, createContext, useRef, useState, useEffect } from "react";
+import clsx from "clsx";
 
 import Draggable from "react-draggable";
 import Content from "./Content";
@@ -24,6 +25,13 @@ const DraggableWindow: FC<DraggableWindowProps> = ({
   analysisData,
   setFocusedAddressData,
 }) => {
+  const [hasBeenHovered, setHasBeenHovered] = useState<boolean>(false);
+  const nodeRef = useRef(null);
+
+  useEffect(() => {
+    setHasBeenHovered(false);
+  }, [analysisData]);
+
   if (analysisData === null) {
     return null;
   }
@@ -33,14 +41,18 @@ const DraggableWindow: FC<DraggableWindowProps> = ({
     address: analysisData.address,
   };
 
-  const nodeRef = useRef(null);
-
   return (
     <div className="pointer-events-none fixed z-50 h-full w-full">
       <AnalysisContext.Provider value={contextValue}>
         <Draggable nodeRef={nodeRef}>
           <div ref={nodeRef}>
-            <div className="pointer-events-auto w-[68rem] scale-75 divide-y divide-dashed divide-gray-200 overflow-hidden rounded-lg bg-white opacity-50 shadow-xl transition-opacity duration-300 hover:opacity-100">
+            <div
+              className={clsx(
+                "pointer-events-auto w-[68rem] scale-75 divide-y divide-dashed divide-gray-200 overflow-hidden rounded-lg bg-white shadow-xl transition-opacity duration-300",
+                hasBeenHovered ? "opacity-30 hover:opacity-100" : "opacity-100",
+              )}
+              onMouseEnter={() => setHasBeenHovered(true)}
+            >
               <div className="px-4 py-5">
                 <Header onExit={() => setFocusedAddressData(null)} />
               </div>

src/components/Graph/AnalysisWindow/Content/Content.tsx

@@ -1,7 +1,7 @@
 import { FC, useState, useContext, useEffect } from "react";
 import { Transition } from "@headlessui/react";
-
 import { BLOCKCHAIN_TABS, Tab } from "./Tab";
+import "./Scrollbar.css";
 
 import Navbar from "./Navbar";
 import LoadingPulseMock from "./PulseMock";
@@ -78,7 +78,10 @@ const Content: FC = () => {
           />
         </div>
       </div>
-      <div className="w-full pl-3">
+      <div
+        id="content-components"
+        className="content-component h-[29rem] w-full overflow-scroll overflow-x-hidden pl-3"
+      >
         <AllContentComponents tabs={tabs} selectedTab={selectedTab} />
       </div>
     </div>

src/components/Graph/AnalysisWindow/Content/Scrollbar.css

@@ -0,0 +1,20 @@
+/* Style for the scrollbar track */
+.content-component::-webkit-scrollbar-track {
+  background-color: #f3f4f6; /* Light grey track */
+}
+
+/* Style for the scrollbar thumb */
+.content-component::-webkit-scrollbar-thumb {
+  background-color: #94a3b8; /* Darker grey thumb */
+  border-radius: 10px; /* Rounded corners for the thumb */
+}
+
+/* Style for when the scrollbar thumb is hovered */
+.content-component::-webkit-scrollbar-thumb:hover {
+  background-color: #64748b; /* Even darker color on hover */
+}
+
+/* Set the width of the scrollbar */
+.content-component::-webkit-scrollbar {
+  width: 8px; /* Adjust the width as needed */
+}