@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -3,11 +3,7 @@ import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
@@ -28,8 +24,8 @@ export type CatalogEntityRelationsTableProps = {
   setSearchQuery: (query: string) => void;
   heading?: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -112,7 +108,7 @@ const CatalogEntityRelationsTableWrapper = styled.div`
 `;
 
 const Heading = styled.h2`
-  margin: var(--spacing-base) 0;
+  margin: 0 0 var(--spacing-base) 0;
   font-size: var(--font-size-md);
   color: var(--catalog-metadata-heading-color);
 `;

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
-import type { BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import type { BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
@@ -24,7 +24,7 @@ export type CatalogEntityRelationsTableContentProps = {
   };
   searchQuery: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
-  sortOption: SortOption | null;
+  sortOption: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -2,11 +2,7 @@ import React, { JSX, ReactNode } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
@@ -16,6 +12,7 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 import { CatalogUserEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
 import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';
 
 const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
   {
@@ -24,12 +21,12 @@ const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
     render: (entity) => (
       <CatalogUserEntityCell name={entity.title} email={entity.metadata?.email as string} />
     ),
-    width: '2fr',
+    width: '3fr',
     sortable: true,
     sortKey: 'title',
   },
   {
-    key: 'metadata',
+    key: 'metadata.role',
     title: 'Role',
     render: (entity) => (entity.metadata?.role ? <Tag>{entity.metadata?.role}</Tag> : null),
     width: '2fr',
@@ -38,7 +35,16 @@ const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
     key: 'description',
     title: 'Description',
     render: (entity) => <EntityDescription>{entity.summary}</EntityDescription>,
-    width: '3fr',
+    width: '2fr',
+  },
+  {
+    key: 'lastUpdate',
+    title: 'Last update',
+    render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
+    width: '1fr',
+    minWidth: '112px',
+    sortable: true,
+    sortKey: 'updated_at',
   },
 ];
 
@@ -55,8 +61,8 @@ export type CatalogEntityTeamRelationsProps = {
   searchQuery: string;
   setSearchQuery: (query: string) => void;
   setFilter: (filter: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -40,7 +40,7 @@ export function CatalogEntitySchema({
   });
 
   return (
-    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntitySchema">
       <HeaderWrapper>
         <Heading>{translate('catalog.entity.schema.title')}</Heading>
         {!isGraphql && (
@@ -89,8 +89,7 @@ const MetadataWrapper = styled.div`
   flex-direction: column;
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
-  margin-top: var(--spacing-base);
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--spacing-lg);
 `;
 
 const SchemaContentWrapper = styled.div`
@@ -110,6 +109,8 @@ const HeaderWrapper = styled.div`
 
 const Heading = styled.h2`
   font-size: var(--catalog-metadata-heading-size);
+  line-height: var(--line-height-lg);
+  margin: 0;
 `;
 
 const SplitViewWrapper = styled.div`

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -6,33 +6,40 @@ import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeIconProps = {
   entityType: string;
-  defaultColor?: boolean;
+  defaultColors?: boolean;
+  size?: 'large' | 'medium';
 };
 
 export function CatalogEntityTypeIcon({
   entityType,
-  defaultColor = false,
+  defaultColors = false,
+  size = 'medium',
 }: CatalogEntityTypeIconProps) {
   return (
     <IconContainer
       data-component-name="Catalog/CatalogEntityTypeIcon"
       entityType={entityType}
-      defaultColor={defaultColor}
+      defaultColors={defaultColors}
+      size={size}
     >
-      <CatalogEntityIcon entityType={entityType} defaultColor={defaultColor} />
+      <CatalogEntityIcon entityType={entityType} defaultColor={false} />
     </IconContainer>
   );
 }
 
-const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
+const IconContainer = styled.div<{
+  entityType: string;
+  defaultColors: boolean;
+  size: 'large' | 'medium';
+}>`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--catalog-table-icon-width);
-  height: var(--catalog-table-icon-height);
+  width: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-width-large)' : 'var(--catalog-table-icon-width-medium)')};
+  height: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-height-large)' : 'var(--catalog-table-icon-height-medium)')};
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => {
-    if (defaultColor) {
+  background-color: ${({ defaultColors, entityType }) => {
+    if (defaultColors) {
       return 'var(--catalog-entity-bg-color)';
     }
     if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
@@ -42,8 +49,8 @@ const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
   }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) => {
-      if (defaultColor) {
+    ${({ defaultColors, entityType }) => {
+      if (defaultColors) {
         return 'var(--catalog-entity-border-color)';
       }
       if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.tsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 
 import { CatalogMobileTopBarFiltersButton } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton';
 import { CatalogMobileTopBarControls } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls';
-import { breakpoints, SortOption } from '@redocly/theme/core';
+import { breakpoints } from '@redocly/theme/core';
 import { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarProps = {
   setMobileFiltersPanelOpen: (open: boolean) => void;
   activeFiltersCount: number;
-  setSortOption: (sortOption: SortOption | null) => void;
-  sortOption: SortOption | null;
+  setSortOption: (sortOption: string | null) => void;
+  sortOption: string | null;
   viewMode: CatalogViewMode;
   setViewMode: (viewMode: CatalogViewMode) => void;
 };

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.tsx

@@ -3,12 +3,11 @@ import styled from 'styled-components';
 
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
-import { SortOption } from '@redocly/theme/core';
 import { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarControlsProps = {
-  setSortOption: (sortOption: SortOption | null) => void;
-  sortOption: SortOption | null;
+  setSortOption: (sortOption: string | null) => void;
+  sortOption: string | null;
   viewMode: CatalogViewMode;
   setViewMode: (viewMode: CatalogViewMode) => void;
 };

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -58,7 +58,7 @@ const CatalogDescription = styled.p`
   color: var(--catalog-description-text-color);
   font-weight: var(--catalog-description-font-weight);
   font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin);
+  margin: 0;
   line-height: var(--catalog-description-line-height);
   display: -webkit-box;
   -webkit-line-clamp: 3;

package/src/components/Catalog/CatalogSortButton.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { SortOption } from '@redocly/theme/core/types';
 import { AscSortIcon } from '@redocly/theme/icons/AscSortIcon/AscSortIcon';
 import { DescSortIcon } from '@redocly/theme/icons/DescSortIcon/DescSortIcon';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
@@ -10,16 +9,16 @@ import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMen
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogSortButtonProps = {
-  onSortChange: (sortOption: SortOption | null) => void;
-  currentSort?: SortOption | null;
+  onSortChange: (sortOption: string | null) => void;
+  currentSort?: string | null;
 };
 
 export function CatalogSortButton({
   onSortChange,
   currentSort,
 }: {
-  onSortChange: (sortOption: SortOption | null) => void;
-  currentSort?: SortOption | null;
+  onSortChange: (sortOption: string | null) => void;
+  currentSort?: string | null;
 }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -27,7 +26,7 @@ export function CatalogSortButton({
   const toggleSort = useCallback(
     (field: string): void => {
       const newSort = currentSort === `-${field}` ? field : `-${field}`;
-      onSortChange(newSort as SortOption);
+      onSortChange(newSort);
     },
     [currentSort, onSortChange],
   );

package/src/components/Catalog/CatalogTableView/CatalogDomainsCell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 
 export type CatalogDomainsCellProps = {
   domains: string[];
@@ -9,15 +10,18 @@ export type CatalogDomainsCellProps = {
 export function CatalogDomainsCell({ domains }: CatalogDomainsCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogDomainsCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-domains-cell"
         items={domains}
         showPlaceholder={false}
         tagProps={{
+          variant: 'outline',
+          icon: <GraphIcon />,
           style: {
             fontSize: 'var(--font-size-base)',
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
+            margin: 0,
           },
           textTransform: 'none',
         }}

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -13,7 +13,7 @@ export type CatalogEntityCellProps<T extends Entity> = {
 export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
-      <CatalogEntityTypeIcon entityType={entity.type} />
+      <CatalogEntityTypeIcon entityType={entity.type} size="large" defaultColors={true} />
       <EntityTitleContent>
         <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>
@@ -40,7 +40,7 @@ const EntityTitleContent = styled.div`
   flex-direction: column;
   max-width: calc(
     100% - var(--catalog-table-entity-title-content-offset)
-  ); /* Account for icon width (30px) + gap (12px) */
+  ); /* Account for icon width (32px) + gap (8px) */
   overflow: hidden;
 `;
 

package/src/components/Catalog/CatalogTableView/CatalogLastUpdateCell.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+
+export type CatalogLastUpdateCellProps = {
+  lastModified: string;
+};
+
+function formatLastModified(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) {
+    return isoString;
+  }
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  });
+}
+
+function formatLastModifiedTooltip(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) {
+    return isoString;
+  }
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+    timeZone: 'UTC',
+  });
+}
+
+export function CatalogLastUpdateCell({
+  lastModified,
+}: CatalogLastUpdateCellProps): React.ReactElement {
+  return (
+    <CatalogLastUpdateCellWrapper data-component-name="Catalog/CatalogTableView/CatalogLastUpdateCell">
+      <Tooltip tip={formatLastModifiedTooltip(lastModified)} placement="bottom">
+        {formatLastModified(lastModified)}
+      </Tooltip>
+    </CatalogLastUpdateCellWrapper>
+  );
+}
+
+const CatalogLastUpdateCellWrapper = styled.div`
+  color: var(--text-color-helper);
+`;

package/src/components/Catalog/CatalogTableView/CatalogOwnersCell.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 
 export type CatalogOwnersCellProps = {
   owners: string[];
@@ -9,18 +9,21 @@ export type CatalogOwnersCellProps = {
 export function CatalogOwnersCell({ owners }: CatalogOwnersCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogOwnersCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-owners-cell"
         items={owners}
         showPlaceholder={false}
         tagProps={{
+          variant: 'outline',
           style: {
             fontSize: 'var(--font-size-base)',
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
+            margin: 0,
           },
           textTransform: 'none',
         }}
+        showAvatars={true}
       />
     </div>
   );

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { SortOption } from '@redocly/theme/core/types';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
 import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
@@ -12,18 +11,20 @@ import {
 
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
-  currentSortOption?: SortOption | null;
+  currentSortOption?: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
 
 export const CatalogTableHeaderCell = <T extends BaseEntity>({
   column,
+  currentSortOption,
   handleSortClick,
   isColumnSorted,
 }: CatalogTableHeaderCellProps<T>) => {
   const { handleCellClick, sortKey, isUpActive, isDownActive } = useCatalogTableHeaderCellActions({
     column,
+    currentSortOption,
     handleSortClick,
     isColumnSorted,
   });
@@ -88,7 +89,7 @@ const SortIndicator = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-left: 8px;
+  margin-left: 4px;
   gap: 2px;
   color: var(--catalog-table-header-sort-indicator-color);
 `;

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 
 import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
@@ -12,6 +12,7 @@ import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableV
 import { CatalogTableViewRow } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableViewRow';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { breakpoints } from '@redocly/theme/core';
+import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';
 
 export type BaseEntity = {
   id: string;
@@ -26,7 +27,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
   entitiesCatalogConfig?: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   columns?: CatalogColumn<T>[];
-  currentSortOption?: SortOption | null;
+  currentSortOption?: string | null;
   onRowClick?: (entity: T) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
@@ -50,7 +51,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
     title: 'Entity',
     render: (entity) => <CatalogEntityCell entity={entity} />,
     width: '3fr',
-    minWidth: '250px',
+    minWidth: '164px',
     sortable: true,
     sortKey: 'title',
   },
@@ -59,7 +60,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
     title: 'Type',
     render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
     width: '2fr',
-    minWidth: '120px',
+    minWidth: '162px',
     sortable: true,
     sortKey: 'type',
   },
@@ -70,7 +71,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
       <CatalogDomainsCell domains={entity.domains?.map((domain) => domain.title) || []} />
     ),
     width: '2fr',
-    minWidth: '150px',
+    minWidth: '162px',
   },
   {
     key: 'owners',
@@ -79,14 +80,23 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
       <CatalogOwnersCell owners={entity.owners?.map((owner) => owner.title) || []} />
     ),
     width: '2fr',
-    minWidth: '150px',
+    minWidth: '162px',
   },
   {
     key: 'tags',
     title: 'Tags',
     render: (entity) => <CatalogTagsCell entity={entity} />,
     width: '2fr',
-    minWidth: '120px',
+    minWidth: '160px',
+  },
+  {
+    key: 'lastUpdate',
+    title: 'Last update',
+    render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
+    width: '1fr',
+    minWidth: '112px',
+    sortable: true,
+    sortKey: 'updated_at',
   },
 ];
 

package/src/components/Catalog/CatalogTableView/CatalogTagsCell.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 
 export type CatalogTagsCellProps = {
   entity: BffCatalogEntity;
@@ -10,7 +10,7 @@ export type CatalogTagsCellProps = {
 export function CatalogTagsCell({ entity }: CatalogTagsCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogTagsCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-tags-cell"
         items={entity.tags || []}
         showPlaceholder={false}
@@ -18,6 +18,7 @@ export function CatalogTagsCell({ entity }: CatalogTagsCellProps) {
           style: {
             fontSize: 'var(--font-size-base)',
             borderRadius: 'var(--border-radius)',
+            margin: 0,
           },
           borderless: true,
           color: 'grey',

package/src/components/Catalog/CatalogTableView/CatalogUserEntityCell.tsx

@@ -48,8 +48,8 @@ const EntityTitle = styled.div`
 `;
 
 export const Email = styled.div`
-  font-size: var(--catalog-table-entity-summary-font-size);
-  line-height: var(--catalog-table-entity-summary-line-height);
+  font-size: var(--catalog-user-entity-cell-email-font-size);
+  line-height: var(--catalog-user-entity-cell-email-line-height);
   color: var(--color-blue-6);
   white-space: nowrap;
   overflow: hidden;