u

src/components/HelpBadge.jsx

@@ -8,6 +8,13 @@ import Popper from '@mui/material/Popper';
 import Typography from '@mui/material/Typography';
 import CloseIcon from '@mui/icons-material/Close';
 import { helpAutomat } from '../automats';
+import {
+  RED,
+  RED_HOVER,
+  SHADOW_BADGE,
+  SHADOW_POPOVER,
+  WHITE,
+} from '../colors';
 
 let nextHelpBadgeId = 0;
 
@@ -159,7 +166,7 @@ class HelpBadge extends PureComponent {
               borderRadius: 2,
               border: '1px solid',
               borderColor: 'divider',
-              boxShadow: '0 8px 28px rgba(0,0,0,0.2)',
+              boxShadow: SHADOW_POPOVER,
             }}
           >
             <Box
@@ -177,8 +184,8 @@ class HelpBadge extends PureComponent {
                     width: 18,
                     height: 18,
                     borderRadius: '50%',
-                    bgcolor: '#dc2626',
-                    color: '#ffffff',
+                    bgcolor: RED,
+                    color: WHITE,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -246,15 +253,15 @@ class HelpBadge extends PureComponent {
             onClick={this.handleBadgeClick}
             onKeyDown={this.handleBadgeKeyDown}
             sx={{
-              bgcolor: '#dc2626',
-              color: '#ffffff',
+              bgcolor: RED,
+              color: WHITE,
               fontWeight: 800,
               fontSize: '0.78rem',
               width: 20,
               height: 20,
               minWidth: 20,
               borderRadius: '50%',
-              boxShadow: '0 2px 5px rgba(0,0,0,0.35)',
+              boxShadow: SHADOW_BADGE,
               cursor: 'pointer',
               display: 'inline-flex',
               alignItems: 'center',
@@ -262,7 +269,7 @@ class HelpBadge extends PureComponent {
               userSelect: 'none',
               transition: 'background-color 0.15s ease',
               '&:hover': {
-                bgcolor: '#b91c1c',
+                bgcolor: RED_HOVER,
               },
               ...badgeSx,
               ...sx,
@@ -308,20 +315,20 @@ class HelpBadge extends PureComponent {
           sx={{
             display: 'inline-flex',
             '& .MuiBadge-badge': {
-              bgcolor: '#dc2626',
-              color: '#ffffff',
+              bgcolor: RED,
+              color: WHITE,
               fontWeight: 800,
               fontSize: '0.78rem',
               width: 20,
               height: 20,
               minWidth: 20,
               borderRadius: '50%',
-              boxShadow: '0 2px 5px rgba(0,0,0,0.35)',
+              boxShadow: SHADOW_BADGE,
               cursor: 'pointer',
               p: 0,
               transition: 'background-color 0.15s ease',
               '&:hover': {
-                bgcolor: '#b91c1c',
+                bgcolor: RED_HOVER,
               },
               ...badgeSx,
             },