u

src/components/chat/ChatFab.jsx

@@ -10,6 +10,15 @@ import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';
 
 import chatAutomat, { selectPendingAskUser, selectHasPendingAsk } from '../../automats/chatAutomat';
+import {
+  CHAT_BUSY,
+  CHAT_FAB_BUSY,
+  CHAT_FAB_PENDING,  CHAT_FAB_SHADOW_BUSY,
+  CHAT_FAB_SHADOW_IDLE,
+  CHAT_FAB_SHADOW_PENDING,  RED,
+  RED_GLOW,
+  WHITE,
+} from '../../colors';
 
 export default class ChatFab extends PureComponent {
   constructor(props) {
@@ -86,7 +95,7 @@ export default class ChatFab extends PureComponent {
                 right: -8,
                 bottom: -8,
                 borderRadius: '50%',
-                bgcolor: '#f59e0b',
+                bgcolor: CHAT_BUSY,
                 opacity: 0.5,
                 animation: 'fabAskPulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                 '@keyframes fabAskPulse': {
@@ -129,7 +138,7 @@ export default class ChatFab extends PureComponent {
                 position: 'absolute',
                 top: -6,
                 left: -6,
-                color: '#f59e0b',
+                color: CHAT_BUSY,
                 pointerEvents: 'none',
               }}
             />
@@ -146,14 +155,14 @@ export default class ChatFab extends PureComponent {
               sx={{
                 '& .MuiBadge-badge': hasPendingAsk
                   ? {
-                      bgcolor: '#ef4444',
-                      color: '#ffffff',
+                      bgcolor: RED,
+                      color: WHITE,
                       fontWeight: 900,
                       fontSize: '0.85rem',
                       minWidth: 22,
                       height: 22,
                       borderRadius: '50%',
-                      boxShadow: '0 2px 10px rgba(239, 68, 68, 0.6)',
+                      boxShadow: `0 2px 10px ${RED_GLOW}`,
                       animation: 'badgePop 1.5s ease infinite',
                       '@keyframes badgePop': {
                         '0%, 100%': { transform: 'scale(1)' },
@@ -171,10 +180,10 @@ export default class ChatFab extends PureComponent {
                   width: 54,
                   height: 54,
                   boxShadow: hasPendingAsk
-                    ? '0 8px 24px rgba(245, 158, 11, 0.45)'
+                    ? CHAT_FAB_SHADOW_PENDING
                     : isBusy
-                    ? '0 8px 24px rgba(245, 158, 11, 0.35)'
-                    : '0 8px 24px rgba(59, 91, 219, 0.35)',
+                    ? CHAT_FAB_SHADOW_BUSY
+                    : CHAT_FAB_SHADOW_IDLE,
                   transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s',
                   '&:hover': {
                     transform: 'scale(1.06)',
@@ -183,9 +192,9 @@ export default class ChatFab extends PureComponent {
                     transform: 'scale(0.96)',
                   },
                   background: hasPendingAsk
-                    ? 'linear-gradient(135deg, #f59e0b 0%, #ea580c 100%)'
+                    ? CHAT_FAB_PENDING
                     : isBusy
-                    ? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
+                    ? CHAT_FAB_BUSY
                     : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%)`,
                 })}
               >