Update Priorities with color properties

src/utils/Priorities.jsx

@@ -10,21 +10,25 @@ const Priorities = [
     name: 'P4',
     value: 4,
     icon: <HorizontalRule />,
+    color: '',
   },
   {
     name: 'P3 ',
     value: 3,
     icon: <KeyboardControlKey />,
+    color: '',
   },
   {
     name: 'P2',
     value: 2,
     icon: <KeyboardDoubleArrowUp />,
+    color: 'warning',
   },
   {
     name: 'P1',
     value: 1,
     icon: <PriorityHigh />,
+    color: 'danger',
   },
 ]
 

src/views/ChoreEdit/ChoreView.jsx

@@ -330,16 +330,26 @@ const ChoreView = () => {
             <Menu>
               {Priorities.map((priority, index) => (
                 <MenuItem
+                  sx={{
+                    pr: 1,
+                    py: 1,
+                  }}
                   key={index}
                   onClick={() => {
                     handleUpdatePriority(priority)
                   }}
+                  color={priority.color}
                 >
+                  {priority.icon}
                   {priority.name}
                 </MenuItem>
               ))}
               <Divider />
               <MenuItem
+                sx={{
+                  pr: 1,
+                  py: 1,
+                }}
                 onClick={() => {
                   handleUpdatePriority({
                     name: 'No Priority',