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/context/Item.tsx

@@ -10,6 +10,7 @@ import {
   Spacer,
   Image,
   HStack,
+  Progress,
 } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Option, ContextMenuProps } from '../../../interfaces/context';
@@ -66,8 +67,8 @@ const Item: React.FC<{
                   }}
                 />
               )}
-              <Box>
-                <Box paddingBottom={button.description ? 1 : 0}>
+              <Box w="100%">
+                <Box>
                   <Text w="100%" fontWeight="medium" color={button.disabled ? '#718096' : undefined}>
                     {button.title ? button.title : buttonKey}
                   </Text>
@@ -77,6 +78,15 @@ const Item: React.FC<{
                     <Text>{button.description}</Text>
                   </Box>
                 )}
+                {button?.progress && (
+                  <Progress
+                    value={button.progress}
+                    size="sm"
+                    colorScheme={button.colorScheme || 'gray'}
+                    borderRadius="md"
+                    marginRight="5px"
+                  />
+                )}
               </Box>
               {(button.menu || button.arrow) && button.arrow !== false && (
                 <>