adjusting color and button behaviour

Author: Hubert-Szczepanski-SAP

src/components/Graphs/CustomNode.tsx

@@ -28,6 +28,7 @@ const CustomNode: React.FC<CustomNodeProps> = ({ label, type, status, transition
             positiveText={t('common.healthy')}
             negativeText={t('errors.notHealthy')}
             message={statusMessage}
+            hideOnHoverEffect={true}
           />
         </div>
         <div className={styles.nodeTextContainer}>

src/components/Graphs/graphUtils.ts

@@ -26,7 +26,7 @@ export const resolveProviderType = (configName: string, providerConfigsList: Pro
 };
 
 export const generateColorMap = (items: NodeData[], colorBy: string): Record<string, string> => {
-  const colors = ['#E09D00', '#E6600D', '#AB218E', '#678BC7', '#1A9898', '#759421', '#925ACE', '#647987'];
+  const colors = ['#E09D00', '#e269c9', '#AB218E', '#678BC7', '#1A9898', '#759421', '#925ACE', '#647987'];
 
   const keys = (() => {
     if (colorBy === 'source') return Array.from(new Set(items.map((i) => i.providerType).filter(Boolean)));

src/components/Shared/ResourceStatusCell.tsx

@@ -1,4 +1,4 @@
-import { ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
+import { Button, ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
 import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
 import { useRef, useState } from 'react';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
@@ -10,13 +10,15 @@ export interface ResourceStatusCellProps {
   message?: string;
   positiveText: string;
   negativeText: string;
+  hideOnHoverEffect?: boolean;
 }
 export const ResourceStatusCell = ({
   isOk,
   transitionTime,
   message,
   positiveText,
   negativeText,
+  hideOnHoverEffect
 }: ResourceStatusCellProps) => {
   const btnRef = useRef<ButtonDomRef>(null);
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
@@ -29,19 +31,37 @@ export const ResourceStatusCell = ({
   };
   return (
     <span>
-      <AnimatedHoverTextButton
-        ref={btnRef}
-        icon={
+      {hideOnHoverEffect ? (
+        <Button
+          ref={btnRef}
+          design="Transparent"
+          onClick={handleOpen}
+          title={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+          aria-label={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+        >
           <Icon
             design={isOk ? 'Positive' : 'Negative'}
             name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
             showTooltip={true}
             accessibleName={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
           />
-        }
-        text={isOk ? positiveText : negativeText}
-        onClick={handleOpen}
-      />
+        </Button>
+      ) : (
+        <AnimatedHoverTextButton
+          ref={btnRef}
+          icon={
+            <Icon
+              design={isOk ? 'Positive' : 'Negative'}
+              name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
+              showTooltip={true}
+              accessibleName={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+            />
+          }
+          text={isOk ? positiveText : negativeText}
+          onClick={handleOpen}
+        />
+      )}
+
       <ResponsivePopover
         opener={btnRef.current ?? undefined}
         open={popoverIsOpen}