More distinguishable list column headers (#1479)

* Header Row highlight * hot fix * adjust darkmode elevation * changes for test * elevation changes --------- Co-authored-by: tusmester <[email protected]>
SenseNet · Mar 10, 2023 · fa22100 · fa22100
1 parent 950ef19
commit fa22100
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx
@@ -91,7 +91,7 @@ export const isReferenceField = (fieldName: string, repo: Repository, schema = '
 }
 
 const rowHeightConst = 57
-const headerHeightConst = 42
+const headerHeightConst = 48
 
 export const ContentList = <T extends GenericContent = GenericContent>(props: ContentListProps<T>) => {
   const selectionService = useSelectionService()

diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx
@@ -49,6 +49,7 @@ const useStyles = makeStyles((theme: Theme) => {
       width: '100%',
       position: 'relative',
       overflow: 'hidden',
+      paddingTop: '8px',
     },
   })
 })

diff --git a/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx b/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
@@ -16,6 +16,13 @@ import { ActionsCell, DateCell, ReferenceCell, RowCheckbox, VirtualDefaultCell,
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    root: {
+      '& .ReactVirtualized__Table__headerRow': {
+        backgroundColor: theme.palette.type === 'dark' ? 'hsl(0deg 0% 24%)' : 'hsl(0deg 0% 92%)',
+        boxShadow:
+          theme.palette.type === 'dark' ? '0px 3px 2px hsl(0deg 0% 0% / 30%)' : '1px 1px 3px 0px hsl(0deg 0% 0% / 28%)',
+      },
+    },
     flexContainer: {
       display: 'flex',
       alignItems: 'center',
@@ -26,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     tableRowHover: {
       '&:hover': {
-        backgroundColor: theme.palette.type === 'dark' ? 'rgba(255, 255, 255, 0.14)' : 'rgba(0, 0, 0, 0.07)',
+        backgroundColor: theme.palette.type === 'dark' ? 'hsl(0deg 0% 51% / 10%)' : 'hsl(0deg 0% 0% / 3.5%)',
       },
     },
     tableCell: {
@@ -39,10 +46,12 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.type === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)',
     },
     label: {
-      display: 'block',
+      display: 'flex',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
+      letterSpacing: '1px',
+      color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : 'hsl(0deg 0% 40%)',
     },
   }),
 )
@@ -268,6 +277,7 @@ export const VirtualizedTable = <T extends GenericContent = GenericContent>(prop
     <AutoSizer>
       {({ height, width }) => (
         <Table
+          className={classes.root}
           height={height}
           width={width}
           gridStyle={{