From b4c7731df51af8b36f1c9c109bfe92060669bb5a Mon Sep 17 00:00:00 2001
From: yaacov <kobi.zamir@gmail.com>
Date: Thu, 20 Jun 2024 11:15:50 +0300
Subject: [PATCH] Use patternfly icons and time components

Signed-off-by: yaacov <kobi.zamir@gmail.com>
---
 .../src/__mocks__/console_components.tsx      | 15 +----
 .../ConsoleTimestamp.style.css                |  4 ++
 .../ConsoleTimestamp/ConsoleTimestamp.tsx     | 55 +++++++++++++++++++
 .../src/components/ConsoleTimestamp/index.ts  |  3 +
 .../src/components/cells/StatusCell.tsx       |  4 +-
 .../src/components/cells/utils.tsx            | 18 +++---
 .../src/components/index.ts                   |  1 +
 .../src/components/status/StatusIcon.tsx      | 20 +++----
 .../ConditionsSection/ConditionsSection.tsx   |  4 +-
 .../components/CreatedAtDetailsItem.tsx       |  5 +-
 .../views/list/components/StatusCell.tsx      |  9 +--
 .../overview/components/OperatorStatus.tsx    | 16 +++---
 .../views/overview/components/PodsTable.tsx   |  5 +-
 .../tabs/Details/cards/OperatorCard.tsx       |  5 +-
 .../ConditionsSection/ConditionsSection.tsx   |  4 +-
 .../components/CreatedAtDetailsItem.tsx       |  5 +-
 .../components/MigrationsTable.tsx            |  7 ++-
 .../components/RootDiskDetailsItem.tsx        |  2 +-
 .../Migration/MigrationVirtualMachinesRow.tsx | 10 ++--
 .../MigrationVirtualMachinesRowExtended.tsx   |  7 ++-
 .../components/ConditionsCellRenderer.tsx     |  4 +-
 .../modals/PipelineTasksModal.tsx             |  4 +-
 .../src/modules/Plans/views/list/PlanRow.tsx  |  4 +-
 .../views/list/components/PlanStatusIcon.tsx  | 28 +++++-----
 .../ConditionsSection/ConditionsSection.tsx   |  4 +-
 .../components/CreatedAtDetailsItem.tsx       |  5 +-
 .../components/VDDKDetailsItem.tsx            |  4 +-
 .../Hosts/components/NetworkCellRenderer.tsx  | 16 +++---
 .../utils/helpers/getCategoryTitle.tsx        | 14 ++---
 .../views/list/components/StatusCell.tsx      | 11 ++--
 .../ConditionsSection/ConditionsSection.tsx   |  4 +-
 .../components/CreatedAtDetailsItem.tsx       |  5 +-
 .../views/list/components/StatusCell.tsx      |  9 +--
 33 files changed, 176 insertions(+), 135 deletions(-)
 create mode 100644 packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.style.css
 create mode 100644 packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.tsx
 create mode 100644 packages/forklift-console-plugin/src/components/ConsoleTimestamp/index.ts

