From 1cb616cff99f9ef527ba9f8fd2d5a48e7df5809b Mon Sep 17 00:00:00 2001 From: John Joyce Date: Wed, 23 Apr 2025 11:55:20 -0700 Subject: [PATCH] refactor(ui): Use phosphor icons for asset health (#13293) Co-authored-by: John Joyce --- .../theme/foundations/colors.ts | 2 +- .../components/styled/DeprecationPill.tsx | 7 +++--- .../components/styled/DeprecationIcon.tsx | 2 +- .../src/app/previewV2/HealthIcon.tsx | 22 ++++++++++--------- .../src/app/shared/health/healthUtils.tsx | 3 ++- 5 files changed, 20 insertions(+), 16 deletions(-) diff --git a/datahub-web-react/src/alchemy-components/theme/foundations/colors.ts b/datahub-web-react/src/alchemy-components/theme/foundations/colors.ts index e58fd7a9c2..de447a023b 100644 --- a/datahub-web-react/src/alchemy-components/theme/foundations/colors.ts +++ b/datahub-web-react/src/alchemy-components/theme/foundations/colors.ts @@ -66,7 +66,7 @@ const colors = { 200: '#F2C1C1', 300: '#ECA5A5', 400: '#E99393', - 500: '#E37878', // primary value + 500: '#CD0D24', // primary value 600: '#CF6D6D', 700: '#A15555', 800: '#7D4242', diff --git a/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx b/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx index 39514991e9..334ed97b8c 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx @@ -1,6 +1,7 @@ import { blue } from '@ant-design/colors'; import { InfoCircleOutlined } from '@ant-design/icons'; -import { Divider, Modal, Popover, Tooltip, Typography, message } from 'antd'; +import { Popover, Tooltip, colors } from '@components'; +import { Divider, Modal, Typography, message } from 'antd'; import moment from 'moment'; import React, { useState } from 'react'; import styled from 'styled-components'; @@ -15,12 +16,12 @@ import { Deprecation } from '@types'; const DeprecatedContainer = styled.div` height: 18px; - border: 1px solid #cd0d24; + border: 1px solid ${colors.red[500]}; border-radius: 15px; display: flex; justify-content: center; align-items: center; - color: #cd0d24; + color: ${colors.red[500]}; padding-top: 8px; padding-bottom: 8px; padding-right: 4px; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx index 920b356191..d810fce0c3 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx @@ -23,7 +23,7 @@ const DeprecatedContainer = styled.div` justify-content: center; gap: 4px; align-items: center; - color: ${REDESIGN_COLORS.DEPRECATION_RED}; + color: ${colors.red[500]}; `; const DeprecatedTitle = styled(Typography.Text)` diff --git a/datahub-web-react/src/app/previewV2/HealthIcon.tsx b/datahub-web-react/src/app/previewV2/HealthIcon.tsx index 507715346e..855a118a41 100644 --- a/datahub-web-react/src/app/previewV2/HealthIcon.tsx +++ b/datahub-web-react/src/app/previewV2/HealthIcon.tsx @@ -1,24 +1,26 @@ -import { CheckCircleOutlined } from '@ant-design/icons'; -import { Popover } from '@components'; +import { Popover, colors } from '@components'; +import { CheckCircle, WarningCircle } from 'phosphor-react'; import React from 'react'; import styled from 'styled-components'; import HealthPopover from '@app/previewV2/HealthPopover'; import { isHealthy, isUnhealthy } from '@app/shared/health/healthUtils'; -import { COLORS } from '@app/sharedV2/colors'; import { Health } from '@types'; -import AmbulanceIcon from '@images/ambulance-icon.svg?react'; - const IconContainer = styled.div` display: flex; align-items: center; - font-size: 112.5%; `; -const HealthyIcon = styled(CheckCircleOutlined)` - color: ${COLORS.green_6}; +const UnhealthyIcon = styled(WarningCircle)` + color: ${colors.red[500]}; + font-size: 20px; +`; + +const HealthyIcon = styled(CheckCircle)` + color: ${colors.green[500]}; + font-size: 20px; `; interface Props { @@ -31,9 +33,9 @@ interface Props { const HealthIcon = ({ urn, health, baseUrl, className }: Props) => { let icon: JSX.Element; if (isUnhealthy(health)) { - icon = ; + icon = ; } else if (isHealthy(health)) { - icon = ; + icon = ; } else { return null; } diff --git a/datahub-web-react/src/app/shared/health/healthUtils.tsx b/datahub-web-react/src/app/shared/health/healthUtils.tsx index 29be05455a..dbe79a049f 100644 --- a/datahub-web-react/src/app/shared/health/healthUtils.tsx +++ b/datahub-web-react/src/app/shared/health/healthUtils.tsx @@ -7,6 +7,7 @@ import { WarningFilled, WarningOutlined, } from '@ant-design/icons'; +import { colors } from '@components'; import React from 'react'; import styled from 'styled-components'; @@ -15,7 +16,7 @@ import { GenericEntityProperties } from '@src/app/entity/shared/types'; import { Health, HealthStatus, HealthStatusType } from '@types'; -const HEALTH_INDICATOR_COLOR = '#d48806'; +const HEALTH_INDICATOR_COLOR = colors.red[500]; const UnhealthyIconFilled = styled(ExclamationCircleTwoTone)<{ fontSize: number }>` && {