Improvements(UI): Made table styling consistent across the project (#7155)

* Made table border styling consistent across the project

* Worked on comments

* classname changed for table container in dataqualitytable component

* Update openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx

Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>

Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>

openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx

@@ -72,12 +72,12 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
 
   return (
     <Fragment>
-      <div className="tw-bg-white tw-border tw-border-main tw-rounded  tw-shadow">
+      <div className="tw-table-container">
         <table
           className="tw-w-full"
           data-testid="entity-custom-properties-table">
           <thead data-testid="table-header">
-            <tr className="tableHead-row tw-border-t-0 tw-border-l-0 tw-border-r-0">
+            <tr className="tableHead-row">
               <th className="tableHead-cell" data-testid="property-name">
                 Name
               </th>
@@ -98,7 +98,6 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
                 <tr
                   className={classNames(
                     `tableBody-row ${!isEven(index + 1) && 'odd-row'}`,
-                    'tw-border-l-0 tw-border-r-0',
                     {
                       'tw-border-b-0': index === customProperties.length - 1,
                     }

openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx

@@ -567,7 +567,7 @@ const DashboardDetails = ({
                       />
                     </div>
                   </div>
-                  <div className="tw-table-responsive tw-my-6">
+                  <div className="tw-table-responsive tw-my-6 tw-table-container">
                     <table className="tw-w-full" data-testid="charts-table">
                       <thead>
                         <tr className="tableHead-row">

openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx

@@ -249,7 +249,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
                       description={getDashboardDescription()}
                     />
                   </div>
-                  <div className="tw-table-responsive tw-my-6 tw-col-span-full">
+                  <div className="tw-table-responsive tw-my-6 tw-col-span-full tw-table-container">
                     <table className="tw-w-full" data-testid="schema-table">
                       <thead>
                         <tr className="tableHead-row">

openmetadata-ui/src/main/resources/ui/src/components/DataQualityTest/Table/DataQualityTable.tsx

@@ -94,7 +94,9 @@ const DataQualityTable = ({
   };
 
   return (
-    <div className="tw-table-responsive" data-testid="table-container">
+    <div
+      className="tw-table-responsive tw-table-container"
+      data-testid="table-container">
       <table className="tw-w-full">
         <thead>
           <tr className="tableHead-row" data-testid="table-header">

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx

@@ -40,7 +40,7 @@ const AssetsTabs = ({ assetData, onAssetPaginate, currentPage }: Props) => {
 
   return (
     <div>
-      <div className="" data-testid="table-container">
+      <div className="tw-table-container" data-testid="table-container">
         <table
           className="tw-bg-white tw-w-full tw-mb-4"
           data-testid="database-tables">

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx

@@ -426,7 +426,7 @@ const Ingestion: React.FC<IngestionProps> = ({
           </div>
         </div>
         {getSearchedIngestions().length ? (
-          <div className="tw-table-responsive tw-mb-6">
+          <div className="tw-table-responsive tw-mb-6 tw-table-container">
             <table
               className="tw-bg-white tw-w-full tw-mb-4"
               data-testid="ingestion-table">

openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx

@@ -340,8 +340,9 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
     return (
       <div className="tw-flex tw-flex-col tw-mt-2">
         <h6 className="tw-font-medium tw-text-base">Hyper Parameters</h6>
+        <div className="tw-table-container tw-mt-2">
           <table
-          className="tw-w-full tw-mt-2"
+            className="tw-w-full"
             data-testid="hyperparameters-table"
             id="hyperparameters-table">
             <thead>
@@ -359,10 +360,14 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
                       className={classNames('tableBody-row')}
                       data-testid="tableBody-row"
                       key={uniqueId()}>
-                    <td className="tableBody-cell" data-testid="tableBody-cell">
+                      <td
+                        className="tableBody-cell"
+                        data-testid="tableBody-cell">
                         {param.name}
                       </td>
-                    <td className="tableBody-cell" data-testid="tableBody-cell">
+                      <td
+                        className="tableBody-cell"
+                        data-testid="tableBody-cell">
                         {param.value}
                       </td>
                     </tr>
@@ -384,6 +389,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
             </tbody>
           </table>
         </div>
+      </div>
     );
   };
 
@@ -392,8 +398,9 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
       <div className="tw-flex tw-flex-col tw-mt-2">
         <h6 className="tw-font-medium tw-text-base">Model Store</h6>
         {mlModelDetail.mlStore ? (
+          <div className="tw-mt-2 tw-table-container">
             <table
-            className="tw-w-full tw-mt-2"
+              className="tw-w-full"
               data-testid="model-store-table"
               id="model-store-table">
               <thead>
@@ -433,6 +440,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
                 </tr>
               </tbody>
             </table>
+          </div>
         ) : (
           <span className="tw-text-grey-muted tw-text-center">No Data</span>
         )}

openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.component.tsx

@@ -246,7 +246,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
                       description={getPipelineDescription()}
                     />
                   </div>
-                  <div className="tw-table-responsive tw-my-6 tw-col-span-full">
+                  <div className="tw-table-responsive tw-my-6 tw-col-span-full tw-table-container">
                     <table className="tw-w-full" data-testid="schema-table">
                       <thead>
                         <tr className="tableHead-row">

openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx

@@ -101,7 +101,9 @@ const SampleDataTable: FunctionComponent<Props> = ({ sampleData }: Props) => {
         </button>
       ) : null}
 
-      <div className="tw-table-responsive tw-overflow-x-auto" ref={tableRef}>
+      <div
+        className="tw-table-responsive tw-overflow-x-auto tw-table-container"
+        ref={tableRef}>
         {sampleData?.rows?.length && sampleData?.columns?.length ? (
           <table
             className="tw-min-w-max tw-w-full tw-table-auto"

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx

@@ -52,10 +52,10 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
   }, []);
 
   return (
-    <div className="tw-bg-white tw-border tw-border-main tw-rounded">
+    <div className="tw-table-container">
       <table className="tw-w-full" data-testid="custom-properties-table">
         <thead data-testid="table-header">
-          <tr className="tableHead-row tw-border-t-0 tw-border-l-0 tw-border-r-0">
+          <tr className="tableHead-row">
             <th className="tableHead-cell tw-w-2/4" data-testid="property-name">
               Name
             </th>
@@ -72,7 +72,6 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
               <tr
                 className={classNames(
                   `tableBody-row ${!isEven(index + 1) && 'odd-row'}`,
-                  'tw-border-l-0 tw-border-r-0',
                   {
                     'tw-border-b-0': index === customProperties.length - 1,
                   }

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx

@@ -514,9 +514,9 @@ const DatabaseSchemaPage: FunctionComponent = () => {
 
   const getSchemaTableList = () => {
     return (
-      <Fragment>
+      <div className="tw-table-container tw-mb-4">
         <table
-          className="tw-bg-white tw-w-full tw-mb-4"
+          className="tw-bg-white tw-w-full"
           data-testid="databaseSchema-tables">
           <thead data-testid="table-header">
             <tr className="tableHead-row">
@@ -565,7 +565,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
             )}
           </tbody>
         </table>
-      </Fragment>
+      </div>
     );
   };
 

openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx

@@ -667,8 +667,9 @@ const DatabaseDetails: FunctionComponent = () => {
               <div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
                 {activeTab === 1 && (
                   <Fragment>
+                    <div className="tw-table-container tw-mb-4">
                       <table
-                      className="tw-bg-white tw-w-full tw-mb-4"
+                        className="tw-bg-white tw-w-full"
                         data-testid="database-databaseSchemas">
                         <thead data-testid="table-header">
                           <tr className="tableHead-row">
@@ -751,6 +752,7 @@ const DatabaseDetails: FunctionComponent = () => {
                           )}
                         </tbody>
                       </table>
+                    </div>
                     {Boolean(
                       !isNil(databaseSchemaPaging.after) ||
                         !isNil(databaseSchemaPaging.before)

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -996,10 +996,10 @@ const ServicePage: FunctionComponent = () => {
                 {activeTab === 1 && (
                   <Fragment>
                     <div
-                      className="tw-mt-4 tw-px-1"
+                      className="tw-my-4 tw-table-container"
                       data-testid="table-container">
                       <table
-                        className="tw-bg-white tw-w-full tw-mb-4"
+                        className="tw-bg-white tw-w-full"
                         data-testid="database-tables">
                         <thead>
                           <tr className="tableHead-row">{getTableHeaders()}</tr>

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -590,7 +590,7 @@ const TagsPage = () => {
                 onDescriptionUpdate={UpdateCategory}
               />
             </div>
-            <div className="tw-bg-white">
+            <div className="tw-table-container">
               <table className="tw-w-full" data-testid="table">
                 <thead>
                   <tr className="tableHead-row">

openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css

@@ -78,7 +78,7 @@
 
   /* Table css start */
   .tableHead-row {
-    @apply tw-border tw-border-main tw-leading-normal;
+    @apply tw-leading-normal;
   }
   .tableHead-cell {
     @apply tw-py-3 tw-px-6 tw-font-medium tw-text-left tw-whitespace-nowrap;
@@ -87,10 +87,10 @@
     @apply tw-text-grey-body;
   }
   .tableBody-row {
-    @apply tw-border tw-border-main hover:tw-bg-body-hover;
+    @apply tw-border-t tw-border-main hover:tw-bg-body-hover;
   }
   .tableBody-cell {
-    @apply tw-py-3 tw-px-6 tw-text-left;
+    @apply tw-py-2 tw-px-6 tw-text-left;
   }
   /* Table css end */
 
@@ -494,4 +494,8 @@
   .tw-max-w-75 {
     max-width: 75%;
   }
+
+  .tw-table-container {
+    @apply tw-bg-white tw-border tw-border-main tw-rounded tw-shadow;
+  }
 }