[front] fix: ensure background color is set on hover for mobile butto…

…ns (#2026)

* [front] fix: ensure background color is set on hover for mobile buttons

* use color from palette in CriterionButtons

frontend/src/components/buttons/MobileButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button, ButtonProps } from '@mui/material';
+
+const MobileButton = (props: ButtonProps) => {
+  return (
+    <Button
+      {...props}
+      sx={{
+        ...props.sx,
+        bgcolor: 'background.mobileButton',
+        '&:hover': {
+          bgcolor: 'background.mobileButton',
+        },
+      }}
+    />
+  );
+};
+
+export default MobileButton;

frontend/src/components/buttons/MobileIconButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconButton, IconButtonProps } from '@mui/material';
+
+const MobileIconButton = (props: IconButtonProps) => {
+  return (
+    <IconButton
+      {...props}
+      sx={{
+        ...props.sx,
+        bgcolor: 'background.mobileButton',
+        '&:hover': {
+          bgcolor: 'background.mobileButton',
+        },
+      }}
+    />
+  );
+};
+
+export default MobileIconButton;

frontend/src/components/buttons/index.ts

@@ -0,0 +1,2 @@
+export { default as MobileButton } from './MobileButton';
+export { default as MobileIconButton } from './MobileIconButton';

frontend/src/features/comparisons/inputs/CriteriaButtons.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useDrag } from '@use-gesture/react';
 import { Vector2 } from '@use-gesture/core/types';
 
-import { Box, Fade, IconButton, Slide } from '@mui/material';
+import { Box, Fade, Slide } from '@mui/material';
 import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
 
 import { useCurrentPoll } from 'src/hooks';
@@ -14,6 +14,7 @@ import { ComparisonRequest } from 'src/services/openapi';
 
 import CriterionButtons, { BUTTON_SCORE_MAX } from './CriterionButtons';
 import { useOrderedCriteria } from 'src/hooks/useOrderedCriteria';
+import { MobileIconButton } from 'src/components/buttons';
 
 const SWIPE_TIMEOUT = 180;
 const SWIPE_VELOCITY: number | Vector2 = [0.25, 0.25];
@@ -215,15 +216,14 @@ const CriteriaButtons = ({
         justifyContent="center"
         visibility={navigationDisabled ? 'hidden' : 'visible'}
       >
-        <IconButton
+        <MobileIconButton
           color="secondary"
           aria-label={t('comparisonCriteriaButtons.nextQualityCriterion')}
           onClick={() => moveWithoutPatching('down')}
           disabled={disableScoreButtons || navigationDisabled}
-          sx={{ bgcolor: 'background.mobileButton' }}
         >
           <ArrowDropUp />
-        </IconButton>
+        </MobileIconButton>
       </Box>
       <Slide
         in={slideIn}
@@ -263,15 +263,14 @@ const CriteriaButtons = ({
         justifyContent="center"
         visibility={navigationDisabled ? 'hidden' : 'visible'}
       >
-        <IconButton
+        <MobileIconButton
           color="secondary"
           aria-label={t('comparisonCriteriaButtons.previousQualityCriterion')}
           onClick={() => moveWithoutPatching('up')}
           disabled={disableScoreButtons || navigationDisabled}
-          sx={{ bgcolor: 'background.mobileButton' }}
         >
           <ArrowDropDown />
-        </IconButton>
+        </MobileIconButton>
       </Box>
     </Box>
   );

frontend/src/features/comparisons/inputs/CriterionButtons.tsx

@@ -93,7 +93,7 @@ const ScoreButton = ({
               color: undefined,
               backgroundColor: selected
                 ? theme.palette.primary.main
-                : 'grey.200',
+                : theme.palette.background.mobileButton,
             },
       }}
     >

frontend/src/features/entity_selector/AutoEntityButton.tsx

@@ -8,6 +8,7 @@ import { useCurrentPoll } from 'src/hooks/useCurrentPoll';
 import { theme } from 'src/theme';
 import { YOUTUBE_POLL_NAME } from 'src/utils/constants';
 import { ComparisonsContext } from 'src/pages/comparisons/Comparison';
+import { MobileButton } from 'src/components/buttons';
 
 interface Props {
   onClick: () => Promise<void>;
@@ -36,22 +37,21 @@ const AutoEntityButton = ({
   return (
     <>
       {smallScreen && variant === 'compact' ? (
-        <Button
+        <MobileButton
           className={context.hasLoopedThroughCriteria ? 'glowing' : undefined}
           disabled={disabled}
           color="secondary"
           size="small"
           onClick={onClick}
           sx={{
             fontSize: { xs: '0.7rem', sm: '0.8rem' },
-            bgcolor: 'background.mobileButton',
           }}
           data-testid={`auto-entity-button-${variant}`}
           startIcon={compactLabelLoc === 'left' ? compactLabel : undefined}
           endIcon={compactLabelLoc === 'right' ? compactLabel : undefined}
         >
           <SwipeUp />
-        </Button>
+        </MobileButton>
       ) : (
         <Tooltip
           title={`${t('entitySelector.newVideo')}`}

frontend/src/features/entity_selector/EntitySelectButton.tsx

@@ -9,7 +9,6 @@ import {
   useMediaQuery,
   Theme,
   Button,
-  IconButton,
 } from '@mui/material';
 import { Search } from '@mui/icons-material';
 
@@ -28,6 +27,7 @@ import SelectorPopper from './SelectorPopper';
 import { useLoginState, usePreferredLanguages } from 'src/hooks';
 import { ComparisonsContext } from 'src/pages/comparisons/Comparison';
 import { EntityObject } from 'src/utils/types';
+import { MobileIconButton } from 'src/components/buttons';
 
 // in milliseconds
 const TYPING_DELAY = 50;
@@ -193,19 +193,18 @@ const VideoInput = ({
         }}
       >
         {smallScreen && variant === 'compact' ? (
-          <IconButton
+          <MobileIconButton
             onClick={toggleSuggestions}
             size="small"
             color="secondary"
             disabled={disabled}
             sx={{
               fontSize: { xs: '0.7rem', sm: '0.8rem' },
-              bgcolor: 'background.mobileButton',
             }}
             data-testid={`entity-select-button-${variant}`}
           >
             <Search />
-          </IconButton>
+          </MobileIconButton>
         ) : (
           <Button
             fullWidth={variant === 'full' ? true : false}