#416: Table View Styling Updates

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)
 			<div onClick={openState.toggle} role="button" css={accordionItemTitleStyle}>
 				<div css={chevronColumnStyle}>
 					<button css={accordionItemButtonStyle}>
-						<ChevronDown fill={theme.colors.black} width={16} height={16} style={chevronStyle(openState.isOpen)} />
+						<ChevronDown fill={theme.colors.black} width={20} height={20} style={chevronStyle(openState.isOpen)} />
 					</button>
 				</div>
 				<div css={contentColumnStyle}>
@@ -201,7 +196,7 @@ const AccordionItem = ({ index, accordionData, openState }: AccordionItemProps)
 						<button
 							type="button"
 							data-anchor-button
-							css={hashIconStyle(theme)}
+							css={hashIconStyle()}
 							onClick={(event) => hashOnClick(event, windowLocationHash, setClipboardContents)}
 						>
 							<Hash width={24} height={24} fill={theme.colors.secondary} />

packages/ui/src/common/Button.tsx

@@ -35,6 +35,7 @@ export interface ButtonProps {
 	className?: string;
 	isLoading?: boolean;
 	icon?: ReactNode;
+	size?: number;
 	width?: string;
 	iconOnly?: boolean;
 	tooltipText?: string;
@@ -48,7 +49,7 @@ const getButtonContainerStyles = (theme: any, width?: string, styleOverride?: Se
 	gap: 11px;
 	width: ${width || 'auto'};
 	min-width: fit-content;
-	padding: 6px 12px;
+	padding: 2px 12px;
 	background-color: ${theme.colors.background_light};
 	color: ${theme.colors.accent_dark};
 	border: 2px solid ${theme.colors.border_button};
@@ -72,7 +73,15 @@ const getButtonContainerStyles = (theme: any, width?: string, styleOverride?: Se
 	${styleOverride}
 `;
 
-const getContentStyles = (theme: Theme, shouldShowLoading: boolean) => css`
+const getContentStyles = ({
+	theme,
+	size,
+	shouldShowLoading,
+}: {
+	theme: Theme;
+	size: number;
+	shouldShowLoading: boolean;
+}) => css`
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -81,6 +90,7 @@ const getContentStyles = (theme: Theme, shouldShowLoading: boolean) => css`
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	font-size: ${size}px;
 	visibility: ${shouldShowLoading ? 'hidden' : 'visible'};
 `;
 
@@ -140,6 +150,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 			isLoading: controlledLoading,
 			icon,
 			width,
+			size = 16,
 			iconOnly = false,
 			styleOverride,
 			tooltipText,
@@ -171,7 +182,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 				)}
 				{icon && !shouldShowLoading && <span css={getIconStyles()}>{icon}</span>}
 				{/* If iconOnly is true, we don't show the children */}
-				{!iconOnly && <span css={getContentStyles(theme, shouldShowLoading)}>{children}</span>}
+				{!iconOnly && <span css={getContentStyles({ theme, size, shouldShowLoading })}>{children}</span>}
 				<span css={getSpinnerStyles(shouldShowLoading)}>
 					<Spinner fill={theme.colors.black} height={20} width={20} />
 				</span>

packages/ui/src/common/Dropdown/Dropdown.tsx

@@ -52,7 +52,7 @@ const dropdownButtonStyle = ({
 	gap: 11px;
 	width: ${width || 'auto'};
 	min-width: fit-content;
-	padding: 6px 12px;
+	padding: 2px 12px;
 	background-color: ${theme.colors.background_light};
 	color: ${theme.colors.accent_dark};
 	border: 2px solid ${theme.colors.border_button};
@@ -126,7 +126,7 @@ export type DropDownProps = {
  * @returns {JSX.Element} Dropdown component
  */
 
-const Dropdown = ({ menuItems = [], title, leftIcon, disabled = false, size = 20, styles }: DropDownProps) => {
+const Dropdown = ({ menuItems = [], title, leftIcon, disabled = false, size = 16, styles }: DropDownProps) => {
 	const [open, setOpen] = useState(false);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const theme: Theme = useThemeContext();

packages/ui/src/theme/icons/ChevronDown.tsx

@@ -36,9 +36,12 @@ const ChevronDown = ({ fill, width, height, style }: IconProps) => {
 			viewBox="0 0 12 12"
 		>
 			<path
-				fill={fill}
-				fillRule="evenodd"
-				d="M9.952 3.342c.468-.456 1.228-.456 1.697 0 .234.228.351.526.351.825 0 .298-.117.597-.351.825l-4.8 4.666c-.469.456-1.23.456-1.697 0l-4.8-4.666c-.47-.456-.47-1.194 0-1.65.468-.456 1.228-.456 1.696 0L6 7.184l3.952-3.842z"
+				fill="none"
+				stroke={fill}
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				d="M2 4L6 8L10 4"
 			/>
 		</svg>
 	);

packages/ui/src/theme/icons/Eye.tsx

@@ -33,7 +33,7 @@ const Eye = ({ fill, width, height, style }: IconProps) => {
 			css={style}
 			fill={fill || 'none'}
 			stroke="currentColor"
-			strokeWidth="2"
+			strokeWidth="1.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
 		>

packages/ui/src/theme/icons/FileDownload.tsx

@@ -37,7 +37,7 @@ const FileDownload = ({ fill, height, width, style }: IconProps) => {
 			viewBox="0 0 24 24"
 			fill={fill || 'none'}
 			stroke="currentColor"
-			strokeWidth="2"
+			strokeWidth="1.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
 		>

packages/ui/src/theme/icons/History.tsx

@@ -37,7 +37,7 @@ const History = ({ width, height, fill, style }: IconProps) => {
 			viewBox="0 0 24 24"
 			fill={fill || 'none'}
 			stroke="currentColor"
-			strokeWidth="2"
+			strokeWidth="1.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
 		>

packages/ui/src/theme/icons/List.tsx

@@ -31,22 +31,17 @@ const List = ({ fill, width, height, style }: IconProps) => {
 			xmlns="http://www.w3.org/2000/svg"
 			width={width || 24}
 			height={height || 24}
-			viewBox="0 0 24 24"
+			viewBox="0 0 16 16"
 			fill={fill || 'none'}
 			stroke="currentColor"
-			strokeWidth="2"
+			strokeWidth="1"
 			strokeLinecap="round"
 			strokeLinejoin="round"
 			css={css`
 				${style}
 			`}
 		>
-			<path d="M3 12h.01" />
-			<path d="M3 18h.01" />
-			<path d="M3 6h.01" />
-			<path d="M8 12h13" />
-			<path d="M8 18h13" />
-			<path d="M8 6h13" />
+			<path d="M1 4H11M1 8H11M1 12H11M14.5 4H14.51M14.5 8H14.51M14.5 12H14.51" />
 		</svg>
 	);
 };

packages/ui/src/theme/icons/ListFilter.tsx

@@ -36,7 +36,7 @@ const ListFilter = ({ fill, width, height, style }: IconProps) => {
 			fill={fill || 'none'}
 			viewBox="0 0 24 24"
 			stroke="currentColor"
-			strokeWidth="2"
+			strokeWidth="1.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
 		>

packages/ui/src/theme/styles/typography.ts

@@ -144,7 +144,7 @@ const headingSmall = css`
 const buttonText = css`
 	${baseFont}
 	font-size: 20px;
-	font-weight: 700;
+	font-weight: 500;
 	line-height: 1.5;
 	vertical-align: middle;
 `;
@@ -172,7 +172,7 @@ const fieldBlock = css`
 
 const tableHeader = css`
 	${baseFont}
-	font-size: 18px;
+	font-size: 20px;
 	font-weight: 600;
 	line-height: 20px;
 	vertical-align: middle;

packages/ui/src/viewer-table/DataTable/SchemaTable/Columns/Fields.tsx

@@ -42,33 +42,28 @@ const fieldNameRowStyle = (theme: Theme) => css`
 	display: flex;
 	align-items: center;
 	gap: 4px;
+	line-height: 1;
 	&:hover [data-field-anchor] {
 		opacity: 1;
 	}
 	&:hover [data-field-name] {
 		color: ${theme.colors.secondary};
-		text-decoration: underline;
-		text-decoration-thickness: 2px;
-		text-underline-offset: 4px;
 	}
 `;
 
-// Note: Added Line Height 1 for consistent vertical spacing for hashtag icon
-const fieldHashIconStyle = (theme: Theme) => css`
+const fieldHashIconStyle = css`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	opacity: 0;
-	line-height: 1;
 	padding-block: 0px;
 	padding-inline: 0px;
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	svg {
-		border-bottom: 2px solid ${theme.colors.secondary};
-	}
 `;
 
 const fieldNameStyle = css`
-	padding-bottom: 4px;
 	cursor: pointer;
 `;
 
@@ -126,7 +121,7 @@ export const FieldsColumn = ({ fieldRow, schemaName }: FieldColumnProps) => {
 				<b data-field-name onClick={handleAnchorClick} css={fieldNameStyle}>
 					{fieldName}
 				</b>
-				<button type="button" data-field-anchor css={fieldHashIconStyle(theme)} onClick={handleAnchorClick}>
+				<button type="button" data-field-anchor css={fieldHashIconStyle} onClick={handleAnchorClick}>
 					<Hash width={18} height={18} fill={theme.colors.secondary} />
 				</button>
 			</div>

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 = <R,>({ columns, data, schemaName, highlightedFieldName }: GenericT
 			<div css={tableContainerStyle} ref={scrollRef}>
 				<div css={leftShadowStyle(firstColumnWidth, showLeftShadow ? 1 : 0, theme)} />
 				<div css={rightShadowStyle(showRightShadow ? 1 : 0, theme)} />
-				<table css={tableStyle(theme)}>
-					<thead css={tableBorderStyle(theme)}>
+				<table css={tableStyle()}>
+					<thead>
 						{table.getHeaderGroups().map((headerGroup: HeaderGroup<R>) => (
 							<TableHeader key={headerGroup.id} headerGroup={headerGroup} />
 						))}
 					</thead>
-					<tbody css={tableBorderStyle(theme)}>
-						{table.getRowModel().rows.map((row, i: number) => {
+					<tbody>
+						{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 <TableRow key={row.id} row={row} index={i} fieldId={fieldId} isHighlighted={isHighlighted} />;
+							return <TableRow key={row.id} row={row} fieldId={fieldId} isHighlighted={isHighlighted} />;
 						})}
 					</tbody>
 				</table>