finished styling tool tip display

Author: garrettlchow

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -118,10 +118,8 @@ export default function ComponentMap({
     minWidth: 60,
     maxWidth: 300,
     backgroundColor: 'rgb(15,15,15)',
-    color: 'white',
     fontSize: '16px',
     lineHeight: '18px',
-    fontFamily: 'Roboto',
     zIndex: 100,
     pointerEvents: 'all !important',
   };
@@ -160,6 +158,7 @@ export default function ComponentMap({
     }
   };
 
+  // check if any data should be displayed in tool tip display
   const hasDisplayableData = (nodeData) => {
     // Check if the node has props
     const hasProps =

src/app/styles/layout/_stateContainer.scss

@@ -102,28 +102,30 @@
 .tooltip-header {
   padding: 12px;
   background-color: #1f2937;
-  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .tooltip-title {
   margin: 0;
   font-size: 16px;
   font-weight: 500;
-  color: #f9fafb;
+  color: #f3f4f6;
 }
 
 .tooltip-container {
   width: 300px;
   background-color: #111827;
   border-radius: 8px;
   font-family: 'Outfit', sans-serif;
-  color: #f9fafb;
   overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .tooltip-section {
   padding: 12px;
   border-bottom: 1px solid rgba(107, 114, 128, 0.2);
+  transition: background-color 150ms ease;
 }
 
 .tooltip-section:last-child {
@@ -179,3 +181,19 @@
   margin: 0 !important;
   padding-left: 16px !important;
 }
+
+/* Animation for Tooltip Appearance */
+@keyframes tooltipFade {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tooltip-container {
+  animation: tooltipFade 150ms ease-out;
+}