fix(hoverCard): fix: update hover card to show background only at bottom

stakwork · Dec 16, 2024 · 7685c66 · 7685c66
1 parent 9c64b0c
commit 7685c66
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 3 deletions.
diff --git a/src/components/Universe/CursorTooltip/HoverCard/index.tsx b/src/components/Universe/CursorTooltip/HoverCard/index.tsx
@@ -32,7 +32,6 @@ export const HoverCard = ({ node }: Props) => {
 const TooltipContainer = styled(Flex)`
   width: 390px;
   min-height: 100px;
-  background: ${colors.HOVER_CARD_BG};
   border-radius: 8px;
   padding: 15px;
   padding-bottom: 3px !important;

diff --git a/src/components/Universe/CursorTooltip/index.tsx b/src/components/Universe/CursorTooltip/index.tsx
@@ -54,7 +54,7 @@ export const CursorTooltip = () => {
 const TooltipContainer = styled(Flex)`
   position: fixed;
   background: ${colors.BG1};
-  color: white;
+  border-bottom: 5px solid ${colors.HOVER_CARD_BG};
   padding: 5px;
   border-radius: 3px;
   pointer-events: none; /* Tooltip won't block mouse events */

diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx
@@ -111,7 +111,7 @@ export const colors = {
   DIVIDER_4: 'rgba(46, 55, 67, 1)',
   INPUT_BG: 'rgba(255, 255, 255, 0.05)',
   INPUT_PLACEHOLDER: 'rgba(255, 255, 255, 0.5)',
-  HOVER_CARD_BG: 'rgba(41, 44, 54, 1)',
+  HOVER_CARD_BG: 'rgba(29,31,38,255)',
 } as const
 
 export type ColorName = keyof typeof colors