Merge pull request #1699 from Northeastern-Electric-Racing/#1659-tab-through-products

#1659 visual indication when tabbing through delete and add

Author: RChandler234

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx

@@ -25,6 +25,7 @@ import { OtherProductReason, WbsNumber, validateWBS, wbsPipe, ReimbursementProdu
 import { Add, Delete } from '@mui/icons-material';
 import { Control, Controller, FieldErrors, UseFormSetValue } from 'react-hook-form';
 import { ReimbursementRequestFormInput } from './ReimbursementRequestForm';
+import { useTheme } from '@mui/system';
 
 const otherCategoryOptions = [
   { label: 'Competition', id: 'COMPETITION' },
@@ -83,6 +84,9 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
     setValue(`reimbursementProducts.${index}.cost`, parseFloat(value.toFixed(2)));
   };
 
+  const userTheme = useTheme();
+  const hoverColor = userTheme.palette.action.hover;
+
   return (
     <TableContainer>
       <Table>
@@ -155,23 +159,39 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                               {errors.reimbursementProducts?.[product.index]?.cost?.message}
                             </FormHelperText>
                           </FormControl>
-                          <IconButton onClick={() => removeProduct(product.index)}>
+                          <IconButton
+                            sx={{
+                              '&:focus': {
+                                backgroundColor: hoverColor
+                              }
+                            }}
+                            onClick={() => removeProduct(product.index)}
+                          >
                             <Delete />
                           </IconButton>
                         </Box>
                       </ListItem>
                     ))}
                   </Box>
                   <Button
-                    sx={{ margin: '4px' }}
+                    sx={{
+                      margin: '4px',
+                      '&:focus': {
+                        backgroundColor: hoverColor
+                      },
+                      '&:hover': {
+                        backgroundColor: hoverColor
+                      }
+                    }}
                     startIcon={<Add />}
-                    onClick={() =>
+                    onClick={(e) => {
                       appendProduct({
                         reason: key.includes('.') ? validateWBS(key) : (key as OtherProductReason),
                         name: '',
                         cost: 0
-                      })
-                    }
+                      });
+                      e.currentTarget.blur();
+                    }}
                   >
                     Add Product
                   </Button>