define background color for all buttons on the mobile comparison page

tournesol-app · Nov 7, 2024 · 07fe339 · 07fe339
1 parent 1a6da34
commit 07fe339
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/frontend/src/features/comparisons/inputs/CriteriaButtons.tsx b/frontend/src/features/comparisons/inputs/CriteriaButtons.tsx
@@ -216,6 +216,7 @@ const CriteriaButtons = ({
           aria-label={t('comparisonCriteriaButtons.nextQualityCriterion')}
           onClick={() => moveWithoutPatching('down')}
           disabled={disableScoreButtons || navigationDisabled}
+          sx={{ bgcolor: 'background.mobileButton' }}
         >
           <ArrowDropUp />
         </IconButton>
@@ -257,6 +258,7 @@ const CriteriaButtons = ({
           aria-label={t('comparisonCriteriaButtons.previousQualityCriterion')}
           onClick={() => moveWithoutPatching('up')}
           disabled={disableScoreButtons || navigationDisabled}
+          sx={{ bgcolor: 'background.mobileButton' }}
         >
           <ArrowDropDown />
         </IconButton>

diff --git a/frontend/src/features/comparisons/inputs/CriterionButtons.tsx b/frontend/src/features/comparisons/inputs/CriterionButtons.tsx
@@ -76,10 +76,12 @@ const ScoreButton = ({
       color="secondary"
       onClick={() => onClick(score)}
       sx={{
-        minWidth: '38.8px',
+        minWidth: '40px',
         borderRadius: '4px',
-        backgroundColor: selected ? theme.palette.primary.main : 'grey.200',
-        color: selected ? 'white' : undefined,
+        backgroundColor: selected
+          ? theme.palette.primary.main
+          : theme.palette.background.mobileButton,
+        color: selected ? 'text.primary' : undefined,
         '&:hover': hover
           ? {
               color: 'white',

diff --git a/frontend/src/features/entity_selector/AutoEntityButton.tsx b/frontend/src/features/entity_selector/AutoEntityButton.tsx
@@ -39,7 +39,10 @@ const AutoEntityButton = ({
           color="secondary"
           size="small"
           onClick={onClick}
-          sx={{ fontSize: { xs: '0.7rem', sm: '0.8rem' } }}
+          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}

diff --git a/frontend/src/features/entity_selector/EntitySelectButton.tsx b/frontend/src/features/entity_selector/EntitySelectButton.tsx
@@ -198,7 +198,10 @@ const VideoInput = ({
             size="small"
             color="secondary"
             disabled={disabled}
-            sx={{ fontSize: { xs: '0.7rem', sm: '0.8rem' } }}
+            sx={{
+              fontSize: { xs: '0.7rem', sm: '0.8rem' },
+              bgcolor: 'background.mobileButton',
+            }}
             data-testid={`entity-select-button-${variant}`}
           >
             <Search />

diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
@@ -12,7 +12,8 @@ declare module '@mui/material/styles' {
   interface TypeBackground {
     primary: string;
     menu: string;
-    emphatic?: string;
+    emphatic: string;
+    mobileButton: string;
   }
 
   interface ZIndex {
@@ -42,6 +43,7 @@ export const theme = createTheme({
       primary: '#FAFAFA',
       menu: '#FAF8F3',
       emphatic: '#1282B2',
+      mobileButton: '#EEEEEE',
     },
   },
   typography: {