u

src/components/manifest/ManifestFormLine.jsx

@@ -267,6 +267,11 @@ class ManifestFormLine extends PureComponent {
     const isFirstInput = hasPosCol ? colIdx === 1 : colIdx === 0;
     const isLast = colIdx === totalCols - 1;
 
+    const { dirtyFields } = this.props;
+    const isFieldDirty = Boolean(
+      dirtyFields && (dirtyFields.__all__ || dirtyFields[id])
+    );
+
     return (
       <TextField
         size="small"
@@ -290,6 +295,9 @@ class ManifestFormLine extends PureComponent {
           '& .MuiOutlinedInput-root': {
             borderRadius: isFirstInput ? '4px 0 0 4px' : isLast ? '0 4px 4px 0' : 0,
             ml: isFirstInput ? 0 : '-1px',
+            ...(isFieldDirty && {
+              bgcolor: 'rgba(237, 108, 2, 0.08)',
+            }),
             '&:hover': {
               zIndex: 1,
             },
@@ -297,6 +305,16 @@ class ManifestFormLine extends PureComponent {
               zIndex: 2,
             },
           },
+          ...(isFieldDirty && {
+            zIndex: 1,
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: 'warning.main',
+              borderWidth: 2,
+            },
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: 'warning.main',
+            },
+          }),
           '& input[type=number]': {
             MozAppearance: 'textfield',
           },
@@ -838,19 +856,13 @@ class ManifestFormLine extends PureComponent {
   }
 
   render() {
-    const { columns = LINE_COLUMNS, saving, isDirty } = this.props;
+    const { columns = LINE_COLUMNS, saving } = this.props;
     const secondLine = this.renderSecondLine();
 
     return (
       <Fragment>
         {/* Row 1: Editable Line Inputs */}
-        <TableRow
-          hover
-          sx={{
-            '& > td': { borderBottom: 'none', p: 0 },
-            ...(isDirty ? { bgcolor: 'rgba(237, 108, 2, 0.08)' } : {}),
-          }}
-        >
+        <TableRow hover sx={{ '& > td': { borderBottom: 'none', p: 0 } }}>
           {columns.map((col, colIdx) => (
             <TableCell
               key={col.id}
@@ -859,7 +871,6 @@ class ManifestFormLine extends PureComponent {
                 p: 0,
                 width: col.width,
                 verticalAlign: 'middle',
-                ...(isDirty && colIdx === 0 ? { borderLeft: '3px solid', borderColor: 'warning.main' } : {}),
               }}
             >
               {this.renderField(col, colIdx, columns.length)}
@@ -879,19 +890,13 @@ class ManifestFormLine extends PureComponent {
 
         {/* Row 2: Matched Supplier Article Details */}
         {secondLine && (
-          <TableRow
-            sx={{
-              '& > td': { pt: 0.25, pb: 0.75, borderBottom: 'none' },
-              ...(isDirty ? { bgcolor: 'rgba(237, 108, 2, 0.04)' } : {}),
-            }}
-          >
+          <TableRow sx={{ '& > td': { pt: 0.25, pb: 0.75, borderBottom: 'none' } }}>
             <TableCell
               colSpan={columns.length + 1}
               sx={{
                 py: 0.4,
                 px: 1,
                 bgcolor: 'transparent',
-                ...(isDirty ? { borderLeft: '3px solid', borderColor: 'warning.main' } : {}),
               }}
             >
               {secondLine}