u

src/components/brand/ArtikelMarkeNew.jsx

@@ -34,7 +34,6 @@ class ArtikelMarkeNew extends PureComponent {
       <Box ref={rowRef} sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, pb: 2 }}>
         <SingleLineTextEdit
           size="small"
-          label="Neue Marke"
           value={newName}
           onChange={(next) => this.setState({ newName: next })}
           onKeyDown={(event) => {

src/routes/artikel/marken.jsx

@@ -7,6 +7,7 @@ import BackendError from '../../components/BackendError';
 import SearchIcon from '@mui/icons-material/Search';
 import IconButton from '@mui/material/IconButton';
 import ClearIcon from '@mui/icons-material/Clear';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import { backendErrorFrom } from '../../utils/backendError';
@@ -39,7 +40,7 @@ class ArtikelMarkenSearchField extends PureComponent {
     const { inputRef } = this.props;
 
     return (
-      <PanelTileGrid sx={{ mb: 2 }}>
+      <PanelTileGrid>
         <Box
           ref={inputRef}
           sx={{
@@ -50,41 +51,13 @@ class ArtikelMarkenSearchField extends PureComponent {
             },
             display: 'flex',
             flexDirection: 'column',
-            gap: 1.5,
           }}
         >
-          <TextField
+          <SingleLineTextEdit
             sx={{ width: '100%' }}
-            autoFocus
-            autoComplete="off"
+            size="small"
             value={this.state.input}
-            onChange={(e) => this.onInputChange(e.target.value)}
-            slotProps={{
-              htmlInput: {
-                autoCapitalize: 'off',
-                autoCorrect: 'off',
-              },
-              input: {
-                sx: { height: 40 },
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon color="action" />
-                  </InputAdornment>
-                ),
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      size="small"
-                      onClick={() => this.clearInput()}
-                      onMouseDown={(e) => e.preventDefault()}
-                      aria-label="Suche löschen"
-                    >
-                      <ClearIcon fontSize="small" />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              },
-            }}
+            onChange={(next) => this.onInputChange(next)}
           />
           <ArtikelMarkeNew />
         </Box>