add todo items

src/components/UI/DataTable.tsx

@@ -21,9 +21,10 @@ export const DataTable: FC<Props> = ({
 }) => {
   return (
     <TableContainer
+      // TODO: Work on firefox implementation of scrollbar styles
+      // Note: This wont work on safari, we are ok with this.
       css={{
         "&::-webkit-scrollbar": {
-          background: "#d7f5ef",
           borderTop: '2px solid #11866f',
           height: 18
         },
@@ -68,14 +69,19 @@ export const DataTable: FC<Props> = ({
               return (
                 <Tr
                   key={idx}
+                  // TODO: Full width for hover
+                  // TODO: Add fade in animation on hover
+                  // TODO: Get new background color from nuno for hover
+                  _hover={{background: 'green.50'}}
                 >
                   {
                     columnHeaders.map((columnHeader, idx) => {
+                      // TODO: Make the font size smaller (refer to design system)
                       return (
                         <Td
                           key={idx}
                           px={0}
-                          pr={2}
+                          pr={8}
                         >
                           {item[columnHeader.toLowerCase()]}
                         </Td>