Merge pull request #4670 from Lihlu/lihlumise/b/4661

Fix enitity picker modal styling

Author: James-Baloyi

shesha-reactjs/src/components/entityPicker/modal.tsx

@@ -231,7 +231,18 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps): JSX.Element
           <TablePager />
         </div>
 
-        <DataTable onSelectRow={onSelectRow} onDblClick={onDblClick} options={{ omitClick: true }} striped rowDividers rowAlternateBackgroundColor={getTableDefaults().rowAlternateBackgroundColor} />
+        <DataTable
+          onSelectRow={onSelectRow}
+          onDblClick={onDblClick}
+          options={{ omitClick: true }}
+          striped
+          rowDividers
+          rowAlternateBackgroundColor={getTableDefaults().rowAlternateBackgroundColor}
+          headerBackgroundColor="#ffffff"
+          headerFontSize={getTableDefaults().headerFontSize}
+          headerFontWeight={getTableDefaults().headerFontWeight}
+          headerFontFamily={getTableDefaults().headerFontFamily}
+        />
       </>
     </Modal>
   );

shesha-reactjs/src/components/entityPicker/styles/styles.ts

@@ -47,8 +47,13 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }, { style }:
         }
       
         .${shaReactTable} {
-          margin: unset;
+          margin: unset !important;
+          width: 100% !important;
+          display: block !important;
           overflow: auto;
+          border: 1px solid #d9d9d9;
+          border-radius: 6px;
+          box-sizing: border-box;
           ${sheshaStyles.thinScrollbars}
         }
       
@@ -63,7 +68,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }, { style }:
         }
       
         .${prefixCls}-modal-footer {
-          padding: 12px 24px;
+          padding: 12px 0 !important;
           display: flex;
           flex-direction: row;
           justify-content: space-between;
@@ -124,4 +129,4 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }, { style }:
     entityPickerModal,
     entitySelect,
   };
-});
+});