u

src/components/chat/ChatDrawer.jsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
+import TextInput from '../TextInput';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import FormControl from '@mui/material/FormControl';
@@ -20,6 +20,10 @@ import chatAutomat, { selectPendingAskUser } from '../../automats/chatAutomat';
 import userSettingsAutomat from '../../automats/userSettingsAutomat';
 import ChatFlowList from './ChatFlowList';
 import AskUserPrompt from './AskUserPrompt';
+import {
+  BLUE_GLOW,
+  SHADOW_DRAWER,
+} from '../../colors';
 
 const DEFAULT_DRAWER_WIDTH = 460;
 const MIN_DRAWER_WIDTH = 320;
@@ -489,11 +493,10 @@ export default class ChatDrawer extends PureComponent {
         )}
 
         <Box sx={{ display: 'flex', alignItems: 'flex-end', gap: 1 }}>
-          <TextField
+          <TextInput
             inputRef={this.inputRef}
             multiline
             maxRows={4}
-            size="small"
             fullWidth
             value={inputText}
             onChange={(e) => this.setState({ inputText: e.target.value })}
@@ -502,22 +505,8 @@ export default class ChatDrawer extends PureComponent {
             placeholder={
               pendingAsk
                 ? 'Bitte Frage oben beantworten…'
-                : 'Nachricht eingeben… (Enter)'
+                : 'Nachricht eingeben…'
             }
-            slotProps={{
-              htmlInput: {
-                spellCheck: false,
-                autoCorrect: 'off',
-                autoCapitalize: 'off',
-              },
-            }}
-            sx={{
-              '& .MuiOutlinedInput-root': {
-                borderRadius: 2.5,
-                bgcolor: 'background.default',
-                fontSize: '0.875rem',
-              },
-            }}
           />
 
           <IconButton
@@ -576,7 +565,7 @@ export default class ChatDrawer extends PureComponent {
               maxWidth: '100vw',
               display: 'flex',
               flexDirection: 'column',
-              boxShadow: '-8px 0 32px rgba(0, 0, 0, 0.12)',
+              boxShadow: SHADOW_DRAWER,
               position: 'fixed',
               overflow: 'visible',
               transition: isResizing ? 'none !important' : undefined,
@@ -592,7 +581,7 @@ export default class ChatDrawer extends PureComponent {
                 maxWidth: '100vw',
                 display: 'flex',
                 flexDirection: 'column',
-                boxShadow: '-8px 0 32px rgba(0, 0, 0, 0.12)',
+                boxShadow: SHADOW_DRAWER,
                 position: 'fixed',
                 overflow: 'visible',
                 transition: isResizing ? 'none !important' : undefined,
@@ -625,7 +614,7 @@ export default class ChatDrawer extends PureComponent {
                 height: 56,
                 width: 4,
                 opacity: 1,
-                boxShadow: '0 0 10px rgba(59, 91, 219, 0.6)',
+                boxShadow: `0 0 10px ${BLUE_GLOW}`,
               },
             }}
           >
@@ -638,7 +627,7 @@ export default class ChatDrawer extends PureComponent {
                 bgcolor: isResizing ? 'primary.main' : 'divider',
                 opacity: isResizing ? 1 : 0.6,
                 transition: 'background-color 0.15s, height 0.15s, width 0.15s, opacity 0.15s, box-shadow 0.15s',
-                boxShadow: isResizing ? '0 0 10px rgba(59, 91, 219, 0.6)' : 'none',
+                boxShadow: isResizing ? `0 0 10px ${BLUE_GLOW}` : 'none',
               }}
             />
           </Box>