diff --git a/packages/forklift-console-plugin/src/__mocks__/console_components.tsx b/packages/forklift-console-plugin/src/__mocks__/console_components.tsx
index d3d4275c2..d3884b964 100644
--- a/packages/forklift-console-plugin/src/__mocks__/console_components.tsx
+++ b/packages/forklift-console-plugin/src/__mocks__/console_components.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ResourceLinkProps, TimestampProps } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLinkProps } from '@openshift-console/dynamic-plugin-sdk';
 
 export const ResourceLink = ({
   name,
@@ -12,18 +12,5 @@ export const ResourceLink = ({
   </div>
 );
 
-export const RedExclamationCircleIcon = () => (
-  <div data-test-element-name="RedExclamationCircleIcon" />
-);
-export const GreenCheckCircleIcon = () => <div data-test-element-name="GreenCheckCircleIcon" />;
-export const YellowExclamationTriangleIcon = () => (
-  <div data-test-element-name="YellowExclamationTriangleIcon" />
-);
-export const BlueInfoCircleIcon = () => <div data-test-element-name="BlueInfoCircleIcon" />;
-export const useModal = (props) => <div data-test-element-name="useModal" {...props} />;
 export const ActionService = () => <div data-test-element-name="ActionService" />;
 export const ActionServiceProvider = () => <div data-test-element-name="ActionServiceProvider" />;
-
-export const Timestamp = ({ timestamp }: TimestampProps) => (
-  <div data-test-element-name="Timestamp">{timestamp}</div>
-);
diff --git a/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.style.css b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.style.css
new file mode 100644
index 000000000..f9d603032
--- /dev/null
+++ b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.style.css
@@ -0,0 +1,4 @@
+.forklift-table__console-timestamp {
+  text-decoration-line: none !important;
+  color: var(--pf-v5-c-content--Color);
+}
diff --git a/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.tsx b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.tsx
new file mode 100644
index 000000000..a2496ad54
--- /dev/null
+++ b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+import { GlobeAmericasIcon } from '@patternfly/react-icons';
+
+/**
+ * Patternfly timestamp use:
+ *   gray color
+ *   dashed underline
+ * Console show timestamp using:
+ *   black color
+ *   no underline decoration
+ */
+import './ConsoleTimestamp.style.css';
+
+export type TimestampProps = {
+  timestamp: string | number | Date;
+  className?: string;
+};
+
+/**
+ * Patternfly timestamp use:
+ *   standard format
+ *   no icon
+ * Console show timestamp using:
+ *   glob icon
+ *   custom format
+ */
+export const ConsoleTimestamp = (props: TimestampProps) => {
+  // Check for null. If props.timestamp is null, it returns incorrect date and time of Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
+  if (!props.timestamp) {
+    return <div className="co-timestamp">-</div>;
+  }
+
+  const currentDate = new Date(props.timestamp);
+
+  return (
+    <div className={props.className}>
+      <GlobeAmericasIcon className="co-icon-and-text__icon" />
+      <Timestamp
+        className="forklift-table__console-timestamp"
+        date={currentDate}
+        customFormat={{
+          year: '2-digit',
+          month: 'short',
+          weekday: 'short',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+        }}
+        tooltip={{ variant: TimestampTooltipVariant.default }}
+      />
+    </div>
+  );
+};
diff --git a/packages/forklift-console-plugin/src/components/ConsoleTimestamp/index.ts b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/index.ts
new file mode 100644
index 000000000..93858d3e4
--- /dev/null
+++ b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/index.ts
@@ -0,0 +1,3 @@
+// @index(['./*', /style/g], f => `export * from '${f.path}';`)
+export * from './ConsoleTimestamp';
+// @endindex
diff --git a/packages/forklift-console-plugin/src/components/cells/StatusCell.tsx b/packages/forklift-console-plugin/src/components/cells/StatusCell.tsx
index d3cd4caa7..4d2b84ee6 100644
--- a/packages/forklift-console-plugin/src/components/cells/StatusCell.tsx
+++ b/packages/forklift-console-plugin/src/components/cells/StatusCell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { BlueInfoCircleIcon } from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Popover } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
 
 import { TextWithIcon } from './TextWithIcon';
 import { categoryIcons } from './utils';
@@ -22,7 +22,7 @@ export const StatusCell: React.FC<StatusCellProps> = ({ label, conditions, icon
       className="forklift-table__flex-cell-popover"
       key={type}
       label={message || type}
-      icon={categoryIcons[category]?.[status] || <BlueInfoCircleIcon />}
+      icon={categoryIcons[category]?.[status] || <InfoCircleIcon color="#2B9AF3" />}
     />
   ));
 
diff --git a/packages/forklift-console-plugin/src/components/cells/utils.tsx b/packages/forklift-console-plugin/src/components/cells/utils.tsx
index ee25aff24..e615b83b5 100644
--- a/packages/forklift-console-plugin/src/components/cells/utils.tsx
+++ b/packages/forklift-console-plugin/src/components/cells/utils.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 
 import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from '@patternfly/react-icons';
 
 export const categoryIcons = {
-  Critical: { True: <RedExclamationCircleIcon />, False: undefined },
-  Error: { True: <RedExclamationCircleIcon />, False: undefined },
-  Required: { True: <GreenCheckCircleIcon />, False: undefined },
-  Warn: { True: <YellowExclamationTriangleIcon />, False: undefined },
-  Advisory: { True: <GreenCheckCircleIcon />, False: undefined },
+  Critical: { True: <ExclamationCircleIcon color="#C9190B" />, False: undefined },
+  Error: { True: <ExclamationCircleIcon color="#C9190B" />, False: undefined },
+  Required: { True: <CheckCircleIcon color="#3E8635" />, False: undefined },
+  Warn: { True: <ExclamationTriangleIcon color="#F0AB00" />, False: undefined },
+  Advisory: { True: <CheckCircleIcon color="#3E8635" />, False: undefined },
 };
diff --git a/packages/forklift-console-plugin/src/components/index.ts b/packages/forklift-console-plugin/src/components/index.ts
index 2b701cbcf..e794bfd38 100644
--- a/packages/forklift-console-plugin/src/components/index.ts
+++ b/packages/forklift-console-plugin/src/components/index.ts
@@ -1,6 +1,7 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './actions';
 export * from './cells';
+export * from './ConsoleTimestamp';
 export * from './empty-states';
 export * from './FilterableSelect';
 export * from './headers';
diff --git a/packages/forklift-console-plugin/src/components/status/StatusIcon.tsx b/packages/forklift-console-plugin/src/components/status/StatusIcon.tsx
index ed1ccc7a7..bc16eb0c7 100644
--- a/packages/forklift-console-plugin/src/components/status/StatusIcon.tsx
+++ b/packages/forklift-console-plugin/src/components/status/StatusIcon.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {
-  BlueInfoCircleIcon,
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Spinner } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+} from '@patternfly/react-icons';
 import { BanIcon } from '@patternfly/react-icons/dist/esm/icons/ban-icon';
 import { ClipboardListIcon } from '@patternfly/react-icons/dist/esm/icons/clipboard-list-icon';
 import { HourglassHalfIcon } from '@patternfly/react-icons/dist/esm/icons/hourglass-half-icon';
@@ -54,7 +54,7 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
 
     case 'Warning':
     case 'RequiresApproval':
-      return <YellowExclamationTriangleIcon />;
+      return <ExclamationTriangleIcon color="#F0AB00" />;
 
     case 'ContainerCannotRun':
     case 'CrashLoopBackOff':
@@ -68,7 +68,7 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
     case 'Lost':
     case 'Rejected':
     case 'UpgradeFailed':
-      return <RedExclamationCircleIcon />;
+      return <ExclamationCircleIcon color="#C9190B" />;
 
     case 'Accepted':
     case 'Active':
@@ -85,10 +85,10 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
     case 'Preferred':
     case 'Connected':
     case 'Deployed':
-      return <GreenCheckCircleIcon />;
+      return <CheckCircleIcon color="#3E8635" />;
 
     case 'Info':
-      return <BlueInfoCircleIcon />;
+      return <InfoCircleIcon color="#2B9AF3" />;
 
     case 'Unknown':
       return <UnknownIcon />;
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx
index 9371b7ebb..f464b07a7 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { K8sResourceCondition } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
 /**
@@ -53,7 +53,7 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
             <Td>{condition.type}</Td>
             <Td>{getStatusLabel(condition.status)}</Td>
             <Td>
-              <Timestamp timestamp={condition.lastTransitionTime} />
+              <ConsoleTimestamp timestamp={condition.lastTransitionTime} />
             </Td>
             <Td>{condition.reason}</Td>
             <Td modifier="truncate">{condition?.message || '-'}</Td>
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
index c6cfacc0a..5135e4f5d 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
-
 import { NetworkDetailsItemProps } from './NetworkDetailsItemProps';
 
 export const CreatedAtDetailsItem: React.FC<NetworkDetailsItemProps> = ({
@@ -23,7 +22,7 @@ export const CreatedAtDetailsItem: React.FC<NetworkDetailsItemProps> = ({
   return (
     <DetailsItem
       title={t('Created at')}
-      content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
+      content={<ConsoleTimestamp timestamp={resource?.metadata?.creationTimestamp} />}
       moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
       helpContent={helpContent ?? defaultHelpContent}
       crumbs={['metadata', 'creationTimestamp']}
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/components/StatusCell.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/components/StatusCell.tsx
index 951faddd0..c80df8419 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/components/StatusCell.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/components/StatusCell.tsx
@@ -7,11 +7,8 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { getResourceFieldValue } from '@kubev2v/common';
 import { NetworkMapModelRef } from '@kubev2v/types';
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Popover, Spinner, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import { CellProps } from './CellProps';
 
@@ -78,9 +75,9 @@ export const ErrorStatusCell: React.FC<CellProps & { t: TFunction }> = ({ t, dat
 };
 
 const statusIcons = {
-  Ready: <GreenCheckCircleIcon />,
+  Ready: <CheckCircleIcon color="#3E8635" />,
   'Not Ready': <Spinner size="sm" />,
-  Critical: <RedExclamationCircleIcon />,
+  Critical: <ExclamationCircleIcon color="#C9190B" />,
 };
 
 const phaseLabels = {
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/OperatorStatus.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/OperatorStatus.tsx
index 667aab4bf..2af4e433a 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/OperatorStatus.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/OperatorStatus.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Flex, FlexItem } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from '@patternfly/react-icons';
 
 interface OperatorStatusProps {
   status: string;
 }
 
 export const statusIcons = {
-  Failure: <RedExclamationCircleIcon />,
-  Successful: <GreenCheckCircleIcon />,
-  Running: <YellowExclamationTriangleIcon />,
+  Failure: <ExclamationCircleIcon color="#C9190B" />,
+  Successful: <CheckCircleIcon color="#3E8635" />,
+  Running: <ExclamationTriangleIcon color="#F0AB00" />,
 };
 
 const statusLabels = {
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/PodsTable.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/PodsTable.tsx
index be1db25f5..fe47fb144 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/PodsTable.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/PodsTable.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import StatusIcon from 'src/components/status/StatusIcon';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { IoK8sApiCoreV1Pod } from '@kubev2v/types';
-import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem, Split, SplitItem } from '@patternfly/react-core';
 
 export const PodsTable: React.FC<PodsTableProps> = ({ pods, showOwner }) => {
@@ -53,7 +54,7 @@ export const PodsTable: React.FC<PodsTableProps> = ({ pods, showOwner }) => {
             )}
             <Td>{getStatusLabel(pod?.status?.phase)}</Td>
             <Td>
-              <Timestamp timestamp={pod?.metadata?.creationTimestamp} />
+              <ConsoleTimestamp timestamp={pod?.metadata?.creationTimestamp} />
             </Td>
           </Tr>
         ))}
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/OperatorCard.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/OperatorCard.tsx
index acd8eaea7..a6f48eb86 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/OperatorCard.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/OperatorCard.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { getOperatorPhase } from 'src/modules/Overview/utils/helpers/getOperatorPhase';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { V1beta1ForkliftController } from '@kubev2v/types';
-import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Card,
   CardBody,
@@ -57,7 +58,7 @@ export const OperatorCard: FC<OperatorCardProps> = ({ obj }) => {
 
           <DetailsItem
             title={t('Created at')}
-            content={<Timestamp timestamp={obj?.metadata?.creationTimestamp} />}
+            content={<ConsoleTimestamp timestamp={obj?.metadata?.creationTimestamp} />}
             helpContent={
               <Text>
                 {t(
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx
index 9371b7ebb..f464b07a7 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { K8sResourceCondition } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
 /**
@@ -53,7 +53,7 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
             <Td>{condition.type}</Td>
             <Td>{getStatusLabel(condition.status)}</Td>
             <Td>
-              <Timestamp timestamp={condition.lastTransitionTime} />
+              <ConsoleTimestamp timestamp={condition.lastTransitionTime} />
             </Td>
             <Td>{condition.reason}</Td>
             <Td modifier="truncate">{condition?.message || '-'}</Td>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
index 68f8f2c65..c4a30332a 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
-
 import { PlanDetailsItemProps } from './PlanDetailsItemProps';
 
 export const CreatedAtDetailsItem: React.FC<PlanDetailsItemProps> = ({
@@ -23,7 +22,7 @@ export const CreatedAtDetailsItem: React.FC<PlanDetailsItemProps> = ({
   return (
     <DetailsItem
       title={t('Created at')}
-      content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
+      content={<ConsoleTimestamp timestamp={resource?.metadata?.creationTimestamp} />}
       moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
       helpContent={helpContent ?? defaultHelpContent}
       crumbs={['metadata', 'creationTimestamp']}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx
index 3353fd092..5aaf6c860 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import {
   getMigrationVmsCounts,
   getPhaseLabel,
@@ -13,7 +14,7 @@ import {
   PlanModelGroupVersionKind,
   V1beta1Migration,
 } from '@kubev2v/types';
-import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import {
   HelperText,
   HelperTextItem,
@@ -73,10 +74,10 @@ export const MigrationsTable: React.FC<MigrationTableProps> = ({ migrations, sho
               <VMsLabel migration={migration} />
             </Td>
             <Td>
-              <Timestamp timestamp={migration?.status?.started} />
+              <ConsoleTimestamp timestamp={migration?.status?.started} />
             </Td>
             <Td>
-              <Timestamp timestamp={migration?.status?.completed} />
+              <ConsoleTimestamp timestamp={migration?.status?.completed} />
             </Td>
           </Tr>
         ))}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/components/RootDiskDetailsItem.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/components/RootDiskDetailsItem.tsx
index 66ad170f0..08ff9ea3e 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/components/RootDiskDetailsItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/components/RootDiskDetailsItem.tsx
@@ -70,7 +70,7 @@ const getDiskLabel = (diskKey: string) => {
     >
       <Label isCompact color={'orange'}>
         <span className="forklift-page-plan-settings-icon">
-          <ExclamationTriangleIcon color="orange" />
+          <ExclamationTriangleIcon color="#F0AB00" />
         </span>
         {diskLabel}
       </Label>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRow.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRow.tsx
index c6ab062df..ac8e0d5b8 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRow.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRow.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 
 import { getResourceFieldValue, ResourceField, RowProps } from '@kubev2v/common';
 import { Td } from '@kubev2v/common';
 import { V1beta1PlanStatusMigrationVmsPipeline } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { FlexItem, Popover, ProgressStep, ProgressStepper } from '@patternfly/react-core';
 import { ResourcesAlmostFullIcon, ResourcesFullIcon } from '@patternfly/react-icons';
 import { Table, Tr } from '@patternfly/react-table';
@@ -40,11 +40,11 @@ const cellRenderers: Record<string, React.FC<PlanVMsCellProps>> = {
   name: NameCellRenderer,
   migrationStarted: (props: PlanVMsCellProps) => {
     const value = getResourceFieldValue(props.data, props.fieldId, props.fields);
-    return <Timestamp timestamp={value} />;
+    return <ConsoleTimestamp timestamp={value} />;
   },
   migrationCompleted: (props: PlanVMsCellProps) => {
     const value = getResourceFieldValue(props.data, props.fieldId, props.fields);
-    return <Timestamp timestamp={value} />;
+    return <ConsoleTimestamp timestamp={value} />;
   },
   transfer: (props: PlanVMsCellProps) => {
     const diskTransfer = props.data.statusVM?.pipeline.find((p) =>
@@ -105,14 +105,14 @@ const cellRenderers: Record<string, React.FC<PlanVMsCellProps>> = {
             <Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
               <Td>Started:</Td>
               <Td>
-                <Timestamp timestamp={lastRunningItem?.started} />
+                <ConsoleTimestamp timestamp={lastRunningItem?.started} />
               </Td>
             </Tr>
             <Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
               <Td>Completed:</Td>
               <Td>
                 {lastRunningItem?.completed ? (
-                  <Timestamp timestamp={lastRunningItem?.completed} />
+                  <ConsoleTimestamp timestamp={lastRunningItem?.completed} />
                 ) : (
                   '-'
                 )}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRowExtended.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRowExtended.tsx
index 9a2d3a4c0..ecdfaff15 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRowExtended.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRowExtended.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import SectionHeading from 'src/components/headers/SectionHeading';
 import { useModal } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { RowProps, TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { IoK8sApiBatchV1Job, V1beta1PlanStatusMigrationVmsPipeline } from '@kubev2v/types';
-import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
 import {
   Button,
@@ -190,7 +191,7 @@ export const MigrationVirtualMachinesRowExtended: React.FC<RowProps<VMData>> = (
                   <Td>{condition.type}</Td>
                   <Td>{getStatusLabel(condition.status)}</Td>
                   <Td>
-                    <Timestamp timestamp={condition.lastTransitionTime} />
+                    <ConsoleTimestamp timestamp={condition.lastTransitionTime} />
                   </Td>
                   <Td>{condition.reason}</Td>
                   <Td modifier="truncate">{condition?.message || '-'}</Td>
@@ -252,7 +253,7 @@ export const MigrationVirtualMachinesRowExtended: React.FC<RowProps<VMData>> = (
                 )}
               </Td>
               <Td>
-                <Timestamp timestamp={p?.started} />
+                <ConsoleTimestamp timestamp={p?.started} />
               </Td>
               <Td>{p?.error?.reasons}</Td>
             </Tr>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/ConditionsCellRenderer.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/ConditionsCellRenderer.tsx
index 316d2338e..ed55c164d 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/ConditionsCellRenderer.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/ConditionsCellRenderer.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { TableCell } from 'src/modules/Providers/utils';
 
-import { YellowExclamationTriangleIcon } from '@openshift-console/dynamic-plugin-sdk';
 import { Label, Level, LevelItem } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 
 import { PlanVMsCellProps } from './PlanVMsCellProps';
 
@@ -16,7 +16,7 @@ export const ConditionsCellRenderer: React.FC<PlanVMsCellProps> = ({ data }) =>
     <TableCell>
       <Level hasGutter>
         <LevelItem>
-          <Label isCompact color="orange" icon={<YellowExclamationTriangleIcon />}>
+          <Label isCompact color="orange" icon={<ExclamationTriangleIcon color="#F0AB00" />}>
             {condition.category}
           </Label>
         </LevelItem>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/PipelineTasksModal.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/PipelineTasksModal.tsx
index 6d321bc4f..70707886a 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/PipelineTasksModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/PipelineTasksModal.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useModal } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { V1beta1PlanStatusMigrationVmsPipeline } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { Modal, ModalVariant } from '@patternfly/react-core';
 
 export interface PipelineTasksModalProps {
@@ -41,7 +41,7 @@ export const PipelineTasksModal: React.FC<PipelineTasksModalProps> = ({ name, ta
               <Td>{t?.phase}</Td>
               <Td>{getTaskProgress(t)}</Td>
               <Td>
-                <Timestamp timestamp={t?.started} />
+                <ConsoleTimestamp timestamp={t?.started} />
               </Td>
               <Td>{t?.error?.reasons}</Td>
             </Tr>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/PlanRow.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/PlanRow.tsx
index ab9bfa23f..6a7fc4b6f 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/list/PlanRow.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/list/PlanRow.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components';
 import { TableCell } from 'src/modules/Providers/utils';
 
 import { getResourceFieldValue, ResourceField, RowProps } from '@kubev2v/common';
 import { Td, Tr } from '@kubev2v/common';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 
 import { PlanData } from '../../utils';
 
@@ -43,7 +43,7 @@ const cellRenderers: Record<string, React.FC<CellProps>> = {
   ['namespace']: NamespaceCell,
   ['migration-started']: (props: CellProps) => {
     const value = getResourceFieldValue(props.data, props.fieldId, props.fields);
-    return <Timestamp timestamp={value} />;
+    return <ConsoleTimestamp timestamp={value} />;
   },
   ['destination']: ProviderLinkCell,
   ['source']: ProviderLinkCell,
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusIcon.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusIcon.tsx
index 5c7f21c6b..de1dde8d8 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusIcon.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusIcon.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
 import { PlanPhase } from 'src/modules/Plans/utils';
 
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Spinner } from '@patternfly/react-core';
-import ArchiveIcon from '@patternfly/react-icons/dist/esm/icons/archive-icon';
-import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
+import {
+  ArchiveIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  SyncAltIcon,
+} from '@patternfly/react-icons';
 
 export const PlanStatusIcon: React.FC<{ phase: PlanPhase }> = ({ phase }) =>
-  statusIcons[phase] || <YellowExclamationTriangleIcon />;
+  statusIcons[phase] || <ExclamationTriangleIcon color="#F0AB00" />;
 
 const statusIcons = {
-  Ready: <GreenCheckCircleIcon />,
+  Ready: <CheckCircleIcon color="#3E8635" />,
   NotReady: <Spinner size="sm" />,
   Running: <SyncAltIcon />,
-  Succeeded: <GreenCheckCircleIcon />,
-  Canceled: <YellowExclamationTriangleIcon />,
-  Failed: <RedExclamationCircleIcon />,
-  vmError: <RedExclamationCircleIcon />,
+  Succeeded: <CheckCircleIcon color="#3E8635" />,
+  Canceled: <ExclamationTriangleIcon color="#F0AB00" />,
+  Failed: <ExclamationCircleIcon color="#C9190B" />,
+  vmError: <ExclamationCircleIcon color="#C9190B" />,
   Archived: <ArchiveIcon />,
   Archiving: <Spinner size="sm" />,
-  Error: <RedExclamationCircleIcon />,
+  Error: <ExclamationCircleIcon color="#C9190B" />,
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/ConditionsSection/ConditionsSection.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/ConditionsSection/ConditionsSection.tsx
index f02aed9ab..a8bf05cec 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/ConditionsSection/ConditionsSection.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/ConditionsSection/ConditionsSection.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { K8sResourceCondition } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
 /**
@@ -54,7 +54,7 @@ export const ConditionsSection: React.FC<ConditionsProps> = ({ conditions }) =>
               <Td>{condition.type}</Td>
               <Td>{getStatusLabel(condition.status)}</Td>
               <Td>
-                <Timestamp timestamp={condition.lastTransitionTime} />
+                <ConsoleTimestamp timestamp={condition.lastTransitionTime} />
               </Td>
               <Td>{condition.reason}</Td>
               <Td modifier="truncate">{condition?.message || '-'}</Td>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
index 0a1c342dd..7823905f2 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
-
 import { DetailsItem } from '../../../../../utils';
 
 import { ProviderDetailsItemProps } from './ProviderDetailsItem';
@@ -24,7 +23,7 @@ export const CreatedAtDetailsItem: React.FC<ProviderDetailsItemProps> = ({
   return (
     <DetailsItem
       title={t('Created at')}
-      content={<Timestamp timestamp={provider?.metadata?.creationTimestamp} />}
+      content={<ConsoleTimestamp timestamp={provider?.metadata?.creationTimestamp} />}
       moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
       helpContent={helpContent ?? defaultHelpContent}
       crumbs={['Provider', 'metadata', 'creationTimestamp']}
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/VDDKDetailsItem.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/VDDKDetailsItem.tsx
index 1ffa7c69d..d75895361 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/VDDKDetailsItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/VDDKDetailsItem.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { EditProviderVDDKImage, useModal } from 'src/modules/Providers/modals';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import { YellowExclamationTriangleIcon } from '@openshift-console/dynamic-plugin-sdk';
 import { Label } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 
 import { DetailsItem } from '../../../../../utils';
 
@@ -38,7 +38,7 @@ export const VDDKDetailsItem: React.FC<ProviderDetailsItemProps> = ({
       content={
         provider?.spec?.settings?.['vddkInitImage'] || (
           <Label isCompact color={'orange'}>
-            <YellowExclamationTriangleIcon />
+            <ExclamationTriangleIcon color="#F0AB00" />
             <span className="forklift-section-provider-empty-vddk-label-text">{t('Empty')}</span>
           </Label>
         )
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/NetworkCellRenderer.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/NetworkCellRenderer.tsx
index 897f39a47..332dc561a 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/NetworkCellRenderer.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/NetworkCellRenderer.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { TableCell } from 'src/modules/Providers/utils';
 
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Popover } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from '@patternfly/react-icons';
 
 import { calculateCidrNotation } from '../utils';
 import { determineHostStatus } from '../utils/helpers/determineHostStatus';
@@ -14,9 +14,9 @@ import { determineHostStatus } from '../utils/helpers/determineHostStatus';
 import { HostCellProps } from './HostCellProps';
 
 const statusIcons = {
-  error: <RedExclamationCircleIcon />,
-  ready: <GreenCheckCircleIcon />,
-  running: <YellowExclamationTriangleIcon />,
+  error: <ExclamationCircleIcon color="#C9190B" />,
+  ready: <CheckCircleIcon color="#3E8635" />,
+  running: <ExclamationTriangleIcon color="#F0AB00" />,
 };
 
 // Define cell renderer for 'network'
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getCategoryTitle.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getCategoryTitle.tsx
index 7782648c3..2062ddadd 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getCategoryTitle.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getCategoryTitle.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { TFunction } from 'react-i18next';
 
 import {
-  BlueInfoCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+} from '@patternfly/react-icons';
 
 /**
  * Retrieves the title for a given concern category.
@@ -32,9 +32,9 @@ export const getCategoryTitle = (category: string, t: TFunction): string => {
  */
 export const getCategoryIcon = (category: string) => {
   const icons = {
-    Critical: <RedExclamationCircleIcon />,
-    Information: <BlueInfoCircleIcon />,
-    Warning: <YellowExclamationTriangleIcon />,
+    Critical: <ExclamationCircleIcon color="#C9190B" />,
+    Information: <InfoCircleIcon color="#2B9AF3" />,
+    Warning: <ExclamationTriangleIcon color="#F0AB00" />,
   };
 
   return icons[category] || <></>;
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/list/components/StatusCell.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/list/components/StatusCell.tsx
index 2bed6f483..d7c5ed06b 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/list/components/StatusCell.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/list/components/StatusCell.tsx
@@ -7,11 +7,8 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { getResourceFieldValue } from '@kubev2v/common';
 import { ProviderModelRef } from '@kubev2v/types';
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Popover, Spinner, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import { CellProps } from './CellProps';
 
@@ -92,9 +89,9 @@ export const ErrorStatusCell: React.FC<CellProps & { t: TFunction }> = ({ t, dat
 };
 
 const statusIcons = {
-  ValidationFailed: <RedExclamationCircleIcon />,
-  ConnectionFailed: <RedExclamationCircleIcon />,
-  Ready: <GreenCheckCircleIcon />,
+  ValidationFailed: <ExclamationCircleIcon color="#C9190B" />,
+  ConnectionFailed: <ExclamationCircleIcon color="#C9190B" />,
+  Ready: <CheckCircleIcon color="#3E8635" />,
   Staging: <Spinner size="sm" />,
 };
 
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ConditionsSection/ConditionsSection.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ConditionsSection/ConditionsSection.tsx
index 9371b7ebb..f464b07a7 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ConditionsSection/ConditionsSection.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ConditionsSection/ConditionsSection.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { K8sResourceCondition } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
 /**
@@ -53,7 +53,7 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
             <Td>{condition.type}</Td>
             <Td>{getStatusLabel(condition.status)}</Td>
             <Td>
-              <Timestamp timestamp={condition.lastTransitionTime} />
+              <ConsoleTimestamp timestamp={condition.lastTransitionTime} />
             </Td>
             <Td>{condition.reason}</Td>
             <Td modifier="truncate">{condition?.message || '-'}</Td>
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
index 3f2520e15..eacfbd36b 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
-
 import { StorageDetailsItemProps } from './StorageDetailsItemProps';
 
 export const CreatedAtDetailsItem: React.FC<StorageDetailsItemProps> = ({
@@ -23,7 +22,7 @@ export const CreatedAtDetailsItem: React.FC<StorageDetailsItemProps> = ({
   return (
     <DetailsItem
       title={t('Created at')}
-      content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
+      content={<ConsoleTimestamp timestamp={resource?.metadata?.creationTimestamp} />}
       moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
       helpContent={helpContent ?? defaultHelpContent}
       crumbs={['metadata', 'creationTimestamp']}
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/list/components/StatusCell.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/list/components/StatusCell.tsx
index 69099c248..1c1e72a4a 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/views/list/components/StatusCell.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/views/list/components/StatusCell.tsx
@@ -7,11 +7,8 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { getResourceFieldValue } from '@kubev2v/common';
 import { StorageMapModelRef } from '@kubev2v/types';
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Popover, Spinner, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import { CellProps } from './CellProps';
 
@@ -78,9 +75,9 @@ export const ErrorStatusCell: React.FC<CellProps & { t: TFunction }> = ({ t, dat
 };
 
 const statusIcons = {
-  Ready: <GreenCheckCircleIcon />,
+  Ready: <CheckCircleIcon color="#3E8635" />,
   'Not Ready': <Spinner size="sm" />,
-  Critical: <RedExclamationCircleIcon />,
+  Critical: <ExclamationCircleIcon color="#C9190B" />,
 };
 
 const phaseLabels = {