feat(web): context and list menu progress bars (#166)

* Initial Commit

Adds support for progress bars to items in both context and and list menus.

* Default Color Scheme & Description Weight

Added default color scheming, and made the description for context menues a lighter font weight for separating the title vs description better.

* iconColor to Menu & Small Syntax Changes

* Update Item.tsx

* fix(web/context): syntax error

also reformat with prettier

* chore(web/menu): reformat with prettier

Co-authored-by: Luke <sabolukas03@gmail.com>

web/src/features/menu/list/ListItem.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Stack, Text, Progress } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { forwardRef } from 'react';
 import CustomCheckbox from './CustomCheckbox';
@@ -28,10 +28,10 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
           return (ref.current = [...ref.current, element]);
       }}
     >
-      <Flex alignItems="center" height="100%" gap="20px">
+      <Flex alignItems="center" height="100%" gap="15px">
         {item.icon && (
           <Box display="flex" alignItems="center">
-            <FontAwesomeIcon icon={item.icon} fontSize={24} color="#909296" fixedWidth />
+            <FontAwesomeIcon icon={item.icon} fontSize={24} color={item.iconColor || '#909296'} fixedWidth />
           </Box>
         )}
         {Array.isArray(item.values) ? (
@@ -60,6 +60,13 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
             <Text>{item.label}</Text>
             <CustomCheckbox checked={checked}></CustomCheckbox>
           </Flex>
+        ) : item.progress !== undefined ? (
+          <Flex flexDirection="column" w="100%" marginRight="5px">
+            <Text verticalAlign="middle" marginBottom="3px">
+              {item.label}
+            </Text>
+            <Progress value={item.progress} size="sm" colorScheme={item.colorScheme || 'gray'} borderRadius="md" />
+          </Flex>
         ) : (
           <Text>{item.label}</Text>
         )}