IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-11-24 09:40:21 -06:00
Code Issues Packages Projects Releases Wiki Activity

1) Alternate the background color of rows to enhance readability. #2874

Browse Source 
2) Make the background color for the serial number and header cells distinct. #7863
This commit is contained in:
Rohit Bhati 2024-10-01 12:21:44 +05:30 committed by GitHub
parent 15c37b620e
commit f8fb78be11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
View File

@ -37,6 +37,7 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
'& .QueryTool-columnName': { '& .QueryTool-columnName': {
fontWeight: 'bold', fontWeight: 'bold',
}, },
backgroundColor: theme.palette.grey[600],
}, },
'& .QueryTool-editedCell': { '& .QueryTool-editedCell': {
fontWeight: 'bold', fontWeight: 'bold',
@ -53,6 +54,8 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
}, },
'& .QueryTool-rowNumCell': { '& .QueryTool-rowNumCell': {
padding: '0px 8px', padding: '0px 8px',
fontWeight: 900,
color: theme.otherVars.tree.textFg,
}, },
'& .QueryTool-colHeaderSelected': { '& .QueryTool-colHeaderSelected': {
outlineColor: theme.palette.primary.main, outlineColor: theme.palette.primary.main,
@ -63,7 +66,24 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
outlineColor: theme.palette.primary.main, outlineColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light, backgroundColor: theme.palette.primary.light,
color: theme.otherVars.qtDatagridSelectFg, color: theme.otherVars.qtDatagridSelectFg,
} },
'& .rdg-row': {
'&:nth-of-type(even)': {
backgroundColor: theme.palette.grey[200],
},
'& .rdg-cell:nth-of-type(1)': {
backgroundColor: theme.palette.grey[600],
},
'& .rdg-cell:nth-of-type(1)[aria-selected="true"]':{
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
},
'& .rdg-header-row': {
'& .rdg-cell:nth-of-type(1)': {
backgroundColor: theme.palette.grey[600]
},
},
})); }));
export const RowInfoContext = React.createContext(); export const RowInfoContext = React.createContext();