diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/DataObservabilityTab.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/DataObservabilityTab.tsx index f87053bb9f3..4839670bbdb 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/DataObservabilityTab.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/DataObservabilityTab.tsx @@ -77,6 +77,7 @@ const DataObservabilityTab = (props: TableProfilerProps) => { width: 'auto', display: 'inline-flex', '.MuiTab-root': { + color: theme.palette.grey['700'], transition: 'background-color 0.2s ease-in, color 0.2s ease-in', borderRadius: '6px', }, @@ -88,11 +89,15 @@ const DataObservabilityTab = (props: TableProfilerProps) => { backgroundColor: `${theme.palette.primary.main} !important`, color: `${theme.palette.primary.contrastText} !important`, }, + 'MuiTabs-root': { + minHeight: 'none', + }, '.MuiTabs-indicator': { display: 'none', }, '.MuiTabs-scroller': { - padding: '0 8px', + padding: '4px', + height: '100%', }, '.MuiTab-root:not(:first-of-type)': { marginLeft: '4px', diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/TabComponent.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/TabComponent.tsx deleted file mode 100644 index dd9b2796da8..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/TabComponent.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Tab from '@mui/material/Tab'; -import Tabs from '@mui/material/Tabs'; - -const TabComponent = ({ value, items, ...rest }) => { - return ( - - {items.map(({ label, key }) => ( - - ))} - - ); -}; - -export default TabComponent; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/data-observability-tab.less b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/data-observability-tab.less index 111f7a61185..57e29147e72 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/data-observability-tab.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/data-observability-tab.less @@ -10,6 +10,6 @@ background-color: @white; .data-observability-content-panel { - margin-top: @margin-mlg; + margin-top: 30px; } } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/NoProfilerBanner/no-profiler-banner.less b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/NoProfilerBanner/no-profiler-banner.less index 9dd427336d3..4f4bf2844ae 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/NoProfilerBanner/no-profiler-banner.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/NoProfilerBanner/no-profiler-banner.less @@ -1,19 +1,21 @@ +@import (reference) url('../../../../../styles/variables.less'); + .no-profiler-banner-container { display: flex; align-items: center; gap: 16px; border-radius: 10px; - background: #fafafc; + background: @grey-50; padding: 16px; .profiler-description { - color: #364254; + color: @grey-700; font-size: 12px; font-weight: 400; } .profiler-title { - color: #21263c; + color: @grey-900; font-size: 14px; font-weight: 600; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx index d3aace88143..9e2235dfcc2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx @@ -11,8 +11,8 @@ * limitations under the License. */ -import { Grid } from '@mui/material'; -import { Col, Row } from 'antd'; +import { Grid, Stack } from '@mui/material'; +import { Col } from 'antd'; import { AxiosError } from 'axios'; import { pick } from 'lodash'; import { DateRangeObject } from 'Models'; @@ -216,7 +216,7 @@ const TableProfilerChart = ({ } return ( - + {showHeader && ( <> {!isSummaryLoading && !isProfilingEnabled && ( @@ -277,7 +277,7 @@ const TableProfilerChart = ({ isLoading={isTableProfilerLoading || isSummaryLoading} /> - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx index 1b348ff6428..56c4590e8a5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx @@ -1,4 +1,4 @@ -import { Box, Card, Skeleton, Typography } from '@mui/material'; +import { Box, Card, Skeleton, Typography, useTheme } from '@mui/material'; import { ReactNode } from 'react'; import { ReactComponent as AddItemIcon } from '../../../assets/svg/add-item-icon.svg'; @@ -15,8 +15,10 @@ const SummaryCardV1 = ({ icon?: SvgComponent; extra?: ReactNode; }) => { + const theme = useTheme(); + if (isLoading) { - return ; + return ; } const Icon = icon ?? AddItemIcon; @@ -32,18 +34,27 @@ const SummaryCardV1 = ({ display: 'flex', alignItems: 'center', gap: 3, - p: '20px', + p: '16px 20px', width: '100%', }} variant="outlined"> - + {value} + sx={{ + fontSize: '14px', + fontWeight: 500, + color: theme.palette.grey[700], + }}> {title} @@ -55,12 +66,17 @@ const SummaryCardV1 = ({ mx: 2, px: 2, py: 1, - background: '#F8F9FC', + background: theme.palette.allShades.blueGray[50], borderRadius: '0 0 12px 12px', boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.10)', border: 'none', }}> - + {extra}