feat: Button behavior + removing dark orange color (#253)

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,22 @@ 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 = [
+    '#FFC933', // MANGO 4
+    '#FF8AF0', // PINK 4
+    '#FEADC8', // RASPBERRY 4
+    '#2CE0BF', // TEAL 4
+    '#FF8CB2', // RED 4
+    '#B894FF', // INDIGO 4
+    '#049F9A', // TEAL 6
+    '#FA4F96', // RASPBERRY 6
+    '#F31DED', // PINK 6
+    '#7858FF', // INDIGO 6
+    '#07838F', // TEAL 7
+    '#DF1278', // RASBERRY 7
+    '#510080', // PINK 10
+    '#5D36FF', // INDIGO 7
+  ];
 
   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,16 +10,19 @@ 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);
+  const timeAgo = transitionTime ? formatDateAsTimeAgo(transitionTime) : '-';
 
   const handleClose = () => {
     setPopoverIsOpen(false);
@@ -29,19 +32,31 @@ export const ResourceStatusCell = ({
   };
   return (
     <span>
-      <AnimatedHoverTextButton
-        ref={btnRef}
-        icon={
+      {hideOnHoverEffect ? (
+        <Button ref={btnRef} design="Transparent" title={timeAgo} aria-label={timeAgo} onClick={handleOpen}>
           <Icon
             design={isOk ? 'Positive' : 'Negative'}
             name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
             showTooltip={true}
-            accessibleName={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+            accessibleName={timeAgo}
           />
-        }
-        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={timeAgo}
+            />
+          }
+          text={isOk ? positiveText : negativeText}
+          onClick={handleOpen}
+        />
+      )}
+
       <ResponsivePopover
         opener={btnRef.current ?? undefined}
         open={popoverIsOpen}
@@ -64,7 +79,7 @@ export const ResourceStatusCell = ({
               color: isOk ? 'var(--sapPositiveTextColor)' : 'var(--sapNegativeTextColor)',
             }}
           >
-            {formatDateAsTimeAgo(transitionTime)}
+            {timeAgo}
           </Text>
         </FlexBox>
       </ResponsivePopover>