style(SongDataGrid): Improved Header Readability (#954)

* style(SongDataGrid): Table Header Definition - #943

Signed-off-by: Balaguru4580 <balaguru4580@gmail.com>

* style(SongDataGrid): Improved Header Readability - #943

Signed-off-by: Balaguru4580 <balaguru4580@gmail.com>

* Shadow Effect

* Shadow Effect Opacity Adjustment

ui/src/common/SongDatagrid.js

@@ -28,6 +28,13 @@ const useStyles = makeStyles({
       },
     },
   },
+  headerCell: {
+    fontWeight: 'bold',
+    padding: '15px',
+  },
+  headerLine: {
+    boxShadow: '0px 3px 3px rgba(0, 0, 0, 0.15)',
+  },
   contextMenu: {
     visibility: 'hidden',
   },
@@ -178,9 +185,14 @@ export const SongDatagrid = ({
   showDiscSubtitles,
   ...rest
 }) => {
+  const classes = useStyles()
   return (
     <Datagrid
       {...rest}
+      classes={{
+        headerCell: classes.headerCell,
+        headerRow: classes.headerLine,
+      }}
       body={
         <SongDatagridBody
           contextAlwaysVisible={contextAlwaysVisible}