feat(ui): Refactor DataObservabilityTab and SummaryCardV1 for improved styling and layout

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',

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataObservability/TabComponent.tsx

@@ -1,14 +0,0 @@
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-
-const TabComponent = ({ value, items, ...rest }) => {
-  return (
-    <Tabs value={value} variant="standard" {...rest}>
-      {items.map(({ label, key }) => (
-        <Tab key={key} label={label} value={key} />
-      ))}
-    </Tabs>
-  );
-};
-
-export default TabComponent;

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;
   }
 }

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;
   }

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 (
-    <Row data-testid="table-profiler-chart-container" gutter={[16, 16]}>
+    <Stack data-testid="table-profiler-chart-container" spacing="30px">
       {showHeader && (
         <>
           {!isSummaryLoading && !isProfilingEnabled && (
@@ -277,7 +277,7 @@ const TableProfilerChart = ({
           isLoading={isTableProfilerLoading || isSummaryLoading}
         />
       </Col>
-    </Row>
+    </Stack>
   );
 };
 

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 <Skeleton height={120} variant="rounded" width={210} />;
+    return <Skeleton height={100} variant="rounded" width={210} />;
   }
 
   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">
         <Icon height={40} width={40} />
         <Box>
-          <Typography sx={{ fontSize: '18px', fontWeight: 600 }} variant="h6">
+          <Typography
+            sx={{
+              color: theme.palette.grey[900],
+              fontSize: '18px',
+              fontWeight: 600,
+            }}
+            variant="h6">
             {value}
           </Typography>
           <Typography
-            color="text.secondary"
-            sx={{ fontSize: '14px', fontWeight: 500 }}>
+            sx={{
+              fontSize: '14px',
+              fontWeight: 500,
+              color: theme.palette.grey[700],
+            }}>
             {title}
           </Typography>
         </Box>
@@ -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',
           }}>
-          <Typography sx={{ fontSize: 10, fontWeight: 500 }}>
+          <Typography
+            sx={{
+              fontSize: 10,
+              color: theme.palette.grey[900],
+              fontWeight: theme.typography.fontWeightMedium,
+            }}>
             {extra}
           </Typography>
         </Box>