diff --git a/packages/ui/src/common/Accordion/AccordionItem.tsx b/packages/ui/src/common/Accordion/AccordionItem.tsx index 619271ff..11975853 100644 --- a/packages/ui/src/common/Accordion/AccordionItem.tsx +++ b/packages/ui/src/common/Accordion/AccordionItem.tsx @@ -42,7 +42,6 @@ export type AccordionItemProps = { const accordionItemStyle = (theme: Theme) => css` list-style: none; width: 100%; - border-radius: 8px; margin-bottom: 1px; overflow: hidden; background-color: ${theme.colors.white}; @@ -58,7 +57,7 @@ const accordionItemStyle = (theme: Theme) => css` const accordionItemTitleStyle = css` display: flex; align-items: flex-start; - padding: 24px 30px; + padding: 24px 30px 32px; transition: all 0.2s ease; width: 100%; box-sizing: border-box; @@ -82,7 +81,6 @@ const accordionItemButtonStyle = css` const contentColumnStyle = css` display: flex; flex-direction: column; - gap: 8px; `; const titleStyle = (theme: Theme) => css` @@ -91,7 +89,6 @@ const titleStyle = (theme: Theme) => css` overflow-wrap: break-word; word-wrap: break-word; cursor: pointer; - padding-bottom: 7px; `; const chevronStyle = (isOpen: boolean) => css` @@ -103,28 +100,27 @@ const titleRowStyle = (theme: Theme) => css` display: flex; gap: 4px; align-items: center; - margin-bottom: 10px; + &:hover [data-anchor-button] { opacity: 1; } &:hover [data-title-link] { color: ${theme.colors.secondary}; - text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } `; -const hashIconStyle = (theme: Theme) => css` +const hashIconStyle = () => css` + display: inline-flex; + align-items: center; + justify-content: center; opacity: 0; padding-block: 0px; padding-inline: 0px; background: transparent; border: none; cursor: pointer; - svg { - border-bottom: 2px solid ${theme.colors.secondary}; - } `; const descriptionWrapperStyle = (theme: Theme) => css` @@ -140,12 +136,11 @@ const accordionCollapseStyle = (isOpen: boolean) => css` `; const accordionItemContentStyle = css` - padding: 0px 30px 30px 30px; + padding: 0px 0px 30px; + border: none; `; const contentInnerContainerStyle = (theme: Theme) => css` - border-left: 2px solid ${theme.colors.grey_3}; - padding-left: 30px; ${theme.typography?.data}; `; @@ -185,7 +180,7 @@ const AccordionItem = ({ index, accordionData, openState }: AccordionItemProps)
@@ -201,7 +196,7 @@ const AccordionItem = ({ index, accordionData, openState }: AccordionItemProps)
diff --git a/packages/ui/src/viewer-table/DataTable/Table.tsx b/packages/ui/src/viewer-table/DataTable/Table.tsx index c687abae..e3f663f6 100644 --- a/packages/ui/src/viewer-table/DataTable/Table.tsx +++ b/packages/ui/src/viewer-table/DataTable/Table.tsx @@ -52,7 +52,7 @@ const scrollWrapperStyle = css` const shadowStyle = css` position: absolute; - top: 2%; + top: 1%; width: 20px; height: 100%; pointer-events: none; @@ -80,17 +80,13 @@ const tableContainerStyle = css` max-width: 100%; `; -const tableStyle = (theme: Theme) => css` +const tableStyle = () => css` min-width: 1200px; border-collapse: collapse; - border: 1px solid ${theme.colors.grey_3}; margin-top: 8px; position: relative; width: 100%; `; -const tableBorderStyle = (theme: Theme) => css` - border: 1px solid ${theme.colors.border_light}; -`; const hasNameProperty = (obj: unknown): obj is { name: string } => { if (typeof obj === 'object' && obj !== null && 'name' in obj && typeof obj.name === 'string') { @@ -176,19 +172,19 @@ const Table = ({ columns, data, schemaName, highlightedFieldName }: GenericT
- - +
+ {table.getHeaderGroups().map((headerGroup: HeaderGroup) => ( ))} - - {table.getRowModel().rows.map((row, i: number) => { + + {table.getRowModel().rows.map((row) => { const fieldName = hasNameProperty(row.original) ? row.original.name : undefined; const fieldId = schemaName && fieldName ? `${schemaName}.${fieldName}` : undefined; const isHighlighted = highlightedFieldName === fieldName; - return ; + return ; })}
diff --git a/packages/ui/src/viewer-table/DataTable/TableHeader.tsx b/packages/ui/src/viewer-table/DataTable/TableHeader.tsx index 1422bd4b..19b12d33 100644 --- a/packages/ui/src/viewer-table/DataTable/TableHeader.tsx +++ b/packages/ui/src/viewer-table/DataTable/TableHeader.tsx @@ -30,16 +30,22 @@ const thStyle = (theme: Theme, index: number) => css` ${theme.typography.tableHeader}; background: ${theme.colors.white}; text-align: ${index === 0 || index === 3 ? 'left' : 'center'}; - padding: 6px 12px; - border-bottom: 1px solid ${theme.colors.border_medium}; - border: 2px solid ${theme.colors.border_light}; - ${index === 0 && - ` + padding: 20px 16px; + border-block: 2px solid ${theme.colors.border_medium}; + border-right: 2px solid ${theme.colors.border_medium}; + :first-child { position: sticky; left: 0; + z-index: 2; max-width: 15vw; min-width: 325px; - `} + border-right: none; + box-shadow: inset -2px 0 0 0 ${theme.colors.border_medium}; + } + + :last-child { + border-right: none; + } `; export type TableHeaderProps = { diff --git a/packages/ui/src/viewer-table/DataTable/TableRow.tsx b/packages/ui/src/viewer-table/DataTable/TableRow.tsx index 3987a668..bfe6d2e9 100644 --- a/packages/ui/src/viewer-table/DataTable/TableRow.tsx +++ b/packages/ui/src/viewer-table/DataTable/TableRow.tsx @@ -28,23 +28,28 @@ import { type Theme, useThemeContext } from '../../theme/index'; const highlightPulse = (theme: Theme) => keyframes` 0% { background-color: ${theme.colors.accent_light}; } - 100% { background-color: transparent; } + 100% { background-color: inherit; } `; -const rowStyle = (index: number, theme: Theme) => css` - background-color: ${index % 2 === 0 ? theme.colors.white : theme.colors.background_alternate}; +const rowStyle = (theme: Theme) => css` + background-color: ${theme.colors.white}; scroll-margin-top: 100px; + + &:nth-child(even) { + background-color: ${theme.colors.background_alternate}; + } `; const highlightedCellStyle = (theme: Theme) => css` - animation: ${highlightPulse(theme)} 2s ease-out 0.5s forwards; + animation: ${highlightPulse(theme)} 2s ease-out 0.5s; `; -const tdStyle = (theme: Theme, cellIndex: number, rowIndex: number) => css` +const tdStyle = (theme: Theme, cellIndex: number, total: number) => css` ${theme.typography.paragraphSmall} - border: 2px solid ${theme.colors.border_light}; + border-block: 2px solid ${theme.colors.border_light}; + border-right: 2px solid ${theme.colors.border_light}; text-align: ${cellIndex === 1 || cellIndex === 2 ? 'center' : 'left'}; - padding: 12px; + padding: 16px; vertical-align: middle; min-width: 150px; @@ -52,15 +57,18 @@ const tdStyle = (theme: Theme, cellIndex: number, rowIndex: number) => css` ` position: sticky; left: 0; + z-index: 2; max-width: 15vw; min-width: 325px; - background-color: ${rowIndex % 2 === 0 ? theme.colors.white : theme.colors.background_alternate}; + background-color: inherit; + border-right: none; + box-shadow: inset -2px 0 0 0 ${theme.colors.border_light}; `} + ${cellIndex === total - 1 && `border-right: none;`} `; export type TableRowProps = { row: Row; - index: number; fieldId?: string; isHighlighted?: boolean; }; @@ -69,21 +77,20 @@ export type TableRowProps = { * Generic table row component with alternating background colors. * @template T - Row data type * @param {Row} row - TanStack table row object - * @param {number} index - Row index for styling * @param {string} fieldId - Optional field ID for anchor navigation (format: schemaName.fieldName) * @param {boolean} isHighlighted - Whether to highlight this row with a pulse animation * @returns {JSX.Element} Table row element */ -const TableRow = ({ row, index, fieldId, isHighlighted }: TableRowProps) => { +const TableRow = ({ row, fieldId, isHighlighted }: TableRowProps) => { const theme: Theme = useThemeContext(); return ( - - {row.getVisibleCells().map((cell, cellIndex) => { + + {row.getVisibleCells().map((cell, cellIndex, cells) => { return (
css` const containerStyle = css` background-color: white; - padding: 2.5rem; + padding: 2.5rem 0; margin: 0; border-bottom: 1px solid #d1d8df; display: flex; diff --git a/packages/ui/src/viewer-table/DictionaryHeader/DictionaryVersionSwitcher.tsx b/packages/ui/src/viewer-table/DictionaryHeader/DictionaryVersionSwitcher.tsx index 8530a168..ae39a42f 100644 --- a/packages/ui/src/viewer-table/DictionaryHeader/DictionaryVersionSwitcher.tsx +++ b/packages/ui/src/viewer-table/DictionaryHeader/DictionaryVersionSwitcher.tsx @@ -22,6 +22,7 @@ import { css } from '@emotion/react'; import Dropdown from '../../common/Dropdown/index'; import { useDictionaryDataContext, useDictionaryStateContext } from '../../dictionary-controller/DictionaryDataContext'; +import History from '../../theme/icons/History'; const formatDate = (date: Date | undefined): string => { return date ? date.toISOString().split('T')[0] : ''; @@ -57,11 +58,9 @@ const DictionaryVersionSwitcher = () => { } disabled={loading || errors.length > 0} size={16} - styles={css` - padding: 6px 12px; - `} /> ) ); diff --git a/packages/ui/src/viewer-table/Toolbar/AttributeFilterDropdown.tsx b/packages/ui/src/viewer-table/Toolbar/AttributeFilterDropdown.tsx index b686bb7a..4eb1e91a 100644 --- a/packages/ui/src/viewer-table/Toolbar/AttributeFilterDropdown.tsx +++ b/packages/ui/src/viewer-table/Toolbar/AttributeFilterDropdown.tsx @@ -55,7 +55,7 @@ const AttributeFilterDropdown = () => { return ( } - title="Filter By" + title="Filters" menuItems={menuItems} disabled={errors.length > 0 || loading} /> diff --git a/packages/ui/src/viewer-table/Toolbar/DiagramSubtitle.tsx b/packages/ui/src/viewer-table/Toolbar/DiagramSubtitle.tsx index 29202d57..79c774aa 100644 --- a/packages/ui/src/viewer-table/Toolbar/DiagramSubtitle.tsx +++ b/packages/ui/src/viewer-table/Toolbar/DiagramSubtitle.tsx @@ -78,7 +78,7 @@ const DiagramSubtitle = ({ isFocused }: { isFocused?: boolean }) => { <>
{isFocused ? 'Schema relation:' : 'Highlighting schema relation:'} - {activeSchemaChain.map((schema, index) => ( + {activeSchemaChain.toReversed().map((schema, index) => ( {index > 0 && {'\u2192'}} {schema} diff --git a/packages/ui/src/viewer-table/Toolbar/Toolbar.tsx b/packages/ui/src/viewer-table/Toolbar/Toolbar.tsx index 5b40d696..1d6faec3 100644 --- a/packages/ui/src/viewer-table/Toolbar/Toolbar.tsx +++ b/packages/ui/src/viewer-table/Toolbar/Toolbar.tsx @@ -46,10 +46,9 @@ const panelStyles = (theme: Theme) => css` width: -webkit-fit-content; align-items: center; justify-content: space-between; - padding: 8px 16px; + padding: 16px 0; background-color: ${theme.colors.white}; flex-wrap: nowrap; - min-height: 80px; position: sticky; z-index: 10; top: 0px; @@ -79,13 +78,13 @@ const Toolbar = ({ onSelect, setIsCollapsed, isCollapsed }: ToolbarProps) => {
- + {isCollapsed ? setIsCollapsed(false)} /> : setIsCollapsed(true)} />} +
-