From 3d58c5ab5488361ac05cac7188e0d8c77001f7f7 Mon Sep 17 00:00:00 2001
From: Balaguru Ragupathi <61746056+Balaguru4580@users.noreply.github.com>
Date: Sat, 3 Apr 2021 07:45:59 +0530
Subject: [PATCH] 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 | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js
index 2a7d35161..0207d5f9b 100644
--- a/ui/src/common/SongDatagrid.js
+++ b/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}