chore(topology): fix broken element colors

cryostatio · Jul 25, 2024 · dce54eb · dce54eb
1 parent bb154cd
commit dce54eb
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/app/Topology/GraphView/CustomGroup.tsx b/src/app/Topology/GraphView/CustomGroup.tsx
@@ -36,7 +36,7 @@ export const renderGroupIcon = (width: number, height: number): React.ReactNode
 
   return (
     <>
-      <circle cx={cx} cy={cy} r={contentSize / 2} fill="var(--pf-global--palette--white)" />
+      <circle cx={cx} cy={cy} r={contentSize / 2} fill="var(--pf-v5-global--palette--white)" />
       <image
         x={cx - mainContentSize / 2}
         y={cy - mainContentSize / 2}

diff --git a/src/app/Topology/GraphView/CustomNode.tsx b/src/app/Topology/GraphView/CustomNode.tsx
@@ -55,7 +55,7 @@ export const renderNodeIcon = (graphic: string, _data: TargetNode, element: Node
 
   return (
     <>
-      <circle cx={cx} cy={cy} r={contentSize / 2} fill="var(--pf-global--palette--white)" />
+      <circle cx={cx} cy={cy} r={contentSize / 2} fill="var(--pf-v5-global--palette--white)" />
       {useAlt ? (
         <g transform={`translate(${trueCx}, ${trueCy})`}>
           <ContainerNodeIcon width={mainContentSize} height={mainContentSize} />
@@ -127,7 +127,7 @@ const CustomNode: React.FC<CustomNodeProps> = ({
           scaleNode={(hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high}
           badge={showBadge ? nodeTypeToAbbr(data.nodeType) : undefined}
           badgeColor={NODE_BADGE_COLOR}
-          badgeClassName={'topology__node-badge'}
+          badgeClassName={css('topology__node-badge')}
           nodeStatus={showStatus ? nodeStatus : undefined}
           showStatusBackground={!hover && detailsLevel === ScaleDetailsLevel.low}
           truncateLength={RESOURCE_NAME_TRUNCATE_LENGTH}

diff --git a/src/app/Topology/GraphView/const.ts b/src/app/Topology/GraphView/const.ts
@@ -30,7 +30,7 @@ export const DEFAULT_GROUP_PADDINGS = [
 
 export const RESOURCE_NAME_TRUNCATE_LENGTH = 20;
 
-export const NODE_BADGE_COLOR = 'var(--pf-global--palette--blue-500)';
+export const NODE_BADGE_COLOR = 'var(--pf-v5-global--palette--blue-500)';
 
 export const NODE_ICON_PADDING = 5;
 

diff --git a/src/app/Topology/styles/base.css b/src/app/Topology/styles/base.css
@@ -224,7 +224,7 @@ Below CSS rules only apply to Topology components
 }
 
 .topology__node-badge text {
-  fill: var(--pf-global--palette--white);
+  fill: var(--pf-v5-global--palette--white);
   font-weight: 700;
 }