SRML-64 - Updated the table component design

changelog.txt

@@ -1,6 +1,7 @@
-Version 1.3.4 - 26th December, 2024
+Version 1.3.4 - 27th December, 2024
 - Improvement - Enhanced the UI of the Table and Line chart component for responsive design.
 - Improvement - Added option group to the Select component.
+- Improvement - Updated the Table component design.
 
 Version 1.3.3 - 20th December, 2024
 - Fixed - React `Each child in a list should have a unique "key" prop` console warning.

src/components/table/table.tsx

@@ -216,7 +216,7 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="flow-root divide-y divide-x-0 divide-solid divide-border-subtle">
+			<div className="flow-root border-0.5 border-solid border-border-subtle rounded-md divide-y-0.5 divide-x-0 divide-solid divide-border-subtle overflow-hidden">
 				<div className="overflow-x-auto w-full">
 					<div className="relative">
 						<table
@@ -258,7 +258,7 @@ export const TableHead: React.FC<TableHeadProps> = ( {
 	return (
 		<thead
 			className={ cn(
-				'bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]',
+				'bg-background-secondary border-x-0 border-t-0 border-b-0.5 border-solid border-border-subtle',
 				className
 			) }
 			{ ...props }
@@ -317,7 +317,7 @@ export const TableBody: React.FC<TableBodyProps> = ( {
 	return (
 		<tbody
 			className={ cn(
-				'bg-background-primary divide-y divide-x-0 divide-solid divide-border-subtle',
+				'bg-background-primary divide-y-0.5 divide-x-0 divide-solid divide-border-subtle',
 				className
 			) }
 			{ ...props }
@@ -378,7 +378,7 @@ export const TableCell: React.FC<TableCellProps> = ( {
 	return (
 		<td
 			className={ cn(
-				'px-3 py-4.5 text-sm font-normal leading-5 text-text-secondary',
+				'px-3 py-3.5 text-sm font-normal leading-5 text-text-secondary',
 				className
 			) }
 			{ ...props }
@@ -398,7 +398,7 @@ export const TableFooter: React.FC<TableFooterProps> = ( {
 	return (
 		<div
 			className={ cn(
-				'px-3 pb-4.5 pt-5.5',
+				'px-3 py-3',
 				checkboxSelection && 'px-4',
 				className
 			) }

src/theme/default-config.js

@@ -207,6 +207,9 @@ const defaultTheme = {
 			zIndex: {
 				999999: '999999',
 			},
+			borderWidth: {
+				0.5: '0.5px',
+			},
 		},
 	},
 	plugins: [],