refactor: update UI components for improved styling and layout consistency

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

@@ -168,7 +168,6 @@ const TabFilters = () => {
                 minWidth: '36px',
                 height: '32px',
               }}
-              title={t('label.setting-plural')}
               variant="outlined"
               onClick={onSettingButtonClick}>
               <SettingIcon />

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/ColumnSummary.tsx

@@ -10,11 +10,20 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Space, Typography } from 'antd';
+import {
-import { isEmpty } from 'lodash';
+  Card,
-import { FC } from 'react';
+  Divider,
+  Grid,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { FC, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Column } from '../../../../generated/entity/data/container';
 import { getEntityName } from '../../../../utils/EntityUtils';
+import { getFilterTags } from '../../../../utils/TableTags/TableTags.utils';
+import { DataPill } from '../../../common/DataPill/DataPill.styled';
 import RichTextEditorPreviewerV1 from '../../../common/RichTextEditor/RichTextEditorPreviewerV1';
 import TagsViewer from '../../../Tag/TagsViewer/TagsViewer';
 
@@ -23,26 +32,66 @@ interface ColumnSummaryProps {
 }
 
 const ColumnSummary: FC<ColumnSummaryProps> = ({ column }) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  const { Classification, Glossary } = useMemo(() => {
+    return getFilterTags(column.tags ?? []);
+  }, [column.tags]);
+
   return (
-    <div className="summary-card h-full">
+    <Card
-      <Space>
+      sx={{
-        <Typography className="font-medium">{getEntityName(column)}</Typography>
+        borderRadius: '12px',
-
+        border: `1px solid ${theme.palette.grey[200]}`,
-        <Typography.Text className="text-xs text-grey-muted">{`(${column.dataType})`}</Typography.Text>
+        boxShadow: 'none',
-      </Space>
+      }}>
-
+      <Stack alignItems="center" direction="row" spacing={3} sx={{ p: 4 }}>
-      <RichTextEditorPreviewerV1
+        <Typography
-        className="text-grey-muted m-t-xs"
+          sx={{
-        markdown={column.description ?? ''}
+            fontSize: theme.typography.pxToRem(16),
-        maxLength={184}
+            fontWeight: theme.typography.fontWeightMedium,
-      />
+            color: theme.palette.grey[900],
-
+          }}>
-      {!isEmpty(column.tags) ? (
+          {getEntityName(column)}
-        <div className="m-t-xs">
+        </Typography>
-          <TagsViewer sizeCap={3} tags={column.tags ?? []} />
+        <DataPill
-        </div>
+          sx={{
-      ) : null}
+            border: `1px solid ${theme.palette.grey[200]}`,
-    </div>
+            backgroundColor: theme.palette.grey[50],
+            fontSize: theme.typography.pxToRem(12),
+            fontWeight: theme.typography.fontWeightMedium,
+            color: theme.palette.grey[700],
+            p: '3px 6px',
+          }}>
+          {column.dataType}
+        </DataPill>
+      </Stack>
+      <Divider />
+      <Stack spacing={3} sx={{ p: 4 }}>
+        <RichTextEditorPreviewerV1
+          className="text-grey-muted m-t-xs"
+          markdown={column.description ?? ''}
+          maxLength={184}
+        />
+        <Divider
+          sx={{
+            borderStyle: 'dashed',
+            borderColor: theme.palette.grey[200],
+          }}
+        />
+        <Grid container spacing={4}>
+          <Grid size={2}>{t('label.glossary-term-plural')}</Grid>
+          <Grid size={10}>
+            <TagsViewer newLook sizeCap={3} tags={Glossary ?? []} />
+          </Grid>
+          <Grid size={2}>{t('label.tag-plural')}</Grid>
+          <Grid size={10}>
+            <TagsViewer newLook sizeCap={3} tags={Classification ?? []} />
+          </Grid>
+        </Grid>
+      </Stack>
+    </Card>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/SingleColumnProfile.tsx

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Stack } from '@mui/material';
+import { Grid, Stack } from '@mui/material';
 import { AxiosError } from 'axios';
 import { find, first, isString, last, pick } from 'lodash';
 import { DateRangeObject } from 'Models';
@@ -167,7 +167,15 @@ const SingleColumnProfile: FC<SingleColumnProfileProps> = ({
       className="m-b-lg"
       data-testid="profiler-tab-container"
       spacing="30px">
-      {selectedColumn && <ColumnSummary column={selectedColumn} />}
+      {selectedColumn && (
+        <Grid container spacing={5}>
+          <Grid size={7.2}>
+            <ColumnSummary column={selectedColumn} />
+          </Grid>
+          <Grid size="grow">"DQ widget"</Grid>
+        </Grid>
+      )}
+
       <ProfilerDetailsCard
         chartCollection={columnMetric.countMetrics}
         isLoading={isLoading}

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx

@@ -88,7 +88,7 @@ const TagsViewer: FunctionComponent<TagsViewerProps> = ({
   const popoverRenderElement = useMemo(
     () =>
       sortedTagsBySource.slice(sizeCap).length > 0 && (
-        <div className="m-t-xss" data-testid="popover-element">
+        <div data-testid="popover-element">
           <Popover
             content={
               <div className="d-flex flex-column flex-wrap gap-2">
@@ -101,7 +101,9 @@ const TagsViewer: FunctionComponent<TagsViewerProps> = ({
             placement="bottom"
             trigger="click">
             <Tag
-              className="cursor-pointer plus-more-tag"
+              className={classNames('cursor-pointer plus-more-tag', {
+                'new-look': newLook,
+              })}
               data-testid="plus-more-count">{`+${
               sortedTagsBySource.length - (sizeCap ?? 0)
             } more`}</Tag>

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/tags-viewer.less

@@ -44,3 +44,16 @@
     }
   }
 }
+
+.plus-more-tag {
+  &.new-look {
+    color: @primary-color;
+    font-size: 12px;
+    font-weight: 500;
+    background-color: unset;
+    border: none;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx

@@ -28,7 +28,7 @@ const SummaryCardV1 = ({
       <Card
         sx={{
           borderRadius: '12px',
-          border: '1px solid #E9E9F5',
+          border: `1px solid ${theme.palette.grey[200]}`,
           boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.25)',
           minWidth: '210px',
           display: 'flex',