From bc869577b1c6e4b20791990c5fbd88ccb5381e90 Mon Sep 17 00:00:00 2001
From: Pedro Ribeiro <47680931+tubarao312@users.noreply.github.com>
Date: Wed, 17 Jan 2024 11:57:40 +0000
Subject: [PATCH 1/2] Update Content.tsx

---
 src/components/Graph/AnalysisWindow/Content/Content.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Graph/AnalysisWindow/Content/Content.tsx b/src/components/Graph/AnalysisWindow/Content/Content.tsx
index 59894380..1e90eb78 100644
--- a/src/components/Graph/AnalysisWindow/Content/Content.tsx
+++ b/src/components/Graph/AnalysisWindow/Content/Content.tsx
@@ -78,7 +78,7 @@ const Content: FC = () => {
           />
         </div>
       </div>
-      <div className="w-full pl-3">
+      <div className="h-[29rem] w-full overflow-scroll overflow-x-hidden pl-3">
         <AllContentComponents tabs={tabs} selectedTab={selectedTab} />
       </div>
     </div>

From 98629943a29409a439bb64caa47c7c9c63dd317f Mon Sep 17 00:00:00 2001
From: Pedro Ribeiro <47680931+tubarao312@users.noreply.github.com>
Date: Wed, 17 Jan 2024 12:24:38 +0000
Subject: [PATCH 2/2] Add custom scrollbar

---
 .../Graph/AnalysisWindow/AnalysisWindow.tsx   | 20 +++++++++++++++----
 .../Graph/AnalysisWindow/Content/Content.tsx  |  7 +++++--
 .../AnalysisWindow/Content/Scrollbar.css      | 20 +++++++++++++++++++
 3 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Graph/AnalysisWindow/Content/Scrollbar.css

diff --git a/src/components/Graph/AnalysisWindow/AnalysisWindow.tsx b/src/components/Graph/AnalysisWindow/AnalysisWindow.tsx
index 498e3bf3..1715bee3 100644
--- a/src/components/Graph/AnalysisWindow/AnalysisWindow.tsx
+++ b/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>
diff --git a/src/components/Graph/AnalysisWindow/Content/Content.tsx b/src/components/Graph/AnalysisWindow/Content/Content.tsx
index 1e90eb78..0df5edc3 100644
--- a/src/components/Graph/AnalysisWindow/Content/Content.tsx
+++ b/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="h-[29rem] w-full overflow-scroll overflow-x-hidden 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>
diff --git a/src/components/Graph/AnalysisWindow/Content/Scrollbar.css b/src/components/Graph/AnalysisWindow/Content/Scrollbar.css
new file mode 100644
index 00000000..757452b2
--- /dev/null
+++ b/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 */
+}