[results] use styles from the theme for the ToolsExperienceTransition…

…sChart nodes labels
Devographics · Feb 8, 2022 · 08bd295 · 08bd295
1 parent 54d7e19
commit 08bd295
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/...ore/blocks/tools/ToolsExperienceTransitionsBlock/ToolsExperienceTransitionsChart/Node.tsx b/...ore/blocks/tools/ToolsExperienceTransitionsBlock/ToolsExperienceTransitionsChart/Node.tsx
@@ -1,13 +1,13 @@
 import React, { memo, useCallback, useState } from 'react'
 import { ToolExperienceId } from 'core/bucket_keys'
 import { SankeyNodeDatum } from '../types'
+import { staticProps } from './config'
+import styled from 'styled-components'
 
 const style = {
     cursor: 'pointer'
 }
 
-const minHeight = 24
-
 const NonMemoizedNode = ({
     node,
     isCurrent,
@@ -50,23 +50,25 @@ const NonMemoizedNode = ({
                 onMouseLeave={handleLeave}
                 onClick={handleClick}
             />
-            {node.height >= minHeight && (
+            {node.height >= staticProps.nodeLabelMinHeight && (
                 <g transform={`translate(${centerX},${centerY}) rotate(-90)`}>
-                    <text
+                    <NodeLabel
                         textAnchor="middle"
                         dominantBaseline="central"
-                        style={{
-                            fontSize: 10,
-                            fontWeight: 600,
-                            pointerEvents: 'none',
-                        }}
                     >
                         {node.value}
-                    </text>
+                    </NodeLabel>
                 </g>
             )}
         </>
     )
 }
 
+const NodeLabel = styled.text`
+    fill: ${({ theme }) => theme.colors.textInverted};
+    font-size: 10px;
+    pointer-events: none;
+    font-weight: ${({ theme }) => theme.typography.weight.bold};
+`
+
 export const Node = memo(NonMemoizedNode)
diff --git a/...re/blocks/tools/ToolsExperienceTransitionsBlock/ToolsExperienceTransitionsChart/config.ts b/...re/blocks/tools/ToolsExperienceTransitionsBlock/ToolsExperienceTransitionsChart/config.ts
@@ -8,4 +8,5 @@ export const staticProps = {
         bottom: 10,
         left: 10,
     },
+    nodeLabelMinHeight: 24,
 }