fix: menu item styling

Author: wackerow

src/components/LanguagePicker/MenuItem.tsx

@@ -58,7 +58,7 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
       pt="2 !important"
       alignItems="start"
       borderRadius="base"
-      bg="transparent"
+      bg={isCurrent ? "background.base" : "transparent"}
       color="body.base"
       textDecoration="none"
       data-group
@@ -108,7 +108,7 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
             {sourceName}
           </Text>
         </Box>
-        {isCurrent && <Icon as={BsCheck} fontSize="2xl" />}
+        {isCurrent && <Icon as={BsCheck} fontSize="2xl" color="primary.highContrast" />}
       </Flex>
       <Text
         textTransform="lowercase"
@@ -119,7 +119,7 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
         {progress} {t("page-languages-translated")} • {words}{" "}
         {t("page-languages-words")}
       </Text>
-      <ProgressBar value={approvalProgress} isCurrent={isCurrent} />
+      <ProgressBar value={approvalProgress} />
     </ChakraMenuItem>
   )
 })

src/components/LanguagePicker/ProgressBar.tsx

@@ -1,23 +1,16 @@
 import { Progress, ProgressProps } from "@chakra-ui/react"
 
-type ProgressBarProps = Pick<ProgressProps, "value"> & {
-  isCurrent?: boolean
-}
+type ProgressBarProps = Pick<ProgressProps, "value">
 
-const ProgressBar = ({ value, isCurrent }: ProgressBarProps) => (
+const ProgressBar = ({ value }: ProgressBarProps) => (
   <Progress
     value={value}
     h="0.5"
     w="full"
     bg="body.light"
-    _groupHover={{
-      "[role=progressbar]": {
-        backgroundColor: "primary.highContrast",
-      },
-    }}
     sx={{
       "[role=progressbar]": {
-        backgroundColor: isCurrent ? "primary.highContrast" : "body.medium",
+        backgroundColor: "disabled",
       },
     }}
   />