Add a new differential expression for drift detection (#4168)

* Add changed color

* Lint

* Adjust color

web/src/components/application-detail-page/application-detail/sync-state-reason/diff-view/index.tsx

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core";
 import green from "@material-ui/core/colors/green";
 import red from "@material-ui/core/colors/red";
+import yellow from "@material-ui/core/colors/yellow";
 import { FC, memo } from "react";
 
 const useStyles = makeStyles((theme) => ({
@@ -17,6 +18,10 @@ const useStyles = makeStyles((theme) => ({
     color: red[800],
     backgroundColor: red[50],
   },
+  change: {
+    color: yellow[900],
+    backgroundColor: yellow[50],
+  },
   line: {
     minHeight: `${theme.typography.body2.lineHeight}em`,
   },
@@ -46,6 +51,12 @@ export const DiffView: FC<DiffViewProps> = memo(function DiffView({ content }) {
                 <span className={classes.del}>{line}</span>
               </div>
             );
+          case "~":
+            return (
+              <div key={i} className={classes.line} data-testid="changed-line">
+                <span className={classes.change}>{line}</span>
+              </div>
+            );
           default:
             return (
               <div key={i} className={classes.line}>